Start creating your own code art

This will be a simple post for all the artists/ creators out there. Have you always wondered of creating graphic art too, well Adam did too?

• So Adam started by creating a react app

$ npx create-react-app p5reactArtProject

• then Adam install react-p5-wrapper, coz he knows React.

• Then Adam deleted all the precode from App.js.

• Adam created a component called Art and then inside it a file named Art.js

Let's see the example.

import React from 'react';
import P5Wrapper from 'react-p5-wrapper';

const SecondArt = () => {
    let canvas;
    var height = window.innerHeight;
    var width = window.innerWidth;

    const sketch = (p) => {
        console.log('p', p);

        const drawLines = (x, w, stroke, color) => {
            for (var i = 10; i < 1000; i += 10) {
                p.stroke(color);
                p.strokeWeight(stroke);
                p.strokeCap(p.SQUARE);
                p.line(x + w + 50 + i, w + 50, x + w + 50 + i, w + 400);
            }
        };

        p.setup = () => {
            canvas = p.createCanvas(width, height);
        };

        p.draw = () => {
            p.background('#000');
            for (let w = 0; w < 490; w += 70) {
                drawLines(100, w, w / 70, 'cyan');
                drawLines(195, w, 6 - w / 70, 'red');
            }
        };
    };

    return <P5Wrapper sketch={sketch}></P5Wrapper>;
};

export default SecondArt;