Review Session November 29

Code2reviewSessionGenerativeArtNov29.mp4

1. Review of grabbing colors from Images

let img;

// Be sure to import an image to the P5 Editor.
// In my case, I named it farmtruck.png
function preload() {
  img = loadImage('farmtruck.png');
}

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

function draw() {
  background(220);
  
  let side=25;
  for (let i=0; i<width; i+=side) {
    for (let j=0; j<height; j+=side) {
      let color = img.get(random(img.width),random(img.height));
      fill(color);
      noStroke();
      rect(i,j,side);
    }
  }
}

Source Code on P5 Editor

More Info on David Stein’s Blog

2. Random, Trigonometry and Noise to make your Generative Art look Natural

let r=random(1);
let y=map(r,0,1,400,0);
ellipse(x,y,5);

let r=sin(x);
let y=map(r,-1,1,0,400);
ellipse(x,y,5);

The noise function returns a number between 0 and 1 from the perlin noise space. You can pass 1,2 or 3 parameters to the noise function (x, y and z). It works best if the numbers you are passing to noise are much less than zero.

for (let i=0; i<400; i+=5) {
    for (let j=0; j<400; j+=5) {
      let r=noise(i/50,j/50); // change 50 to a higher number to zoom in
      r=map(r,0,1,0,200);
      fill(r);
      noStroke();
      rect(i,j,5);
    }
  }

Example:

https://editor.p5js.org/des8963/sketches/jNfAFBmUN