Abschematic

Abschematic is inspired by the intricate designs of electronic circuit boards, blending abstraction with structured randomness

1. Global Variables and Initialization Variables: The code defines several global variables:
   inscription_id: Extracted from the URL path, likely used as a seed for deterministic randomness (to ensure unique but reproducible outputs).
   parr: An array of color palettes (hex color combinations), each representing a set of colors for the artwork.
   pg, pgLeft, pgRight, pgExtra1, pgExtra2: Graphics buffers for rendering different sections of the layout.
   components: An array to store circuit components (e.g., resistors, capacitors).
   palette, bgColor: Variables for storing the selected color palette and background color.
   layoutOptions, cropOptions: Arrays defining possible layout and crop shape options for the design.
   Other variables like complexity, circuitDensity, lineType, selectedCrop, etc., control the design’s complexity and style.
   Hash Function (hashToInt): This function converts inscription_id (a string) into an integer for seeding randomness. It uses a simple hash algorithm (shifting and combining character codes) to ensure deterministic randomness, which is critical where each ID should produce a unique but reproducible output.
   Setup Function:
   Creates a 1000×1000 canvas.
   Uses hashToInt to seed randomness with inscription_id.
   Randomly selects a color palette, background color, pattern direction, layout, and crop shape.
   Initializes graphics buffers (pg, pgLeft, etc.) based on the selected layout (e.g., 1:1, 50:50 H/V, etc.).
   Determines complexity (1-500), generates components, calculates circuit density, and draws the circuit board on the graphics buffers.
2. Key Functions and Logic
   a. Randomness and Determinism The code uses random() and noise() for randomization, but seeds them with hashToInt(inscription_id) to ensure determinism. This means the same inscription_id will always produce the same output.
   noise() is used for creating organic patterns (e.g., in drawPattern and generateTexture).

b. Palette and Colors

createPalette(pc) splits a hex color string (e.g., “ff6700-ebebeb-c0c0c0”) into an array of color values (prefixed with #). clAlpha(col, alpha) adjusts a color’s opacity for blending or transparency effects. 50 palettes and a total of 275 colors across all palettes

  let parr = ["ff6700-ebebeb-c0c0c0-3a6ea5-004e98", "0a0908-22333b-eae0d5-c6ac8f-5e503f", "353535-3c6e71-ffffff-d9d9d9-284b63", "cb997e-ddbea9-ffe8d6-b7b7a4-a5a58d-6b705c-898d7d-a1a497", "383b5b-92a59b-b2b7af-94a89e-333e5b-d8b683-e1d0be-373b5b-c85544-323e5a", "177e89-084c61-db3a34-ffc857-323031-efefef", "f4f1de-e07a5f-3d405b-81b29a-f2cc8f", "0d3b66-faf0ca-f4d35e-ee964b-f95738", "0a100d-b9baa3-d6d5c9-a22c29-902923", "24a2bb-17384b-e59e44-f8f2e2-ae556b", "2d3142-bfc0c0-ffffff-ef8354-4f5d75", "30aa47-ffb81c-e85628-212738-edf2ef", "003049-d62828-f77f00-fcbf49-eae2b7", "e63946-f1faee-a8dadc-457b9d-1d3557", "2b2d42-8d99ae-edf2f4-ef233c-d90429", "3d5a80-98c1d9-e0fbfc-ee6c4d-293241", "e54b4b-ffa987-f7ebe8-444140-1e1e24", "ffffff-00171f-003459-007ea7-00a8e8", "ff5e5b-d8d8d8-ffffea-00cecb-ffed66", "000000-14213d-fca311-e5e5e5-ffffff", "588b8b-ffffff-ffd5c2-f28f3b-c8553d", "eeeeee-006ba6-0496ff-ffbc42-d81159-8f2d56", "edae49-d1495b-00798c-30638e-003d5b-fefefe", "dcdcdd-c5c3c6-46494c-4c5c68-1985a1-ffffff", "44355b-31263e-221e22-eca72c-ee5622-FDF7EC", "001219-005f73-0a9396-94d2bd-e9d8a6-ee9b00-ca6702-bb3e03-ae2012-9b2226", "780000-c1121f-fdf0d5-003049-669bbc", "335c67-fff3b0-e09f3e-9e2a2b-540b0e", "0081a7-00afb9-fdfcdc-fed9b7-f07167", "000814-001d3d-003566-ffc300-ffd60a", "f94144-f3722c-f8961e-f9844a-f9c74f-90be6d-43aa8b-4d908e-577590-277da1", "ff9f1c-ffbf69-ffffff-cbf3f0-2ec4b6", "011627-fdfffc-2ec4b6-e71d36-ff9f1c", "fffcf2-ccc5b9-403d39-252422-eb5e28", "ffa69e-faf3dd-b8f2e6-aed9e0-5e6472", "1a535c-4ecdc4-f7fff7-ff6b6b-ffe66d", "283d3b-197278-edddd4-c44536-772e25", "bee9e8-62b6cb-1b4965-cae9ff-5fa8d3", "cfdbd5-e8eddf-f5cb5c-242423-333533", "16697a-489fb5-82c0cc-ede7e3-ffa62b", "01161e-124559-598392-aec3b0-eff6e0", "a3a380-d6ce93-efebce-d8a48f-bb8588", "0d1321-1d2d44-3e5c76-748cab-f0ebd8", "50514f-f25f5c-ffe066-247ba0-70c1b3", "247ba0-70c1b3-b2dbbf-f3ffbd-ff1654", "0c0f0a-ff206e-fbff12-41ead4-ffffff", "495867-577399-bdd5ea-f7f7ff-fe5f55", "05668d-427aa1-ebf2fa-679436-a5be00", "ed6a5a-f4f1bb-9bc1bc-5ca4a9-e6ebe0", "a01b59-d0352d-ff4f00-004225-e6a817-46b1d8-fffdd0"];

c. Layouts and Cropping

Layouts: The selectedLayout (e.g., “1:1”, “50:50 H”, “25:25:25:25”) determines how the canvas is divided into sections, each rendered into a separate graphics buffer (e.g., pgLeft, pgRight). For example, “50:50 H” splits the canvas horizontally into two 400×800 sections. Cropping: selectedCrop (e.g., “hexagon”, “circle”, “rect”) defines the shape that masks the final output. Shapes are drawn in draw() using functions like drawHexagon, drawCircle, etc., with random sizes.

d. Components and Circuit Board

generateComponents(complexity) creates a random number of circuit components (20-200, based on complexity) with types like “IC,” “Resistor,” “Capacitor,” etc. Total 42 components available

  const componentDrawFunctions = {
    'IC': drawIC,
    'Resistor': drawResistor,
    'Capacitor': drawCapacitor,
    'Via': drawVia,
    'Inductor': drawInductor,
    'Switch': drawSwitch,
    'Ground': drawGround,
    'Battery': drawBattery,
    'Transistor': drawTransistor,
    'LED': drawLED,
    'Diode': drawDiode,
    'OpAmp': drawOpAmp,
    'FET': drawFET,
    'Choke': drawChoke,
    'Relay': drawRelay,
    'Connector': drawConnector,
    'Transformer': drawTransformer,
    'Oscillator': drawOscillator,
    'Capacitor Network': drawCapacitorNetwork,
    'Schottky Diode': drawSchottkyDiode,
    'Zener Diode': drawZenerDiode,
    'Heat Sink': drawHeatSink,
    'Buzzer': drawBuzzer,
    'Photodiode': drawPhotodiode,
    'Optocoupler': drawOptocoupler,
    'Thermistor': drawThermistor,
    'Potentiometer': drawPotentiometer,
    'Variable Resistor': drawVariableResistor,
    'Fuse': drawFuse,
    'Motor': drawMotor,
    'Relay Coil': drawRelayCoil,
    'Rectifier': drawRectifier,
    'Inductor Coil': drawInductorCoil,
    'Microcontroller': drawMicrocontroller,
    'Voltage Regulator': drawVoltageRegulator,
    'Crystal Oscillator': drawCrystalOscillator,
    'AND Gate': drawANDGate,
    'XOR Gate': drawXORGate,
    'OR Gate': drawORGate,
    'Thyristor': drawThyristor,
    'Voltage Source': drawVoltageSource
  };

drawCircuitBoard(pg, palette, complexity) renders the circuit board on a graphics buffer: Sets a random background color from the palette. Draws “traces” (lines connecting components) and individual components using componentDrawFunctions. Components are simple geometric shapes (e.g., rectangles, lines, ellipses) representing electronic symbols like resistors, transistors, and LEDs.

e. Textures and Patterns

generateTexture() creates a semi-transparent, noisy background texture using noise() and random colors from the palette with 40% opacity. drawPattern(palette) draws a subtle, noise-based pattern of points or lines, influenced by pattrnD (top-to-bottom or bottom-to-top direction). drawBackgroundLines() adds random lines (solid, dashed, or dotted) in horizontal or vertical orientations, with a color different from the background.

f. Drawing and Rendering

Draw Function: The main draw() function: Sets the background color. Draws the pattern, background lines, and texture. Applies an erase mask based on the selected crop shape (e.g., hexagon, circle). Renders the circuit board layouts using the graphics buffers (e.g., pg, pgLeft). Uses blendMode(MULTIPLY) for overlay effects. The canvas is centered, and images are translated to align properly.

g. Shape Functions

Functions like drawHexagon, drawCircle, drawDiamond, drawTriangle, etc., define the crop shapes. Each uses beginShape()/endShape() or basic shapes (e.g., ellipse, rect) with random sizes (getRandomSize).

h. Metadata Generation

generateMetadata() creates a JSON object with the artwork’s attributes (layout, crop type, complexity, density, etc.), which can be downloaded as a file (triggered by pressing ‘M’ or ‘m’).

3. Technical Aspects
   a. P5.js Features Used Canvas and Graphics: Uses createCanvas() and createGraphics() for rendering on the main canvas and off-screen buffers.
   Randomness and Noise: random(), noise(), and seeding for deterministic outputs.
   Shapes and Drawing: line(), rect(), ellipse(), beginShape()/endShape(), vertex(), etc., for drawing components and shapes.
   Blending and Transparency: blendMode(MULTIPLY), stroke(), fill(), noStroke(), noFill(), erase()/noErase(), and setAlpha() for layering and transparency.
   Events: keyPressed() for metadata export.

b. Performance Considerations

The code uses graphics buffers to pre-render sections, reducing real-time computation. Complexity is limited (1-500) to control performance, with component counts capped at 20-200. noLoop() is called in setup() to prevent continuous drawing, as this is a static generative piece.

c. Complexity and Density

complexity (1-500) and circuitDensity (calculated as components per area) allow for varying levels of detail. The density is calculated as components.length / (canvasWidth * canvasHeight), rounded to one decimal place.

4. Step-by-Step Execution Flow Initialization (Setup):
   Parse inscription_id from the URL.
   Seed randomness with hashToInt.
   Create a 1000×1000 canvas and set up graphics buffers based on the random layout.
   Select a palette, background color, pattern direction, layout, and crop shape.
   Generate components, calculate complexity/density, and draw the circuit board on buffers.
   Rendering (Draw):
   Set the background color.
   Draw a noise-based pattern, background lines, and texture.
   Apply a crop shape (e.g., hexagon) as an erase mask.
   Render the circuit board sections from the graphics buffers, positioned according to the layout.
   Use blending modes for layered effects.
   Interactivity:
   Pressing ‘M’ or ‘m’ triggers metadata export as a JSON file.
5. Output Characteristics The output is a visually abstract, circuit-board-inspired artwork with:
   A randomized layout (e.g., 1:1, 50:50 split).
   A crop shape (e.g., hexagon, circle).
   Circuit components connected by traces.
   A textured background with patterns and lines.
   Unique color schemes and complexity levels, reproducible via inscription_id.

Sample output