Start creating your own code art

Akhil Gupta — Mon, 21 Dec 2020 10:58:35 +0000

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;

Things I need to write about in the coming few days

Akhil Gupta — Tue, 25 Aug 2020 22:58:56 +0000

How to prep for JavaScript tech interviews
- Microsoft interview (write, map, filter, reduce functions)
- crunchbase, amplitude (complex hash manipulations)
- visa (data strorage problem)
- Bento Cats Project
How i solved the car-reader issue using simple hack on front end. (Spoiler: created a transparent input with auto focus, so that the user can swipe card details)
Form filling with React-Text-masks (credit card, exp Date, zipcode, email address)
Why do we need all the dev, qa, qapen, qaperf, uat, preprod, staging, prod environments
Amazing Typescript skills
Automating network calls in React.!!!!
Leetcode setup
React Hook Forms with State management, Masked Text Input

DEV Community: Akhil Gupta

Start creating your own code art

Things I need to write about in the coming few days