// This script is onchain, but...
function setup() {
    createCanvas(800, 600);
    background(220);
}

function draw() {
    // ... but p5.js is external
    ellipse(mouseX, mouseY, 50, 50);
}

// Art Blocks Dependency Registry
contract DependencyRegistry {
    mapping(string => string) public dependencies;
    
    function storeDependency(string memory name, string memory version, string memory code) public {
        string memory key = string(abi.encodePacked(name, "@", version));
        dependencies[key] = code;
    }
    
    function getDependency(string memory name, string memory version) public view returns (string memory) {
        string memory key = string(abi.encodePacked(name, "@", version));
        return dependencies[key];
    }
}

// Example: Using p5.js from the onchain registry
function setup() {
    createCanvas(800, 600);
    // p5.js functions work exactly as before
    // but the library is loaded from onchain storage
}

function draw() {
    background(220);
    // All p5.js functionality available
    ellipse(mouseX, mouseY, 50, 50);
}

// Example: Using three.js for 3D art
import * as THREE from 'onchain://dependency-registry/three@r150';

function create3DScene() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, 800/600, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    // 3D graphics rendered from onchain code
}

// Example: Using ml5.js for AI-driven art
import * as ml5 from 'onchain://dependency-registry/ml5@0.19.0';

function setup() {
    // AI model loaded from onchain storage
    const classifier = ml5.imageClassifier('MobileNet', modelReady);
}

// Art Blocks On-Chain Generator Contract
contract ArtBlocksGenerator {
    // Contract: 0x953D288708bB771F969FCfD9BA0819eF506Ac718
    
    function getTokenHtml(
        address coreContract, 
        uint256 tokenId
    ) public view returns (string memory) {
        // Assembles complete HTML from:
        // - Artist's generative script (onchain)
        // - Dependencies from Dependency Registry (onchain)
        // - Token-specific data (onchain)
        // Returns HTML that renders the art in any browser
    }
    
    function getTokenHtmlBase64EncodedDataUri(
        address coreContract, 
        uint256 tokenId
    ) public view returns (string memory) {
        // Returns base64-encoded data URI
        // Can be pasted directly in browser address bar
    }
}

// Multiple projects can use the same onchain p5.js
// No duplication, no external dependencies
import { p5 } from "onchain://dependency-registry/p5@1.0.0";

// Art pieces can reference other onchain components
import { colorPalette } from "onchain://project/0x123.../palette";
import { geometry } from "onchain://project/0x456.../shapes";

// Dependencies are versioned and immutable
import { p5 } from "onchain://dependency-registry/p5@1.0.0";
// This version will always be available

// How libraries are stored in the registry
contract DependencyRegistry {
    // Libraries can be stored as complete JavaScript files on-chain
    // Or referenced via CDN URLs for progressive decentralization
    // Uses scripty.sol for efficient large JavaScript tag assembly
    
    function getDependency(string memory name, string memory version) public view returns (string memory) {
        // Returns either on-chain JavaScript code or CDN URL
        // Supports both fully on-chain and hybrid approaches
    }
    
    // Libraries are versioned and immutable when stored on-chain
    // CDN references provide flexibility for larger libraries
    // This ensures deterministic art generation while managing gas costs
}

// The On-Chain Generator uses scripty.sol for efficient assembly
contract ArtBlocksGenerator {
    using ScriptyBuilder for IScriptyBuilder;
    
    function getTokenHtml(address coreContract, uint256 tokenId) public view returns (string memory) {
        // 1. Retrieve artist script from project contract
        string memory artistScript = getArtistScript(coreContract);
        
        // 2. Get dependencies from registry (on-chain or CDN)
        string memory p5js = getDependency("p5", "1.0.0");
        string memory threejs = getDependency("three", "r150");
        
        // 3. Use scripty.sol to efficiently stitch JavaScript tags
        IScriptyBuilder htmlBuilder = IScriptyBuilder(scriptyStorage);
        
        htmlBuilder.addScriptTag("p5.js", p5js);
        htmlBuilder.addScriptTag("three.js", threejs);
        htmlBuilder.addScriptTag("artist-script", artistScript);
        
        // 4. Assemble complete HTML with embedded JavaScript
        return htmlBuilder.getHTML();
    }
}

<!DOCTYPE html>
<html>
<head>
    <script>
        // p5.js library (on-chain or CDN reference)
        // three.js library (on-chain or CDN reference)
        // Artist's generative script
        // Token-specific data and initialization
    </script>
</head>
<body>
    <canvas id="artwork"></canvas>
</body>
</html>

// Artists can build on each other's onchain components
import { basePattern } from "onchain://artist/0x123.../pattern";
import { colorSystem } from "onchain://artist/0x456.../colors";

// Art can reference other onchain data
import { marketData } from "onchain://oracle/price-feed";
// Art changes based on real-world data

// Art can interact with other onchain systems
import { userProfile } from "onchain://identity/user";
// Personalized art based on onchain identity