fractalkitty looking for math? fractalkitty.com

Coded Poems

generative zine

#random#trig#recursion#text#image#interactive#poem#fractal#random-walk

logotemplateLinespage1page2page3page4page5page6walkpage7drawTreefractalpage8

let logo;
let qr;
let canvas;
function preload() {
  logo = loadImage("/assets/logo120px.png");
}
function setup() {
  s = 1.5;
  r = 8.5 / 11;
  canvas = createCanvas(1100 * s, 850 * s);
  canvas.class("scaled-canvas");
  canvas.parent("sketch-container");
  background(255);
  textFont("palitino");
  textSize(30);
  noLoop();
}
function draw() {
  push();
  translate(width / 2, height / 2);
  templateLines();
  page1();
  page2();
  page3();
  page4();
  page5();
  page6();
  page7();
  page8();
  pop();
}

function templateLines() {
  stroke(0);
  line(-width / 2, 0, -width / 4, 0);
  line(width / 2, 0, width / 4, 0);
  stroke(190);
  line(-width / 4, 0, width / 4, 0);
  stroke(0);
  for (let i = -1; i < 2; i++) {
    line((i * width) / 4, -height / 2, (i * width) / 4, height / 2);
  }
}

function page1() {
  push();
  translate(-width / 4 + 30, 110);
  str1 = w1[int(random(0, w1.length))];
  str2 = " " + p1[int(random(0, p1.length))];
  text(str1 + str2, 0, 0);

  str3 = p2[int(random(0, p2.length))] + ", " + p1[int(random(0, p1.length))];
  l1 = str3.length;
  while (l1 > 28) {
    str3 = p2[int(random(0, p2.length))] + ", " + p1[int(random(0, p1.length))];
  }
  text(str3, 0, 40);
  str1 = w1[int(random(0, w1.length))];
  str2 = "– " + p1[int(random(0, p1.length))];
  text(str1 + str2, 0, 80);
  pop();
  push();
  noFill();
  n = int(random(2000, 4000));
  fill(0);
  noFill();
  noStroke();
  for (let i = 0; i < n; i++) {
    fill(0, 0, 0, 20);
    x = randomGaussian(-width / 4 + width / 8, width / 30);
    y = randomGaussian(height / 3.5, height / 20);
    if (
      x > -width / 4 + 10 &&
      x < 0 - 10 &&
      y > height / 5.5 &&
      y < height / 2 - 40
    ) {
      j5 = randomGaussian(5, 10);
      circle(x, y, j5);
      circle(-x - width / 4, y, j5);
    }
  }
  pop();
  push();
  textSize(36);
  text("randomness", -width / 4 + 80, 40);
  textSize(23);
  text("a generative zine by sophia wood", -width / 4 + 30, 70);
  pop();

  line(-width / 4, 80, 0, 80);
  text(str(n), -width / 4 + 50, height / 2 - 20 + 12);
}
function page2() {
  oldx = random(10, width / 4 - 10);
  oldy = random(10, height / 2);
  for (j = 0; j < 10; j++) {
    push();
    n = int(random(30000, 100000));
    stroke(0, 0, 0, 20);
    fill(0, 0, 0, 200);
    ran = [random(-3, -2), random(0.1, 2), random(-2, -0.1), random(-1, 0.1)];
    for (let i = 0; i < n; i++) {
      x =
        sin(ran[0] * oldx - oldy) -
        sin(ran[1] * oldx + ran[2]) * cos(ran[3] * oldy - ran[2]);
      y = sin(ran[2] * oldy - ran[0]) - cos(ran[3] * oldx) * sin(oldy * ran[0]);
      scalex = map(x, -2, 2, 10, width / 4 - 10);
      scaley = map(y, -2, 2, 40, height / 2 - 60);
      point(scalex, scaley);
      oldx = x;
      oldy = y;
    }
    pop();
  }
  push();
  text("strangely attracted", width / 16, 40);
  str2 = str(n * 10);
  text(str2, width / 16 + 50, height / 2 - 20 + 12);
  pop();
}
function page3() {
  push();
  text("finding shapes within", width / 4 + 20, 30);
  pop();
  push();
  translate(width / 4, 0);
  translate(width / 8, height / 4);
  noFill();
  strokeWeight(0.2);
  rad1 = random(width / 40, width / 12);
  rad2 = random(width / 15, width / 8);
  rad3 = random(width / 15, width / 8);

  rad4 = random(width / 20, width / 8);
  n3 = int(random(500, 1000));
  stroke(0);
  for (let i = 0; i < n3; i++) {
    a1 = random(0, 2 * PI);
    a2 = random(0, 2 * PI);
    line(rad1 * cos(a1), rad2 * sin(a1), rad3 * cos(a2), rad4 * sin(a2));
  }
  pop();
  text(str(n3), (width / 4) * 1.5 + 20, height / 2 - 20 + 12);
}
function page4() {
  push();
  fill(0);
  translate(width / 2.2 - 20, -20);
  rotate(PI);
  text("embrace your chaos", 0, 12);
  pop();
  push();
  translate((width / 4) * 1.5, -height / 4 - 10);
  n4 = int(random(200, 600));
  strokeWeight(0.5);
  noFill();
  for (let i = 0; i < n4; i++) {
    a1 = random(0, 2 * PI);
    a2 = random(0, 2 * PI);
    x2 = random(10, width / 4 - 10);
    y2 = random(10, height / 2 - 40);
    strokeWeight(random(0.2, 0.5));
    arc(0, 0, x2, y2, a2 + a1, a1 / a2);
  }
  pop();
  push();
  translate((width / 4) * 1.5 - 70, -height / 2 + 20);
  scale(-1, -1);
  text(str(n4), 0, 0);
  pop();
}
function page5() {
  push();
  translate(0, -height / 2);
  fill(255);
  rect(0, 0, width / 4, height / 2);
  n51 = int(random(1000, 3000));
  fill(0, 0, 0, 4);
  push();

  noStroke();
  for (let i = 0; i < n51; i++) {
    x = randomGaussian(width / 8, width / 20);
    y = randomGaussian(height / 4, height / 30);
    circle(x, y, random(4, 30));
  }
  pop();
  fill(0);
  noStroke();
  n5 = int(random(300, 500));
  for (let i = 0; i < n5; i++) {
    x = random(0, width / 4);
    y = random(0, height / 2);
    circle(x, y, random(2, 4));
  }
  pop();
  push();

  translate(width / 4 - 20, -15);
  rotate(PI);
  fill(255);
  rect(-20, -15, width / 4, 40);
  fill(0);
  text("in this existence", 40, 20);

  pop();
  push();

  translate(width / 4 - 10, -height / 2 + 20);
  scale(-1, -1);
  text(str(n5 + n51), 0, 0);

  pop();
}
function page6() {
  push();
  stroke(0);
  fill(0);
  translate(-100, -25);
  rotate(PI);
  text("to walk about", 0, 10);
  pop();
  push();
  translate(-width / 4, -height / 2);
  let walk = [];
  walk[0] = { x: 0, y: 0 };
  minx = width;
  maxx = 0;
  miny = width;
  maxy = 0;
  n6 = int(random(4000, 5000));
  x1 = 0;
  y1 = 0;

  for (let i = 0; i < n6; i++) {
    x1 += random(-0.5, 0.5);
    y1 += random(-0.5, 0.5);
    minx = min(x1, minx);
    maxx = max(x1, maxx);
    miny = min(y1, miny);
    maxy = max(y1, maxy);
    walk[i] = { x: x1, y: y1 };
  }
  x1 = walk[0].x;
  y1 = walk[0].y;
  h5 = int(random(10, 100));
  for (let i = 1; i < walk.length - 2; i++) {
    x = map(walk[i].x, minx, maxx, 20, width / 4 - 20);
    y = map(walk[i].y, miny, maxy, 40, height / 2 - 40);
    if (i > 1) {
      strokeWeight(random(0.2, 0.5));
      line(x1, y1, x, y);
      if (i % h5 === 0) {
        push();
        fill(0);
        circle(x, y, random(2, 9));
        pop();
      }
    }

    x1 = x;
    y1 = y;
  }
  pop();
  push();

  translate(-50, -height / 2 + 20);
  scale(-1, -1);
  text(str(n6), 0, 0);

  pop();
}
function page7() {
  n7 = random([3, 5, 6, 7, 8, 9, 10, 11, 12, 15, 19, 20, 21]);
  push();
  stroke(0);

  fill(0);
  translate(-width / 4 - 10, -5);
  rotate(PI);
  text("and find the beauty", 50, 25);
  pop();
  push();
  strokeWeight(0.5);
  translate((-width / 4) * 1.5, -height / 4);
  t = 0;
  angle = PI / 6;
  for (let i = 0; i < n7; i++) {
    push();
    rotate((i * TWO_PI) / n7);
    drawTree();
    pop();
    push();
    scale(0.5);
    rotate((i * TWO_PI) / n7);
    drawTree();
    pop();
  }

  function drawTree() {
    x = width / 4;
    val = 0.65;
    v2 = 5 * Math.sin(t / n);
    v3 = 9;
    fractal(width / 24, -1);
  }

  function fractal(len, refl) {
    tmp = len * refl;
    line(0, 0, 0, min(-20, tmp));
    translate(0, tmp);
    if (len > v3) {
      push();
      rotate(angle - angle * v2);
      fractal(len * val, refl);
      fill(0, 0, 0);
      circle(0, 0, random(1, 10));
      pop();
      push();
      rotate(-angle + angle * v2);
      fractal(len * val, refl);
      noStroke();
      fill(0);
      circle(0, 0, random(1, 10));

      pop();
    }
  }
  pop();
  push();

  translate(-width / 4 - 50, -height / 2 + 20);
  scale(-1, -1);
  text(str(n7), 0, 0);

  pop();
}
function page8() {
  push();
  translate(-width / 2 + 10, 40);
  str1 = w1[int(random(0, w1.length))];
  str2 = " " + p1[int(random(0, p1.length))];
  text(str1 + str2, 0, 0);

  str3 = p2[int(random(0, p2.length))] + ", " + p1[int(random(0, p1.length))];
  l1 = str3.length;
  while (l1 > 28) {
    str3 = p2[int(random(0, p2.length))] + ", " + p1[int(random(0, p1.length))];
  }
  text(str3, 0, 40);
  str1 = w1[int(random(0, w1.length))];
  str2 = "– " + p1[int(random(0, p1.length))];
  text(str1 + str2, 0, 80);
  pop();
  line(-width / 2, height / 2 - 80, -width / 4, height / 2 - 80);
  textSize(20);
  text("made with p5.js", -width / 2 + 20, height / 2 - 50);
  textSize(30);
  text("fractalkitty.com", -width / 2 + 100, height / 2 - 10);
  image(logo, -width / 4 - 100, height / 2 - 60, 50, 50);
  push();
  translate((-width / 4) * 1.5, height / 4);
  n8 = random(9, 20);
  r8 = [random([3, 4, 5, 6]), random(0, PI), random(2, 5)];
  noFill();
  strokeWeight(0.5);
  for (let i = 0; i < n8; i++) {
    push();
    rotate(r8[1] + (i * TWO_PI) / n8);
    circle((r8[2] * width) / 62, 0, random(50, 100));
    circle((r8[2] * width) / 62, 0, random(50, 100));
    circle((r8[2] * width) / 62, 0, random(50, 100));
    circle((r8[2] * width) / 62, 0, random(2, 30));
    line((r8[2] * width) / 62, 0, (-r8[2] * width) / 62, 0);
    pop();
  }
  pop();
}

w1 = [
  "here",
  "oh –",
  "so",
  "if",
  "when",
  "how",
  "where",
  "why",
  "who",
  "which",
  "this",
  "that",
  "then",
  "thus",
  "though",
  "yet",
  "still",
  "but",
  "so",
  "once",
  "while",
  "just",
  "now",
  "since",
  "with",
  "from",
  "by",
  "in",
  "on",
  "to",
  "up –",
  "down –",
  "for",
  "out",
  "near",
  "through",
  "till",
  "past",
  "next",
  "first",
  "last",
  "one",
  "too",
  "more",
  "less",
  "much",
  "each",
  "some"
];

p1 = [
  "you are random",
  "dancing with trees",
  "listen to noise",
  "randomly here",
  "you are chaos",
  "chance or design",
  "you are guided",
  "you are ordered",
  "you chose one",
  "ancient is time",
  "is this as is",
  "is beautiful",
  "variables",
  "randomness is",
  "organic growth",
  "parametric",
  "gentle chaos"
];

p2 = [
  "curves are we",
  "randomness",
  "artistry",
  "what you are",
  "radiance",
  "blossoming",
  "creative",
  "but designed",
  "here and now",
  "linear",
  "weighted time",
  "attractor",
  "uniquely",
  "a number",
  "distribute",
  "we're clustered",
  "together",
  "in this time",
  "like small stars",
  "ancient light"
];

function keyPressed() {
  if (keyCode === 83) {
    save(canvas, "gen_zine", "png");
  }
  if (keyCode === 32) {
    background(255);
    draw();
  }
}