p5.js- cloning text

https://out-of-office.superhi.com/

• This is using frame counts and scrubbing a timeline.
• IT’s a one dimensional grid and then splitting it out into a grid.

Cloning the text

To clone the text, we need to identify a variable for tileSize, then call the start, end, and step of the for loop, where start is y = 0, end is y < 12, and the step is y = y + 1.

y < 12 means it increases by one every single time until it gets to 0; this is running 12 times.

Using variables for the numbers will make it easier to do math, so we’ve changed the image’s variables to [s for starting] or [d for destination] x,y, width, height.

using y * tileSize calls dy to list it down the page, depending on y.

We can frame the source (s) and destination (d) variables as building the grid.

function draw() {
    background("\#000000");
 
    const tileSize = 50;
 
    for (let y = 0; y < 12; y = y + 1) {
 
        const sx = 0;
        const sy = 0;
        const sw = 1200;
        const sh = 600;
        const dx = 0;
        const dy = y * tileSize ;
        const dw = 1200;
        const dh = tileSize;
 
        image(graphic, dx, dy, dw, dh, sx, sy, sw, sh)
    }