GRAPUS

gistfile1.txt

import React, { useRef, useEffect } from "react";
import "./helpers/Globals";
import "p5/lib/addons/p5.sound";
import * as p5 from "p5";
import ShuffleArray from "./functions/ShuffleArray.js";

const P5Sketch = () => {
    const sketchRef = useRef();

    const Sketch = p => {

        p.canvas = null;

        p.canvasWidth = window.innerWidth;

        p.canvasHeight = window.innerHeight;

        p.setup = () => {
            p.canvas = p.createCanvas(p.canvasWidth, p.canvasHeight, p.P2D);
            p.pg = p.createGraphics(p.windowWidth, p.windowHeight, p.P2D);
            p.pg.background(0);
            p.pg.fill(255);
            p.pg.textSize(300);
            p.pg.push();
            p.pg.translate(p.pg.width / 2, p.pg.height / 2 - 50);
            p.pg.textAlign(p.CENTER, p.CENTER);
            p.pg.text("GRAPPUS", 0, 0);
            p.pg.pop();
            
        };

        p.draw = () => {
            p.background(0);
            let tilesX = 8;
            let tilesY = 8;
            let tileW = p.pg.width / tilesX;
            let tileH = p.pg.height / tilesY;
            for (let y = 0; y < tilesY; y++) {
                for (let x = 0; x < tilesX; x++) {
                    let wave = Math.sin(p.frameCount * 0.05 + x * y * 0.07) * 100;
                    let wave2 = Math.sin(p.frameCount * 0.01 + x * y * 0.07) * 50;
                    // SOURCE
                    let sx = x * tileW + wave;
                    let sy = y * tileH + wave2;
                    let sw = tileW;
                    let sh = tileH;
                    // DESTINATION
                    let dx = x * tileW;
                    let dy = y * tileH;
                    let dw = tileW;
                    let dh = tileH;
                    p.drawingContext.drawImage(p.pg.canvas, sx, sy, sw, sh, dx, dy, dw, dh);
                }
            }
        };

        p.updateCanvasDimensions = () => {
            p.canvasWidth = window.innerWidth;
            p.canvasHeight = window.innerHeight;
            p.createCanvas(p.canvasWidth, p.canvasHeight);
            p.redraw();
        }

        if (window.attachEvent) {
            window.attachEvent(
                'onresize',
                function () {
                    p.updateCanvasDimensions();
                }
            );
        }
        else if (window.addEventListener) {
            window.addEventListener(
                'resize',
                function () {
                    p.updateCanvasDimensions();
                },
                true
            );
        }
        else {
            //The browser does not support Javascript event binding
        }
    };

    useEffect(() => {
        new p5(Sketch, sketchRef.current);
    }, []);

    return (
        <div ref={sketchRef}>
        </div>
    );
};

export default P5Sketch;