Bouncing Hellos

/**

 * Bouncing Hellos (v1.0.0)

 * GoToLoop (2023-Apr-06)

 *

 * https://Discourse.Processing.org/t/

 * if-statement-in-the-for-loop-how-to-control-behavious-of-elems-

 * based-on-its-index-number/41637/8

 *

 * https://OpenProcessing.org/sketch/1890488

 */

​

"use strict";

​

const

  TXT = 'Hello ',

  FG = 'red',

​

  SIZE = 400,

  DIM = 0o30,

  RAD = DIM >> 1,

​

  INTER = 50,

  OFFSET = 0o30,

  SPD = 2,

​

  TEXTS = 8,

​

  offsets = new Uint16Array(TEXTS).fill(SIZE >> 1),

  speeds = Int8Array.from({ length: TEXTS }, (_, i) => i & 1? -SPD : SPD);

​

var bg = 0o350;

​

function setup() {

  createCanvas(SIZE, SIZE);

  fill(FG).textSize(DIM).textAlign(CENTER, CENTER);

  bg = color(bg);

}

​

function draw() {

  background(bg);

​

  for (const i in offsets) {

    const offset = offsets[i] += speeds[i];

    text(TXT + i, offset, INTER * i + OFFSET);

    if (offset < RAD | offset > SIZE - RAD)  speeds[i] *= -1;

  }

}