Midterm Progress 2 – Julia Set

Concept:

Continuing my work from the previous sketch, I noticed two things that needed to be done: refining my original code and creating a pen-plotting-friendly version. This time, I mainly focused on the latter. I kept the Julia set design but made it less dynamic and interactive to suit pen plotting. The design in the coding sketch produced a different concept than the plotted version, but I still liked the final outcome.

Code Highlight:

let c = { re: 0, im: 0 };
let zoom = 1;

function setup() {
  createCanvas(600, 600);
  noFill();
}

function draw() {
  background(0); 
  let w = 4 / zoom;
  let h = (4 * height) / width / zoom;

  stroke(255); 
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      let zx = map(x, 0, width, -2, 2) * zoom;
      let zy = map(y, 0, height, -2, 2) * zoom;
      let i = 0;
      while (i < 100) {
        let tmp = zx * zx - zy * zy + c.re;
        zy = 2.0 * zx * zy + c.im;
        zx = tmp;
        if (zx * zx + zy * zy > 4) break;
        i++;
      }
      if (i === 100) {
        point(x, y);
      }
    }
  }

  // Draw additional Julia sets
  drawAdditionalSets();
}

function mouseMoved() {
  c.re = map(mouseX, 0, width, -1.5, 1.5);
  c.im = map(mouseY, 0, height, -1.5, 1.5);
}

function mouseWheel(event) {
  zoom += event.delta * 0.001;
  zoom = constrain(zoom, 0.1, 10);
}

// Draw additional Julia sets
function drawAdditionalSets() {
  let sets = [
    { re: -0.7, im: 0.27015 },
    { re: 0.355, im: 0.355 },
    { re: -0.4, im: 0.6 },
    { re: 0.355, im: -0.355 },
    { re: -0.7, im: -0.27015 }
  ];

  for (let set of sets) {
    let zx, zy, i;
    for (let x = 0; x < width; x++) {
      for (let y = 0; y < height; y++) {
        zx = map(x, 0, width, -2, 2) * zoom;
        zy = map(y, 0, height, -2, 2) * zoom;
        i = 0;
        while (i < 100) {
          let tmp = zx * zx - zy * zy + set.re;
          zy = 2.0 * zx * zy + set.im;
          zx = tmp;
          if (zx * zx + zy * zy > 4) break;
          i++;
        }
        if (i === 100) {
          stroke(225); 
          point(x, y);
        }
      }
    }
  }
}

 

 

Key Components

• Julia Set Calculation: The core of the code lies in the logic that iterates over each pixel on the canvas, mapping pixel coordinates to a complex plane and then applying the iterative formula for the Julia set.
• Rendering Multiple Julia Sets: The drawAdditionalSets() function renders additional Julia sets with predefined complex constants. By iterating over multiple constants and reapplying the Julia set formula, this function draws additional sets on the same canvas, expanding the visual complexity of the sketch.

Sketch:

Pen Point Sketch:

Final Steps:

• Focus on refining the main code.
• Provide A3 prints.