Step 1 — Code Art

// Dots (pallukat) — random colored dots across the canvas
// setup() runs once at startup
void setup() {
  size(800, 500);                         // Window size in pixels
  pixelDensity(displayDensity());         // HiDPI/Retina resolution support
  colorMode(HSB, 360, 100, 100);          // HSB color space (hue 0..360, sat/bright 0..100)
  background(0, 0, 100);                  // White background in HSB
}

// draw() runs ~60 times per second; each frame draws one new dot
void draw() {
  // Random position for the dot
  float x = random(width);
  float y = random(height);

  // Hue based on distance to a focal point (700, 250) with a small random jitter
  float hue = (dist(x, y, 700, 250) + random(-30, 30)) % 360;

  // Random saturation and brightness for variety
  float saturation = random(50, 100);
  float brightness = random(50, 100);

  // Draw a dot with no outline
  noStroke();
  fill(hue, saturation, brightness);

  // Random dot size
  float diameter = random(5, 20);
  ellipse(x, y, diameter, diameter);
}

// Stripe family (raitaperhe) — wide random vertical stripe + a horizontal line pattern
// setup(): configure canvas and color space once
void setup() {
  size(800, 500);                         // Canvas size
  pixelDensity(displayDensity());         // HiDPI/Retina support
  colorMode(HSB, 360, 100, 100);          // HSB color space (hue 0..360, sat/bright 0..100)
  background(0, 0, 100);                  // White background
}

// draw(): each frame adds one vertical stripe and one horizontal line pattern
void draw() {
  noStroke();

  // 1) A random vertical stripe with warm color
  fill(30, 90, 100);                      // Orange/yellow stripe
  float x = random(width);                 // Random x position
  float w = random(10, 100);               // Random stripe width
  rect(x, 0, w, height);

  // 2) A short horizontal line pattern at a random position
  float patternX = random(width);
  float patternY = random(height);

  // Choose black or white lines randomly
  if (random(1) < 0.5) {
    fill(0, 0, 0);                         // Black lines
  } else {
    fill(0, 0, 100);                       // White lines
  }

  // Random line thickness
  float thickness = random(1, 4);

  // Draw 5–15 horizontal lines, spaced by 10 px
  for (int i = 0; i < int(random(5, 15)); i++) {
    float shapeY = patternY + i * 10;
    rect(patternX, shapeY, 200, thickness); // Short horizontal rectangle as a line
  }
}

// Sweep (pyyhkäisy) — vertical lines with center‑biased density and slight jitter
// setup() runs once — configure canvas and color space
void setup() {
  size(800, 500);                         // Canvas size
  pixelDensity(displayDensity());         // HiDPI/Retina support
  colorMode(HSB, 360, 100, 100);          // HSB color space (hue 0..360, sat/bright 0..100)
  background(0, 0, 100);                  // White background (HSB)
}

// draw() runs ~60 fps — each frame draws one vertical line near the center band
void draw() {
  // Base x in the middle region; adjust the range to widen/narrow the band
  float x = random(300, 500);

  // Add small horizontal jitter for a hand‑drawn look
  float spread = 35;
  float x1 = x + random(-spread, spread); // top endpoint x
  float x2 = x + random(-spread, spread); // bottom endpoint x

  // Probability favors colored strokes near canvas center (x ≈ 400)
  // As |x-400| grows, pow((x-400)/100, 2) increases → more likely to draw white
  if (random(1) > pow((x - 400) / 100.0, 2)) {
    stroke(20, 100, 10);                  // Greenish colored line (HSB)
  } else {
    stroke(0, 0, 100);                    // White line (acts as highlight/erase)
  }

  // Slightly vary thickness for texture
  strokeWeight(random(1, 3));

  // Draw the full‑height vertical line
  line(x1, 0, x2, 500);
}

// Concentric boxes — alternating black/white and colored squares with slight jitter
// setup(): configure canvas and color space once
void setup() {
  size(800, 500);                         // Canvas size
  pixelDensity(displayDensity());         // HiDPI/Retina support
  colorMode(HSB, 360, 100, 100);          // HSB color space (hue 0..360, sat/bright 0..100)
  background(0, 0, 100);                  // White background
}

// draw(): each frame draws a stacked set of 10 squares centered on the canvas
void draw() {
  for (int i = 0; i < 10; i++) {
    noStroke();                           // No outline for clean blocks

    // Alternating fill scheme:
    // even i → grayscale (alternating black/white every 2 steps)
    // odd i  → random hue in a blue/teal range
    if (i % 2 == 0) {
      if (i % 4 == 0) {
        fill(0, 0, 0);                    // Black
      } else {
        fill(0, 0, 100);                  // White
      }
    } else {
      float hue = random(150, 210);       // Blue/teal hues
      float saturation = random(50, 100);
      float brightness = random(50, 100);
      fill(hue, saturation, brightness);
    }

    // Map i → size, large to small, plus a small random jitter for organic feel
    float size = map(i, 0, 9, 400, 0) + random(-20, 20);

    // Center squares at (400, 250)
    float x = 400 - size / 2;
    float y = 250 - size / 2;

    rect(x, y, size, size);
  }
}

// Animated Perlin-noise terrain (heightmap) rendered as triangle strips in 3D
int cols, rows;        // grid resolution in columns/rows
int scl = 20;          // grid cell size (pixels)
int w = 1200;          // total terrain width in world units
int h = 900;           // total terrain height in world units
float flying = 0;      // noise offset over time (moves the terrain like waves)

float [][] terrain;    // height values at each grid point

void setup(){  
  size(600, 600, P3D);
  cols = w / scl;
  rows = h / scl;
  terrain = new float[cols][rows];
}

void draw() {
  // 1) Update heightfield using 2D noise with a moving y-offset
  flying -= 0.01;                 // move "up" through noise space
  float yoff = flying;
  for (int y = 0; y < rows; y++) {            // row after row
    float xoff = 0;
    for (int x = 0; x < cols; x++) {          // column after column
      // noise(xoff, yoff) in [0..1] → map to height [-50..50]
      terrain[x][y] = map(noise(xoff, yoff), 0, 1, -50, 50);
      xoff += 0.1;                             // step in noise space along x
    }
    yoff += 0.1;                               // step in noise space along y (next row)
  }

  // 2) Render the mesh as a set of triangle strips, one strip per row
  background(0);
  stroke(255);
  noFill();

  // Move scene so the mesh is centered and tilted for perspective
  translate(width/2, height/2 + 50);
  rotateX(PI/3);
  translate(-w/2, -h/2);

  for (int y = 0; y < rows - 1; y++) {        // for each strip between row y and y+1
    beginShape(TRIANGLE_STRIP);
    for (int x = 0; x < cols; x++) {          // stitch vertices across the strip
      vertex(x * scl, y * scl,     terrain[x][y]);
      vertex(x * scl, (y+1) * scl, terrain[x][y+1]);
    }
    endShape();                                // close current strip (one per row)
  }
}

// Lorenz attractor in 3D using simple Euler integration
// Parameters (classic): sigma=a=10, rho=b=28, beta=c=8/3
// dx/dt = a(y - x),  dy/dt = x(b - z) - y,  dz/dt = xy - c z
// Camera: PeasyCam for orbit/zoom interaction
import peasy.*;

float x = 0.1;
float y = 0;
float z = 0;
float a = 10;
float b = 28;
float c = 8/3.0;                 // ensure float division
ArrayList points = new ArrayList();
PeasyCam cam;

void setup(){  
  size(800, 600, P3D);
  colorMode(HSB);
  cam = new PeasyCam(this, 500); // start with camera 500 units away
}

void draw(){ 
  background(0);

  // Integrate one timestep with a small dt (explicit Euler)
  float dt = 0.01; 
  float dx = (a * (y - x)) * dt;
  float dy = (x * (b - z) - y) * dt;
  float dz = (x * y - c * z) * dt;
  x += dx; y += dy; z += dz;

  // Build the polyline of visited points
  translate(0, 0, -80);
  points.add(new PVector(x, y, z));
  scale(5);

  stroke(255);
  noFill();
  float hu = 0;                  // animate hue along the trail

  beginShape();
  for (PVector v : points) {
    stroke(hu, 255, 255);
    vertex(v.x, v.y, v.z);

    // Optional tiny random diffusion to add texture to the line
    PVector offset = PVector.random3D(); // random unit vector
    offset.mult(0.2);                    // reduce randomness amplitude
    v.add(offset);                       // perturb the stored point slightly

    hu += 0.1;
    if (hu > 255) {
      hu = 0;
    }
  }
  endShape();

  // Note: points grows indefinitely; consider limiting length in long runs.
}

// Mandala-like parametric drawing in 3D
// Concept: Use polar coordinates with a radius that slowly changes with hu and a small random jitter.
// The point (x(t), y(t), z(t)) is plotted each frame around the center; over time it forms a mandala.
float t = 0;     // time parameter (angle driver)
float hu = 0;    // hue also influences the radius

void setup(){  
  size(800, 600, P3D);
  colorMode(HSB);
  background(0);
}

void draw(){
  translate(400, 300, 0);       // draw around canvas center
  stroke(hu, 255, 200);
  strokeWeight(5);
  point(x(t), y(t), z(t));      // plot one point on each frame

  // advance parameter and hue
  t++;
  hu = hu + 0.05;               // slow hue drift (also reduces radius below)
  if (hu > 100){
    hu = 0;                     // wrap hue to keep radius in a nice range
  }
}

// x(t): radius varies with hu and a small random jitter; angle = i/30
float x (float i){
  return (100 - hu - random(-2, 5)) * sin(i / 30);
}

// y(t): same radius/angle logic as x; reset t periodically to keep shape bounded
float y (float j){  
  if (t > 600){
    t = 0.2;
  }
  return (100 - hu - random(-2, 5)) * cos(j / 30);
}

// z(t): gentle vertical oscillation to give the pattern some depth
float z (float t){
  return 10 * cos(t / 30) + 200;
}