let light = true;

​

function preload() {

img = loadImage('Assets/Background.png'); 

  img1 = loadImage('Assets/MoonREDO5.png'); 

    img2 = loadImage('Assets/MeetingINFO2.png');

  CIRCLE = loadImage('Assets/CIRCLE.png');

  Anomia1 = loadImage('Assets/AnomiaDARK.png'); 

    Anomia2 = loadImage('Assets/AnomiaLIGHT.png');

   Mahjong1 = loadImage('Assets/MahjongDARK.png');

     Mahjong2 = loadImage('Assets/MahjongLIGHT.png');

  Hedbanz1 = loadImage('Assets/HedbanzDARK.png');

    Hedbanz2 = loadImage('Assets/HedbanzLIGHT.PNG');

  Monikers1 = loadImage('Assets/MonikersDARK.png');

    Monikers2 = loadImage('Assets/MonikersLIGHT.PNG');

  PassthePaper1 = loadImage('Assets/PassthepaperDARK.png');

    PassthePaper2 = loadImage('Assets/PassthePaperLIGHT.PNG');

  Big21 = loadImage('Assets/Big2DARK.png');

    Big22 = loadImage('Assets/Big2LIGHT.PNG');

  SpicyUno1 = loadImage('Assets/SpicyUnoDARK.png');

    SpicyUno2 = loadImage('Assets/SpicyUnoLIGHT.PNG');

  Chess1 = loadImage('Assets/ChessDARK.png');

    Chess2 = loadImage('Assets/ChessLIGHT.PNG');

}

​

function setup() {

  createCanvas(1536, 2048);

​

  img.loadPixels();

  img.updatePixels();

  console.log(pixels);

}

​

function draw() {

  image(img, 0, 0);

  img.resize(0, 2050);

  background(60,16,131);

  frameRate(25); 

​

let rectsize = floor(map(mouseX, 0, width, 50, 20));

​

  let gridSize=1

  for(y = 0;y<height; y+=gridSize){

    for(x=0; x<width;x+=gridSize){

    let index=(x+y*width)*4;

    let r=img.pixels[index +0];

    let g=img.pixels[index +1]; 

    let b=img.pixels[index +2];

      let distance = dist(x, y, mouseX, mouseY);

      let rectW=map(distance, 0, 400, 40, 0); 

      noStroke();

    fill(r, g, b)

    rect(x, y, rectW, rectW); 

    x = x + rectsize -1; 

  }

  y = y + rectsize -20; 

  }

   if(light==true){  

    image(CIRCLE, -10, 50);  

     image(img1, -10, 50);

     }else{

    image(CIRCLE, -10, 50);  

    image(img2, -10, 50);

   }  

  if ((mouseX > 50) && (mouseX < 590) &&

    (mouseY > 40) && (mouseY < 800)) {

    image(CIRCLE, -10, 50);   

    image(Anomia1, 0, -10);

    Anomia1.resize(0,height);

  } else {

    image(Anomia2, 0, -10);

    Anomia2.resize(0,height);

  }

​

    if ((mouseX > 590) && (mouseX < 920) &&

    (mouseY > 20) && (mouseY < 390)) {

      image(CIRCLE, -10, 50);  

      image(Mahjong1, -10, 0);

    Mahjong1.resize(0,height);

  } else {

   image(Mahjong2, -10, 0);

  Mahjong2.resize(0,height);

  }

 if ((mouseX > 920) && (mouseX < 1500) &&

   (mouseY > 40) && (mouseY < 700)) {

   image(CIRCLE, -10, 50);  

   image(Hedbanz1, 0, 0);

   Hedbanz1.resize(0,height);

 } else {

   image(Hedbanz2, 0, 0);

  Hedbanz2.resize(0,height)

 }

  if ((mouseX > 1050) && (mouseX < 1500) && // left & right

    (mouseY > 830) && (mouseY < 1400)) { // up & down

    image(CIRCLE, -10, 50);   

    image(Monikers1, 0, 0);

    Monikers1.resize(0,height);

  } else {

   image(Monikers2, 0, 0);

  Monikers2.resize(0,height);

  }

  if ((mouseX > 1050) && (mouseX < 1450) &&

    (mouseY > 1450) && (mouseY < 1970)) {

    image(CIRCLE, -10, 50);  

    image(PassthePaper1, 0, 0);

    PassthePaper1.resize(0,height);

  } else {

   image(PassthePaper2, 0, 0);

  PassthePaper2.resize(0,height);

  }

  if ((mouseX > 580) && (mouseX < 1050) &&

    (mouseY > 1400) && (mouseY < 1970)) {

    image(CIRCLE, -10, 50);  

    image(Big21, 0, 0);

    Big21.resize(0,height);

  } else {

   image(Big22, 0, 0);

  Big22.resize(0,height);

  }

   if ((mouseX > 50) && (mouseX < 590) &&

    (mouseY > 1300) && (mouseY < 1970)) {

     image(CIRCLE, -10, 50);  

     image(SpicyUno1, 0, 0);

    SpicyUno1.resize(0,height);

  } else {

   image(SpicyUno2, 0, 0);

  SpicyUno2.resize(0,height);

  }

   if ((mouseX > 70) && (mouseX < 450) &&

    (mouseY > 820) && (mouseY < 1300)) {

     image(CIRCLE, -10, 50);  

     image(Chess1, 0, 0);

    Chess1.resize(0,height);

  } else {

   image(Chess2, 0, 0);

  Chess2.resize(0,height);

  }

} 

​

 function mouseClicked(){

     if ((mouseX > 450) && (mouseX < 1030) &&

    (mouseY > 500) && (mouseY < 1330)) {

  if(light==false){

    light=true;

  }else{

    light=false;

  }

     }    

}