Picker

var choices = ["apple", "banana", "carrot", "durian", "eggplant", "fig", "grape", "honeydew"];

var winnerIndex = 0;

var arrowPos = 0;

var charge = 0;

var isRunning = false;

var declareWinner = false;

var drumRoll;

var tada;

var snare;

var clickSound;

​

function preload() {

  soundFormats("mp3");

  drumRoll = loadSound("https://cdn.pixabay.com/audio/2023/03/03/audio_aa1cb48174.mp3");

  drumRoll.setLoop(true);

  tada = loadSound("https://cdn.pixabay.com/audio/2022/03/15/audio_01f5fcf7a9.mp3");

  snare = loadSound("https://cdn.pixabay.com/audio/2022/06/05/audio_97ed83a845.mp3");

  clickSound = loadSound("https://cdn.pixabay.com/audio/2023/02/28/audio_52ccaf1a85.mp3");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(0);

  textAlign(CENTER);

}

​

function draw() {

  background(0);

  let sectionSize = width/choices.length;

  let barHeight = 50;

  let maxFontSize = 40;

  for (let index = 0; index < choices.length; index++) {

    // Get the section's hue.

    colorMode(HSB, 360);

    noStroke();

    let sectionHue = (360/choices.length) * index

    fill(sectionHue, 360, 360);

    // Draw the section's rectangle.

    let sectionX = sectionSize*index;

    let sectionY = (height/2) - barHeight;

    rect(sectionX, sectionY, sectionSize, barHeight);

    // Get settings to draw text.

    colorMode(RGB, 255);

    let sectionCenterX = (sectionSize*index) + (sectionSize*0.5);

    let textY = sectionY - (maxFontSize/2);

    // Make the font white if it's the winning section.

    if (index == winnerIndex) {

      fill(255);

    } else {

      fill(125);

    }

    // Make the text's size bigger the closer its center is to the mouse's position.

    let delta = constrain((sectionSize*3 - abs(arrowPos-sectionCenterX)) * 0.05, 1, maxFontSize);

    textSize(delta);

    text(choices[index], sectionCenterX, textY);

  }

  // Draw the arrow.

  fill(255);

  let arrowSize = 20;

  triangle(

    arrowPos - arrowSize, (height/2) + barHeight,

    arrowPos, (height/2) + barHeight - arrowSize,

    arrowPos + arrowSize, (height/2) + barHeight

  );

  // Draw winning text.

  if (declareWinner) {

    textSize(100);

    text("🎉 " + choices[winnerIndex] + " 🎉", width/2, (height/4));

  }

  if (mouseIsPressed && !isRunning) {

    // Increase the charge and display it as a bar.

    colorMode(HSB, 360);

    charge += 10;

    let chargeMultiplier = 2;

    let barHue = map(charge*chargeMultiplier, 0, width, 100, 0);

    noStroke();

    fill(barHue, 360, 360);

    rect(0, (height/2) + barHeight + arrowSize, charge*chargeMultiplier, 10);

    colorMode(RGB, 255);

  } else {

    // Slow down the arrow and move it.

    charge *= 0.98;

    arrowPos += charge;

    // Keep the arrow within the screen's bounds.

    if (arrowPos <= 0 || arrowPos >= width) {

      arrowPos = constrain(arrowPos, 0, width);

      charge *= -1;

    }

    // If the arrow's speed is slow enough then declare a weiner.

    if (isRunning && abs(charge) < 0.075) {

      isRunning = false;

      declareWinner = true;

      drumRoll.stop();

      snare.play();

      tada.play();

    }

  }

  let oldWinnerIndex = winnerIndex;

  winnerIndex = min(

    int(map(arrowPos, 0, width, 0, choices.length)), choices.length-1);

  if (isRunning && oldWinnerIndex != winnerIndex) {

    clickSound.play();

  }

}

​

function mousePressed() {

  if (!isRunning) {

    mouseIsPressed = true;

    charge = 0;

  }

}

​

function mouseReleased() {

  if (!isRunning) {

    mouseIsPressed = false;

    isRunning = true;

    declareWinner = false;

    drumRoll.play();

  }

}