​

​

// declare variables

let x, y, r, g, b; // you can declare multiple variables on the same line if you put a comma

​

var hippie = [smile, flower, peace]; // this is an array of images

​

function setup() {

  createCanvas(400, 400); // you could also do (windowWidth, windowHeight) and itll change the size of the canvas according to how you stretch it out, useful for fullscreen option

  background(0); // if in function setup, keeps it in the back, unchanged, if in function draw, reapplies in every frame

​

}

​

// random(hippie)

​

function preload() {

  smile = loadImage("smile.png");

  flower = loadImage("flower.png");

  peace = loadImage ("peace.png");

}

​

function draw() {

  // determining variables

  r = random(0,255) // chooses random value between 0-255

  g = random(0,255) 

  b = random(0,255)

  x = random(0,400) // you could also plot width or height here if you change the size of the canvas // x = random(width)

  y = random(0,400)

   noStroke()

  fill (r, 0, b, 200) // colors, if you add 4th value (alpha), it will affect the transparency (rgb is from 0-255 but even if the input is above 255 the concentration will stay the same)

  circle (x, y, 25) // random coordinate between 0 and 400 for both x and y, 24 is just size of circle 

​

  image(random(hippie), x, y, 25, 25)

  // replace with hippy clipart???? 

​

}

​

​