let inc = 0;

let r = 0;

let pic = 0;

//let colorr = ['DBD2CC', 'CED4D5', 'E8E8E8', 'C3C3C3', 'e4d2d3', '2E3251'];

​

function preload() {

  img = loadImage('Vis1_final_method-02.png');

  img1 = loadImage('Vis1_final_method-07.png');

  img2 = loadImage('Vis1_final_method-08.png');

  img3 = loadImage('Vis1_final_method-09.png');

  img4 = loadImage('Vis1_final_method-10.png');

  img5 = loadImage('Vis1_final_method-11.png');

  fontA = loadFont('Metropolis-Bold.otf');

}

​

function setup() {

  createCanvas(550, 700);

}

​

function draw() {

  background(180);

  noStroke();

​

  //settings

  inc = inc + random(0.08);

  let value = cos(inc);

  let r = map(value, -1, 1, 0, 255);

  let q = map(value, -1, 1, 100, 220);

​

​

  //gradient bgr

  push();

  let c1 = color(r, 212, 213, 10);

  let c2 = color(228, 210, 211);

  for (let a = 0; a < height; a++) {

    n = map(a, 0, height, 0, r / 20);

    let newc = lerpColor(c1, c2, n);

    stroke(newc);

    line(0, a, width, a);

  }

  pop();

​

  //tagline1

  type('SAY NO TO', q, fontA, 90, 20, 104);

  type('PLASTIC', 255 - q, fontA, 90, 20, 200);

  fill(r, 0, 0, r);

  rect(20, 170, 380, 4);

​

  //tagline2

  type('SAVE', c2, fontA, 100, 20, 364);

  type('OUR', c2, fontA, 100, 20, 462);

  type('OCEAN', c2, fontA, 100, 20, 560);

​

  //logo

  push();

  translate(10, 590);

  image(img, 0, 0);

  img.resize(120, 120);

  pop();

​

  //product

  push();

  translate(width / 2 - 80, height / 2);

  if (pic === 1) {

    product(img1, 8);

  } else if (pic === 2) {

    product(img2, 8);

  } else if (pic === 3) {

    product(img3, 8);

  } else if (pic === 4) {

    product(img4, 8);

  } else if (pic === 5) {

    product(img5, 8);

  }

  pop();

}

​

function product(xx, yy) {

  image(xx, 0, 0);

  xx.resize(20 * yy, 30 * yy);

}

​

function type(content, color, font, size, x, y) {

  fill(color);

  textFont(font);

  textSize(size);

  text(content, x, y);

}

​

function keyPressed() {

  if (keyCode === 49) {

    pic = 1;

  } else if (keyCode === 50) {

    pic = 2;

  } else if (keyCode === 51) {

    pic = 3;

  } else if (keyCode === 52) {

    pic = 4;

  } else if (keyCode === 53) {

    pic = 5;

  } else if (keyCode === 32) {

    pic = 6;

  }

}