Examples / p5.js Examples / / Spooky Text

Spooky Text

example p5.js javascript for-loops 🎃

This sketch uses the sin() function to create spooky text!

let message = 'Spoooooky!';
let messageX;
const xSpeed = 2;
const ySpeed = 0.05;
const amplitude = 100;
const verticalLetterSpacing = 10;
let font;

function preload() {
  font = loadFont('PentagramExtended.ttf');
}

function setup() {
  createCanvas(400, 400);
  textFont(font);

  messageX = width;
}

function draw() {
  background(32);
  fill(255, 100, 25);

  textSize(100);

  for (let i = 0; i < message.length; i++) {
    const letterX = messageX + textWidth(message.substring(0, i));

    const letterOffset = i * verticalLetterSpacing;
    const letterY = height / 2 +
      sin((frameCount - letterOffset) * ySpeed) * amplitude;

    text(message[i], letterX, letterY);
  }

  messageX -= xSpeed;
  if (messageX < - textWidth(message)) {
    messageX = width + 50;
  }

  textSize(24);
  fill(200);
  text("Font by @somepx", 25, height - 25);
}

function mouseClicked(){
  window.open('https://somepx.itch.io/', '_blank');
}

Click here to edit this code in the p5.js editor.

spooky text

Remix Ideas

  • Change the message, or change the variables at the top to change the animation.
  • Use a different font.
  • Make each letter a different color.

Comments and Questions

Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!