ICM 4: FUNCTIONS & OBJECTS

After a year of messy coding in Python with avoiding pretty much any modular approach I was eager to train a more "functional" approach with p5. I started with a very basic shape.

Screen Shot 2017-10-04 at 3.40.54 AM.png

I moved on to integrate it a function into a for-loop.

Screen Shot 2017-10-04 at 7.44.39 AM.png

Then I tried to apply the modularity principles at my last sketch - and could not see a starting point.

let x;
let y;
let z = 1;
let t = 1;
let counter = 0;


function setup() { 
  createCanvas(400, 400);
  background(255)
} 

function draw() {
  counter ++;
  if (counter > random(100)){
    background(80, 130, 230, random(1))
    background(0,10);
  }
  noStroke();
  fill(255, 50)
  rect(width/2 - 7.5, 50, 15, 300);
  fill(mouseY / 0.7, 25)
  rect(width/2 - 7.5, 50, 15, 300);
  let y1 = map(mouseY, 0, height, 45, height-100);
  noFill();
  if (x == width/4 || y == height/4){
  console.log("yo");
  z = random(10);
  t = random(1);
  }
  if (x <= width && y > height/2){
    stroke(120, 180, 230, 30)
    fill( 255, 255/x+30/2)
    fill( 255, 220/ x*(y), 255/ x*(y), 6)
    triangle(x + 20, y*z, y, x*z, x/2, x);
    triangle(width -x*t, y/z, height, x*t, x/2*t,x/t);
    triangle(width - x, height - y*z, height - y, width - x*z, width - x/2, width - x);
    triangle(0 + x*t, height-y/z, 0, width - x*t, width - x/2*t,width - x/t);
    x+= 1*y1/100
  }
    else if (x <= width && y <= height){
      x += x*t;
      y += 100
    }
    else{
        background(255, 10);
      x = 10;
      y = 0;
    }
}

Which looks in the original like this:

I could technically split the draw function into "objects appearing" and "move, but in the sketch above they all are mixed together. Modularity doesn't not make a lot of sense here, at least I do not see it at this moment. So I decided to play a bit with linesand perspective. Unfortunately I couldn't finish the sketch.

Screen Shot 2017-10-04 at 9.04.16 AM.png