Random Hidden Message - V2

index.html

<!-- Genuary 2025
JAN. 27.
Make something interesting with no randomness or noise or trig. -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barrio&display=swap" rel="stylesheet">

random-hidden-message-v2.markdown

Random Hidden Message - V2

A Pen by Monica.dev on CodePen.

License.

script.js

const colors = [
  "#ffadad",
  "#ffd6a5",
  "#fdffb6",
  "#caffbf",
  "#9bf6ff",
  "#a0c4ff",
  "#bdb2ff",
  "#ffc6ff"
];

let size;
let showPrompt = true;

const quote = ' "We don\'t believe in random here."'.split("");

function setup() {
  createCanvas(windowWidth, windowHeight);
  //  frameRate(1);
  background("#2b2135");
  //size = width / 20;
  fill("#FFF");
  textStyle(BOLD);
}

function draw() {
  clear(); // clear canvas of elements from previous draw

  size = map(mouseY, 0, height, width / 40, width / 20);
  textSize(size);
  textFont("Barrio");
  background("#2b2135");

  textAlign(CENTER, CENTER);

  const count = map(mouseX, 0, windowWidth, 0, quote.length);

  let phrase = "";

  let idx = 0;

  let highlight = `${
    colors[int(map(mouseX, 0, windowWidth, 0, colors.length - 1))]
  }98`;

  fill(highlight);
  while (idx < count) {
    if (quote[idx]) {
      phrase += quote[idx];
    }
    idx++;
  }

  text(phrase, windowWidth / 2, windowHeight / 2);

  const circleColor = colors[colors.length - 1];
  fill(`${circleColor}70`);
  noStroke();

  const emoji = phrase.length == quote.length ? "" : "🖊";

  if (showPrompt) {
    //  textSize(width / 60);
    text("Move mouse around to interact 🖱️", windowWidth / 2, windowHeight / 2);
  } else {
    const baseCircleSz = size * 1.25; //+ (frameCount % 40);
    circle(mouseX, mouseY, baseCircleSz);
    // fill("#FFFFFF30");
    fill(`${circleColor}30`);
    circle(mouseX, mouseY, baseCircleSz * 0.8);
    //fill("#FFFFFF20");
    fill(`${circleColor}20`);
    circle(mouseX, mouseY, baseCircleSz * 0.6);
    fill(circleColor);
    if (emoji) {
      text(emoji, mouseX, mouseY);
    }
  }
}

function keyPressed() {
  const SPACEBAR = " ";
  // pause/play animation when spacebar is pressed for sketches that animate from draw to draw
  if (key == SPACEBAR) {
    isLooping() ? noLoop() : loop();
  }

  if (key === "g") {
    saveGif("canvas", 25);
  }
  if (key === "s") {
    saveCanvas("canvas");
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function mouseMoved() {
  showPrompt = false;
}

function touchMoved() {
  showPrompt = false;
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>

style.css

canvas {
  /* center canvas in middle of page */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 50%;
  text-align: center;
}
.barrio-regular {
  font-family: "Barrio", serif;
  font-weight: 400;
  font-style: normal;
}