kadenze-notes.js

///////////////////////////////////////////////////////
//// 02_variables_loops

// 1. Map out grid, logic of laying bricks on whiteboard.

// 2. Create variables.
var brickWidth = 40;
var brickHeight = 15;
var columnOffset = 60;
var rowOffset = 30;
var cols;
var rows;

function setup() {
  createCanvas(windowWidth, windowHeight);
  cols = floor(width / columnOffset);
  rows = floor(height / rowOffset);
  background(0);
  fill(255);
  noLoop();
}

// 3. Draw a brick in every spot.
function draw() {
  translate(30, 30);
  for (var i=0; i<cols; i++) {
    push();
    translate(i * columnOffset, 0);
    for (var j=0; j<rows; j++) {
      push();
      translate(0, rowOffset * j);
      rect(-brickWidth/2, -brickHeight/2, brickWidth, brickHeight);
      pop();
    }
    pop();
  }
}

// 4. Add random rotation to column.
var r = random(-QUARTER_PI, QUARTER_PI); // first loop
rotate(r); // after translate second loop

// 5. Increment rotation down rows.
var rotationIncrement = 0.15; // top
var dir = 1; // in first loop
r += dir * rotationIncrement; // in second loop

// 6. Check for reverse.
if (r > QUARTER_PI || r < -QUARTER_PI) dir *= -1; // end of second loop


///////////////////////////////////////////////////////
//// 03_flow_response


// 1. Iterate over grid, draw a line.
for (var x = 50; x <= width-50; x += 50) {
  for (var y = 50; y <= height-50; y+= 50) {
    line(x-5, y-5, x+5, y+5);
  }
}

// 2. Option 1 - Add second line to make cross.
line(x+5, y-5, x-5, y+5);

// 3. Try different values than 50.

// 4. Add density variable based on mouse map.
var density = map(mouseX, 0, width, 20, 50);

// 5. Option 2 - Swap lines for perspective.
line(x, y, width/2, height/2);

// 6. Add mousePressed and option var to toggle.

// 7. Option 3 - Swap lines for overlapping circles.
ellipse(x, y, 40, 40);

// 8. Option 4 - Rotating arcs.
var count = 120;
// inside the loop
var s = map(count, 120, 0, 0, TWO_PI*2);
arc(x, y, 14, 14, s, s + PI);
count--;

// 9. Option 5 - Groups of 5.
for (var i = 0; i < 16; i+=4) {
  line(x + i, y, x + i, y + 12);
}
line(x, y, x + 12, y + 12);


///////////////////////////////////////////////////////
//// 04_media

/*
1. Load image.
2. Draw thumbnail using constrain and line.
3. Load pixels.
4. Figure out x position in image to sample, using map.
5. Draw slice, using for loop get and set.
6. Loop back around eventually.
7. Try out different images!
*/

///////////////////////////////////////////////////////
//// 06_motion

// 1. Setup the canvas
function setup() {
  createCanvas(windowWidth, windowHeight);
  fill(0);
  strokeWeight(20);
}

function draw() {
  
}

// 2. Setup vars and make rotating rect
var angle = 0.0;
var speed = 0.05;

// inside draw
  background(255);

  translate(width/2, height/2);
  rotate(angle);
  line(0, 0, 0, 100);
  
  
  angle += speed;

// 3. Add second piece
  translate(0, 100); //same amt
  rotate(angle);
  line(0, 0, 0, 75);
  
// 4. Add third piece
  translate(0, 75);
  rotate(angle);
  line(0, 0, 0, 50);
  
// 5. Add mouse
  var l0 = map(mouseX, 0, width, 10, 300);
  var l1 = map(mouseY, 0, height, 10, 300);

// 6. Build it up again with orbiting ellipses

  //line(0, 0, 0, l0);
  for (var i=0; i<5; i++) {
    push();
    rotate(i*TWO_PI/5);
    translate(0, l0);
    ellipse(0, 0, 20, 20);

  
// 7. Add second tier
    rotate(angle);
    for (var j=0; j<5; j++) {
      push();
      rotate(j*TWO_PI/5);
      translate(0, l1);
      ellipse(0, 0, 20, 20);
      
// 8. Add third tier.



///////////////////////////////////////////////////////
//// 08_objects

// 1. Start with functions.
var scaler = 100;
var m = 2;
var n1 = 18;
var n2 = 1;
var n3 = 1;

function setup() {
  createCanvas(windowWidth, windowHeight);
  noFill();
  stroke(255, 120);
  noLoop();
}

function draw() {
  background(0);
  drawShape(width/2, height/2);
}

function drawShape(x, y) { 
  push();
  translate(x, y);

  var newscaler = scaler;
  var n = floor(random(3, 32));
  for (var s = n; s > 0; s--) {  
    beginShape();
  
    var mm = m + s;
    var nn1 = n1 + s;
    var nn2 = n2 + s;
    var nn3 = n3 + s;
    newscaler = newscaler * 0.98;
    var sscaler = newscaler;

    var points = superformula(mm, nn1, nn2, nn3);
    curveVertex(points[points.length-1].x * sscaler, points[points.length-1].y * sscaler);
    for (var i = 0;i < points.length; i++) {
      curveVertex(points[i].x * sscaler, points[i].y * sscaler);
    }
    curveVertex(points[0].x * sscaler, points[0].y * sscaler);
    endShape();
  }
  pop();
}

function superformula(m, n1, n2, n3) {
  var numPoints = 360;
  var phi = TWO_PI / numPoints;
  var points = []
  for (var i = 0;i <= numPoints;i++) {
    points[i] = superformulaPoint(m,n1,n2,n3,phi * i);
  }
  return points;
}

function superformulaPoint(m, n1, n2, n3, phi) {
  var r;
  var t1,t2;
  var a=1,b=1;
  var x = 0;
  var y = 0;

  t1 = cos(m * phi / 4) / a;
  t1 = abs(t1);
  t1 = pow(t1,n2);

  t2 = sin(m * phi / 4) / b;
  t2 = abs(t2);
  t2 = pow(t2,n3);

  r = pow(t1+t2,1/n1);
  if (abs(r) == 0) {
    x = 0;
    y = 0;
  }  
  else {
    r = 1 / r;
    x = r * cos(phi);
    y = r * sin(phi);
  }

  return new p5.Vector(x, y);
}

// 2. Create simple create, with x and y. Draw ellipse.

// 3. Plug in draw shape.

// 4. Randomize m, n1, n2, n3;

// 5. Add breathing.
  this.hr = random(0.1, 0.2);
  // in display
  stroke(255, 127+127*sin(frameCount*this.hr));

// 6. Add detect
  this.sw = 1;
  
  strokeWeight(this.sw);
  
  this.detect = function() {
    if (dist(this.x, this.y, mouseX, mouseY) < scaler) {
      this.sw = 2;
    } else {
      this.sw = 1;
    }
  };