let myString = "Waves After Waves, I'm Slowly Drifting...";

​

// Horizontal and vertical position of the text

let xPosition;

let yPosition;

// Speed and amplitude of the wave motion

let waveSpeed = 0.0005;

let waveAmplitude = 100;

​

let direction = 1;

​

function setup() {

  createCanvas(400, 400);

  background(10, 10, 100);

​

  // setting the font, size, and style

  textFont("Courier New", 15);

  textStyle(BOLD);

​

  // initialize the xPosition off canvas to the left

  xPosition = -textWidth(myString);

  // initialize the y-position (vertically)

  yPosition = height * 0.8;

}

​

function draw() {

  //Crescent Moon

  fill(225);

  noStroke();

  ellipse(300, 100, 125, 125);

​

  fill(10, 10, 100);

  noStroke();

  ellipse(275, 100, 135, 115);

​

  //Wave 1

  noFill();

  stroke(14, 109, 181);

  strokeWeight(45);

  beginShape();

  vertex(0, 280);

  bezierVertex(100, 300, 175, 220, 400, 300);

  endShape();

​

  //Wave 2

  noFill();

  stroke(0, 83, 138);

  strokeWeight(45);

  beginShape();

  vertex(0, 300);

  bezierVertex(200, 325, 175, 240, 410, 325);

  endShape();

​

  //Wave 3

  noFill();

  stroke(0, 42, 105);

  strokeWeight(20);

  beginShape();

  vertex(0, 315);

  bezierVertex(100, 340, 260, 275, 410, 340);

  endShape();

​

  //Wave 4

  noFill();

  stroke(14, 109, 181);

  strokeWeight(30);

  beginShape();

  vertex(0, 340);

  bezierVertex(100, 370, 175, 300, 410, 360);

  endShape();

​

  //Wave 5

  noFill();

  stroke(0, 42, 105);

  strokeWeight(25);

  beginShape();

  vertex(0, 365);

  bezierVertex(150, 375, 260, 330, 410, 390);

  endShape();

​

  //Wave 8

  noFill();

  stroke(0, 83, 138);

  strokeWeight(25);

  beginShape();

  vertex(0, 385);

  bezierVertex(190, 395, 250, 360, 410, 395);

  endShape();

​

  //Wave 6

  noFill();

  stroke(14, 109, 181);

  strokeWeight(15);

  beginShape();

  vertex(0, 390);

  bezierVertex(175, 410, 210, 375, 410, 400);

  endShape();

​

  //Stars

  fill(255);

  noStroke();

  ellipse(50, 50, 5, 5);

  ellipse(125, 90, 5, 5);

  ellipse(200, 25, 5, 5);

  ellipse(225, 100, 5, 5);

  ellipse(30, 150, 5, 5);

  ellipse(175, 150, 5, 5);

  ellipse(350, 200, 5, 5);

​

  textAlign(CENTER);

  // Calculate wave motion for the text

  let waveOffset = sin(frameCount * waveSpeed) * waveAmplitude;

  xPosition += direction * 1; // here we can adjust the speed (horizontally)

​

  // Reverse direction when text goes off-canvas

  if (

    xPosition > width + textWidth(myString) ||

    xPosition < -textWidth(myString)

  ) {

    direction *= -1;

  }

​

  // Draw the characters of myString with wave motion

  for (let i = 0; i < myString.length; i++) {

    let myChar = myString.charAt(i);

    // Calculate the horizontal position for each character

    let x = xPosition + textWidth(myChar) * i;

    // Calculate the vertical position with wave-like motion

    let y = sin(frameCount* waveSpeed + i * waveAmplitude + waveOffset) * 5; 

    // Display each character with vertical wave-like motion

    text(myChar, x, yPosition + y * 3);

    // Display each character of myString with vertical wave-like motion

  }

}

​