let img2;

let img3;

let img4;

let img5;

let img6;

let img7;

let fontN;

let fontN2;

let fontN3;

let fontC;

var button1; 

let colorpicker2;

let img1;

let artNouveau ;

let mySelect;

let slider1;

let selectValue;

let OldmySelectValue;

​

function preload() {

  fontN = loadFont("./AmbrosiaCap.ttf");

  fontN2 = loadFont("Campanile.ttf");

  fontN3 = loadFont("BB.ttf");

  fontC = loadFont("Dk.otf");

  img1 = loadImage("https://i.postimg.cc/vZsLXM5N/Adobe-Stock-51493238.jpg");

  img2 = loadImage("https://i.postimg.cc/6qyG5M02/moma-1.png");

  img3 = loadImage("https://i.postimg.cc/bYD0QRkY/moma-2-02.png");

  img4 = loadImage("https://i.postimg.cc/GpgYDBps/moma-2-03.png");

  img5 = loadImage(

    "https://i.postimg.cc/brptc1CW/Screenshot-2024-03-04-at-7-23-39-PM.png"

  );

  img6 = loadImage("https://i.postimg.cc/Y96b24fv/art-n-img-3.png");

  img7 = loadImage("https://i.postimg.cc/nLSGH6WQ/art-n-img7.png");

}

​

function setup() {

  createCanvas(500, 700);

  background(220);

  textSize(250);

  //------buttons-------

  button1 = createButton("Save");

  button1.position(10, 650);

  button1.mousePressed(function () {

    saveCanvas("MOMA LOGO");

  });

  //------sliderz--------

  slider1 = createSlider(1, 3);

  slider1.size(100);

  slider1.position(width - 110, 0);

  //font top

  slider2 = createSlider(1, 3);

  slider2.size(100);

  slider2.position(width - 110, 35);

  //yippee

  //COLOR PICKER

  colorpicker2 = createColorPicker("orange");

  colorpicker2.position(10, 50);

  //DROPDOWN

  mySelect = createSelect();

  mySelect.position(10, 10);

  mySelect.option("artNouveau");

  mySelect.option("DADA");

  mySelect.option("Cubism");

  mySelect.selected("artNouveau");

//  mySelect.selected("Cubism");

 // mySelect.selected("DADA");

​

  selectValue = mySelect.value();

  OldmySelectValue = mySelect.value();

}

​

function draw() {

  if (selectValue != OldmySelectValue) {

    clearCanvas();

    OldmySelectValue = mySelect.value();

  }

​

  fill(colorpicker2.value());

​

  if (mySelect.value() === "artNouveau") {

    selectValue = mySelect.value();

​

    img1.resize(500, 700);

    image(img1, 0, 0);

​

    textFont(fontN);

    if (slider1.value() === 1) {

      textFont(fontN);

      textSize(250)

    }

    if (slider1.value() === 2) {

      textFont(fontN2);

      textSize(250)

    }

    if (slider1.value() === 3) {

      textFont(fontN3);

      textSize(170)

    }

    if (slider2.value() === 1) {

      img6.resize(520, 720);

      image(img6, -10, -10);

    }

    if (slider2.value() === 3) {

      img7.resize(520, 720);

      image(img7, -10, -10);

    }

    text("MO", 120, 350);

    text("MA", 120, 580);

  } else if (mySelect.value() === "DADA") {

    selectValue = mySelect.value();

    //bg

    image(img5, 0, 0);

    if (slider1.value() === 1) {

      img2.resize(500, 700);

      image(img2, 0, 0);

    } else if (slider1.value() === 2) {

      img3.resize(500, 700);

      image(img3, 0, 0);

    } else if (slider1.value() === 3) {

      img4.resize(500, 700);

      image(img4, 0, 0);

​

    }

  } else if (mySelect.value() === "Cubism") {

    selectValue = mySelect.value();

textSize(250)

    text("MO", 110, 350);

    text("MA", 110, 580);

​

    textFont(fontC);

  }

}

​

function mousePressed() {

  push();

  if (mySelect.value() === "Cubism") {

    let rectColor = ["yellow", "blue", "red"];

    //rectMode(CENTER);

    fill(random(rectColor));

    strokeWeight(10);

    rect(mouseX, mouseY, random(40, 200), random(50, 300));

  }

  pop();

}

​

function clearCanvas() {

  background(255);

​

  //text("MO", 60, 350);

  // text("MA", 60, 550);

}

​