project

let imgSrc;

let imgSrc1;

let imgSrc2;

let imgSrc3;

​

let index = -1;

​

function setup() {

  createCanvas(600, 700);

  background(120);

​

  // HELP button

  button1 = createButton("HELP");

  button1.position(530, 490);

  button1.size(100, 100);

  button1.style("background", "#930AB1");

  button1.style("color", "#ffff");

  button1.style("font-size", "20px");

  button1.style("border", "none");

  button1.mouseClicked(button1Clicked);

​

  // NO button

  button2 = createButton("NO");

  button2.position(650, 490);

  button2.size(100, 100);

  button2.style("background", "#C21C0A");

  button2.style("color", "#ffff");

  button2.style("font-size", "20px");

  button2.style("border", "none");

  button2.mouseClicked(button2Clicked);

​

  // PAIN button

  button3 = createButton("PAIN");

  button3.position(770, 490);

  button3.size(100, 100);

  button3.style("background", "#0BA5BD");

  button3.style("color", "#ffff");

  button3.style("font-size", "20px");

  button3.style("border", "none");

  button3.mouseClicked(button3Clicked);

  // LOVE button

  button4 = createButton("LOVE");

  button4.position(890, 490);

  button4.size(100, 100);

  button4.style("background", "#E810CD");

  button4.style("color", "#ffff");

  button4.style("font-size", "20px");

  button4.style("border", "none");

  button4.mouseClicked(button4Clicked);

}

​

function draw() {

  background(120);

​

  // Draw a rectangle with rounded corners and no fill

  noFill();

  stroke(0);

  strokeWeight(10);

  let cornerRadius = 20;

  rect(50, 20, 500, 660, cornerRadius);

   // Draw the bottom rectangle with black fill color and rounded corners

  noStroke();

    fill(200);

  rect(50, 20, 500, 660, cornerRadius);

  fill(0);

  rect(50, 610, 500, 70, 0, 0, cornerRadius,cornerRadius);

  // Adding the text to the bottom rectangle

  textSize(24);

  textAlign(CENTER, CENTER);

  fill(255);

  text("Translate words into sign language", width/2, 645);

​

​

  // Draw the loaded image on the canvas if it exists

  if (index == 0) {

    image(imgSrc, -215, -130);

  }

​

  if (index == 1) {

    image(imgSrc1, -270, -170);

  }

​

  if (index == 2) {

    image(imgSrc2, -275, -90);

  }

   if (index == 3) {

    image(imgSrc3, -275, -90);

  }

}

​

function button1Clicked() {

  imgSrc = loadImage("help.handpose.png", function (img) {

  img.resize(img.width * 0.3, img.height * 0.3);

  imgSrc = img;

  });

  index = 0;

}

​

function button2Clicked() {

  imgSrc1 = loadImage("no.handpose.png", function (img) {

    img.resize(img.width * 0.3, img.height * 0.3);

    imgSrc1 = img;

  });

  index = 1;

}

​

function button3Clicked() {

  imgSrc2 = loadImage("pain.handpose.png", function(img) {

    img.resize(img.width * 0.3, img.height * 0.3);

    imgSrc2 = img;

  });

  index = 2;

}

​

function button4Clicked() {

  imgSrc3 = loadImage("love.handpose.png", function(img) {

    img.resize(img.width * 0.3, img.height * 0.3);

    imgSrc3 = img;

  });

  index = 3;

}

​

​

​

​

​

​

​