// https://medium.com/processing-foundation/a-p5-js-web-editor-for-all-64aaa3f9d767

​

let cassie

let picture

var mode = 0

​

// let capture

​

function preload () {

  cassie = loadImage ('cassie.jpg')

  picture = loadImage('picture.jpg')

}

​

function setup() {

  createCanvas (400, 400)

  rectMode (CENTER)

  noStroke ()

​

  // capture = createCapture (VIDEO)

  // capture.hide ()

}

​

function draw() {

    if (keyIsPressed) {

    if (key == "1"){

      mode = 1

    }

    else if (key == "2"){

      mode = 2

    }

  }

  if (mode == 1){

  cassie.resize (width, height)

    background(cassie)

  }

  else if (mode == 2){

  picture.resize(width, height)

    background(picture)

  }

//   background (220)

//   image (cassie, 0, 0)

//   image (cassie, 0, 0, width, height)

//   image (cassie, 0, 0, frameCount * 5 % width, frameCount * 12 % height)

  const pos = rand_pos ()

  if (mode == 1){

    const col = cassie.get (pos.x, pos.y)

    fill(col)

  }

  else if (mode == 2){

    const col2 = picture.get (pos.x, pos.y)

    fill(col2)

  }

  square (pos.x, pos.y, random (1, 50))    

​

  let max = sin (frameCount / 40)

  max += 1

  max *= 20

  max += 5

​

  for (let i = 0; i < 256; i++) {

    const pos = rand_pos () // random canvas position

      if (mode == 1){

    const col = cassie.get (pos.x, pos.y)

    fill(col)

  }

  else if (mode == 2){

    const col2 = picture.get (pos.x, pos.y)

    fill(col2)

  }

    // square (pos.x, pos.y, random (1, 30))    

    square (pos.x, pos.y, random (1, max))    

  }

​

//   for (let i = 0; i < 4; i++) {

//     const pos = rand_pos ()

//     const col = capture.get (pos.x, pos.y)

//     fill (col)

//     square (pos.x, pos.y, 20)    

//     square (pos.x, pos.y, random (1, max))    

//   }

​

}

function rand_pos () {

  const x = random (width)

  const y = random (height)

  return createVector (x, y)

}