Week 4 Coding Assignment

Concept:

When I see words like generative text, I immediately think of the code rain effect that happened in the movie matrix.

(screenshot of the code rain visual effect in the movie matrix)

I intend to recreate this effect by using p5js.

Code that I am proud of:

To recreate this effect, there must be at least two types of objects that we want to define. First, the “word stream” that appears in the screen. Second, the individual elements of the characters. By writing these two classes, the rest of the setup should be easy.

draw() {
    // Slight green variance between streams
    const g = map(sin(this.colorPhase), -1, 1, 180, 255);
    if (this.isHead) {
      fill(180, g, 180); // brighter/whiter head
    } else {
      fill(120, g, 120);
    }
    text(String(this.value), this.x * this.glyphSize, this.y * this.glyphSize);

when writing matrix symbol class, I am proud of these lines of code. by using very simple mathematics, I successfully achieved the effect of having green variance across different streams.

output:

reflection:

after reading the design post, I feel like if i want to add any design to this animation, I would try to add the effect of when users swipe their mouses across the screen, the length of the streams would change or the stream would be stroked by where the mouse is at.