Genuary Day 1: "Retro"

genuary-day-1-retro.markdown

Genuary Day 1: "Retro"

This is my pen for Genuary Day 1 (I got started a little late this year)

The theme for today is "Vertical or horizontal lines only" which I interpreted to mean as those are the only geometric primitives you can draw. under the hood I'm "rasterizing" squares circles and triangles by only drawing a line every so often across the shape.

I'm also cheating slightly (a lot) by then performing a fade effect with the background as well as resampling the canvas a number of times to produce the fractal effect.

Click to regenerate the shapes and sample regions.

A Pen by Ben Matthews on CodePen.

License.

script.js

//https://genuary.art/prompts#jan1

let hueOffset = Math.random();
let hueShift = 0;
let root3 = Math.sqrt(3);

let shapeTypes = ["rect", "circ", "tri"];

let createShape = () => ({
  x        : random(width),
  y        : random(height),
  r        : random(50, 200),
  dx       : random(-1,1),
  dy       : random(-1,1),
  type     : random(shapeTypes),
  vertical : random() < .5,
  spacing  : random(5, 25),
  col      : [(random(.4, .8)+hueOffset)%1, random(.2, .8), random(.8, 1)],
});

let createSampleRect = () => {
  let [w, h] = [random(100, 400), random(100, 400)];
  return [
    random(width)-100, random(height)-100, w, h,
    random(width)-100, random(height)-100, w, h,
    random(-1, 1),
    random(-1, 1),
  ];
}

let drawRect = s => {
  pushPop(() => {
    translate(s.x, s.y);
    if (s.vertical) rotate(-PI/2);
    translate(-s.r, -s.r);
    stroke((s.col[0]+hueShift)%1, s.col[1], s.col[2]);
    for (let i = 0; i < s.r*2; i += s.spacing){
      line(-s.r, i, s.r, i);
    }
  });
}

let drawCirc = s => {
  pushPop(() => {
    translate(s.x, s.y);
    if (s.vertical) rotate(-PI/2);
    translate(0, -s.r);
    stroke((s.col[0]+hueShift)%1, s.col[1], s.col[2]);
    for (let i = 0; i < s.r*2; i += s.spacing){
      let amt = i/s.r - 1;
      let w = sqrt(1-amt*amt)*s.r;
      line(-w, i, w, i);
    }
  });
}

let drawTri = s => {
  pushPop(() => {
    translate(s.x, s.y);
    if (s.vertical) rotate(-PI/2);
    translate(0, -s.r);
    stroke((s.col[0]+hueShift)%1, s.col[1], s.col[2]);
    for (let i = 0; i < s.r*2; i += s.spacing){
      let amt = i/s.r - 1;
      let w = i/root3;
      line(-w, i, w, i);
    }
  });
}

let init = () => {
  shapes  = [];
  samples = [];
  let numShapes  = random(20, 40);
  let numSamples = random(10, 30);
  for (let i = 0; i < numShapes ; i++) shapes.push(createShape());
  for (let i = 0; i < numSamples; i++) samples.push(createSampleRect());
}

let shapes = [];
let samples = [];
let c;
function setup (){
  c = createCanvas(1, 1);
  colorMode(HSB, 1, 1, 1);
  windowResized();
  init();
}

function draw(){
  background(0, .02);
  hueShift += .001;
  
  for (let s of shapes){
    s.x += s.dx;
    s.y += s.dy;
    if (s.x < 0){s.x = 0; s.dx *= -1;}
    if (s.y < 0){s.y = 0; s.dy *= -1;}
    if (s.x > width ){s.x = width ; s.dx *= -1;}
    if (s.y > height){s.y = height; s.dy *= -1;}
    if (s.type === "rect") drawRect(s);
    if (s.type === "circ") drawCirc(s);
    if (s.type === "tri")  drawTri(s);
  }
  
  noFill();
  stroke(1);
  for (let s of samples){
    let [x, y, dx, dy] = [s[0], s[1], s[8], s[9]];
    x += dx;
    y += dy;
    if (x < -200){x = -200; dx *= -1;}
    if (y < -200){y = -200; dy *= -1;}
    if (x > width ){x = width ; dx *= -1;}
    if (y > height){y = height; dy *= -1;}
    s[0] = x;
    s[1] = y;
    s[8] = dx;
    s[9] = dy;
    
    image(c, ...s);
    rect(...s.slice(0, 4));
  }
}

function windowResized(){
  resizeCanvas(windowWidth, windowHeight);
}

onpointerdown = init;

let pushPop = f => {push();f();pop();}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.2/p5.min.js"></script>

style.css

* { margin:0; padding:0; } 
html, body { width:100%; height:100%; overflow: hidden; background:black;} 
canvas { display:block; }