응 응~~

let leftCounter = 0;

let rightCounter = 0;

let leftButton, rightButton, middleCircle;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // Set a white background

  background(255);

  // Button sizes

  let buttonSize = min(width, height) * 0.3;

  // Left button (red)

  leftButton = createButton(leftCounter);

  leftButton.position((width / 4) - (buttonSize / 2), (height / 2) - (buttonSize / 2) + 30);

  leftButton.size(buttonSize, buttonSize);

  leftButton.style('border-radius', '50%');

  leftButton.style('font-size', '32px');

  leftButton.style('background-color', '#FF6347'); // Tomato red

  leftButton.style('color', 'white');

  leftButton.style('border', 'none');

​

  // Title for left button ("네")

  let leftTitle = createDiv('네');

  leftTitle.position(leftButton.x + buttonSize / 2 - 15, leftButton.y - 50);

  leftTitle.style('font-size', '24px');

  // Right button (green)

  rightButton = createButton(rightCounter);

  rightButton.position((3 * width / 4) - (buttonSize / 2), (height / 2) - (buttonSize / 2) + 30);

  rightButton.size(buttonSize, buttonSize);

  rightButton.style('border-radius', '50%');

  rightButton.style('font-size', '32px');

  rightButton.style('background-color', '#4CAF50'); // Green

  rightButton.style('color', 'white');

  rightButton.style('border', 'none');

  // Title for right button ("응")

  let rightTitle = createDiv('응');

  rightTitle.position(rightButton.x + buttonSize / 2 - 15, rightButton.y - 50);

  rightTitle.style('font-size', '24px');

  // Middle circle (neutral)

  middleCircle = createDiv('아~');

  middleCircle.position((width / 2) - (buttonSize / 2), (height / 2) - (buttonSize / 2) + 30);

  middleCircle.size(buttonSize, buttonSize);

  middleCircle.style('border-radius', '50%');

  middleCircle.style('font-size', '32px');

  middleCircle.style('background-color', '#FFC107'); // Yellow for neutrality

  middleCircle.style('color', 'white');

  middleCircle.style('display', 'flex');

  middleCircle.style('align-items', 'center');

  middleCircle.style('justify-content', 'center');

​

  // Title for middle circle ("아~")

  let middleTitle = createDiv('아~');

  middleTitle.position(middleCircle.x + buttonSize / 2 - 15, middleCircle.y - 50);

  middleTitle.style('font-size', '24px');

​

  // Define the right button's click event

  rightButton.mousePressed(incrementRightCounter);

}

​

function incrementLeftCounter() {

  leftCounter++;

  leftButton.html(leftCounter); // Update left button text with the new counter value

}

​

function incrementRightCounter() {

  rightCounter++;

  rightButton.html(rightCounter); // Update right button text with the new counter value

}

​

function keyPressed() {

  if (key === ' ') {

    incrementLeftCounter(); // Increment left counter when spacebar is pressed

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  let buttonSize = min(width, height) * 0.3;

​

  // Reposition and resize left button and title

  leftButton.size(buttonSize, buttonSize);

  leftButton.position((width / 4) - (buttonSize / 2), (height / 2) - (buttonSize / 2) + 30);

​

  // Reposition and resize right button and title

  rightButton.size(buttonSize, buttonSize);

  rightButton.position((3 * width / 4) - (buttonSize / 2), (height / 2) - (buttonSize / 2) + 30);

​

  // Reposition middle circle and title

  middleCircle.size(buttonSize, buttonSize);

  middleCircle.position((width / 2) - (buttonSize / 2), (height / 2) - (buttonSize / 2) + 30);

}

​