Bush School IDMD Spring Semester 2021

Week of March 29th & April 5th

Reminder - Assignments Due Calendar

Type	Format	Details	Due
Project	Assignment	Complete one of two projects Data Viz or Creative Animation	3/15/2021 OVERDUE!
Exercise	Assignment	Complete Week 8 Exercises	4/1/2021 OVERDUE!
Exercise	Assignment	Complete Week 9 Exercises	4/5/2021 DUE TODAY
Project	Assignment	Complete Perlin Noise Effects Project integrating Week 8 & Week 9 techniques	4/8/2021 DUE THIS WEEK

Learning Objectives

• Sliders to control a sketch
• Add text outside the canvas
• Create Perlin Noise Movement
• Apply 2D Perlin Noise Grids & Flow Fields
• 3rd Diemsion of Perlin Noise - Time!
• OPTIONAL: Particles in a Perlin Noise Flow Field
• Perlin Noise Blobs

Lessons

Perlin Noise Movement with Sliders

• Develop a sketch Perlin Noise movement with a slider!
• Add Sliders & Buttons, then Submit this to Github as an exercise. For button look up “createButton”

let x, y, clr
let xoff1 = 300;
let xoff2 = 500;

function setup() {
  createCanvas(400, 400);
  clr = color('magenta');
}

function draw() {
  background(220);
  fill(clr);
  x = // random location for x using perlin noise
  y = // random location for y using perlin noise
  ellipse(x, y, 25, 25);
  xoff1 += 0.01;
  xoff2 += 0.01;
}

Perlin Noise Grids & Flow Fields

• Create a 2D noise grid
• Create 2D perlin noise with time in 3D
• Create Flow Field using Perlin Noise
• Instead of a line inside the grid, draw a narrow triangle pointing in the direction of flow!
• Add Sliders & Buttons, then Submit this to Github as an exercise. For button look up “createButton”
• OPTIONAL: Particles following a flow field while moving
• See Slack for code extract

let res = 20;
let rows, cols;
let xoff, yoff;
let inc = .1;

function setup() {
  createCanvas(400, 400);
  rows = height/res;
  cols = width/res;
}

function draw() {
  background(220);
  yoff = 100;
  for(let i=0; i<rows; i++) {
    xoff = 300;
    for(let j=0; j<cols; j++) {
//  WRITE CODE BELOW HERE
    }
  }
}

• Change the inc varable in sketch above using a slider
• Display a variable in sketch below outside the canvas

Perlin Noise Blobs

• An example of 2D Perlin noise circular blob
• We will animate this further in class
• Add Sliders & Buttons, then Submit this to Github as an exercise. For button look up “createButton”

let xoff = 0;

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

function draw() {
  background(0);
  translate(width/2, height/2);
  stroke(255);
  noFill();
  beginShape();
  for (let a = 0; a < TWO_PI; a+=0.1) {
    let r = random(150, 200);
    //let r = map(noise(xoff), 0, 1, 150, 200);
    let x = r * cos(a);
    let y = r * sin(a);
    vertex(x,y);
    xoff += 0.1;
  }
  endShape();
  noLoop();
}

Homework

1. Add Sliders & Buttons. Then submit exercises completed in the last 2 weeks to Github
2. Complete Perlin Noise effects project by combining techniques from the last 2 weeks

Zoom Session Recording

Zoom session recording March 29th Use Passcode: t3iDY6$X