week9_collage

let canvasWidth = 600;

let canvasHeight = 600;

let canvasStartColor = '#F6CEA4';

//background color RGB

let canvasColorR;

let canvasColorG;

let canvasColorB;

//items color RGBA 

let randomR;

let randomB;

let randomG;

let randomA;

​

//list of my images i will use

let sources = [

  "gear_big_01.png",

  "gear_big_02.png",

  "bird_01.png",

  "bird_02.png",

  "bird_03.png",

  "bird_04.png",

  "bird_05.png",

  "clock_01.png",

  "clock_02.png",

  "clock_03.png",

  "clock_04.png",

  "gear_mid_01.png",

  "gear_mid_02.png",

  "gear_mid_03.png",

  "gear_mid_04.png",

  "hat_01.png",

  "hat_02.png",

  "hat_03.png",

  "aircraft_01.png",

  "aircraft_02.png",

  "aircraft_03.png",

  "goggles_01.png",

  "goggles_02.png",

  "goggles_03.png",

  "compass_01.png",

  "compass_02.png",

  "mask_01.png",

  "mask_02.png",

  "gear_small_01.png",

  "gear_small_02.png",

  "gear_small_03.png",

  "gear_small_04.png",

  "gear_small_05.png",

  "flower_01.png",

  "flower_02.png"

]

​

//array to load the images

let images = [];

​

//load the sources as images one by one

function preload() {

  for (let i = 0; i < sources.length; i++) {

    images[i] = loadImage(sources[i]);

  }

}

​

function setup() {

  createCanvas(canvasWidth, canvasHeight);

  background(canvasStartColor);

  angleMode(DEGREES);

  //create the image from the center of the image (x y will be the center..)

  imageMode(CENTER);

​

}

​

function draw() {

  noLoop();

  //cycle through the image list: put them around the canvas, rotate them, scale them and play with their opacity for each image 

  //-->(each image: push pop)

  for (let i = 0; i < sources.length; i++) {

      let x = canvasWidth / 2 + random(-(canvasWidth/4), (canvasWidth/4));

      let y = canvasHeight / 2 + random(-(canvasWidth/4), (canvasWidth/4));

      push();

      translate(x, y);

      rotate(random(120));

      //scale= resize the image

      scale(random(0.2, 0.8));

      //RGBA recoloring

      //get redish color, and maybe less opacity so it's shown they stack on top

      randomR = random(100, 255);

      randomG = random(50, 150);

      randomB = random(0, 50);

      randomA = random(150, 255);

      tint(randomR, randomG, randomB, randomA);

      image(images[i], 0, 0);

      pop();

  }

}

​

​

function keyPressed() {

  //press R to generate a new collage

  if (key == 'r') {

    //each time generated, create a redish color for the background too

    let canvasColorR = random(180, 255);

    let canvasColorG = random(120, 180);

    let canvasColorB = random(40, 90);

    background(canvasColorR, canvasColorG, canvasColorB);

    draw();

  } 

  //press S to save this image

  if (key == 's') {

    save("steampunk_collage.jpg");

  } 

​

} 

​