DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

aldober
aldober

Posted on

Computer Generated Geometrics in less than 30 lines of code!

A combination of variety of geometrics can be cool and fun.
While generating it may seem like a tough task, one can actually experience the geometrics combo with less than 30 lines of code!

Set Up

The program uses p5.js for rendering.

How Does The Program Work?

  • The program generates a random number from 0 to 100 and assign it to a variable n.

  • The program loops n times, and with every iteration it
    initializes 7 variables:
    The first two are width and height, the second two are x and y, and the last three are random RGB (Red, Green and Blue) values.

  • Lastly, it draws a rectangle with the specified arguments.

Full Code

function setup() {
    const CANAVS_WIDTH = 400;
    const CANVAS_HEIGHT = 600;

    createCanvas(CANAVS_WIDTH, CANVAS_HEIGHT);

    background(random(255), random(255), random(255));

    const n = random(100);

    for (i = 0; i < n; i++) {
        const w = random(CANAVS_WIDTH);
        const h = random(CANVAS_HEIGHT);

        const x = random(CANAVS_WIDTH);
        const y = random(CANVAS_HEIGHT);

        const r = random(255);
        const g = random(255);
        const b = random(255);

        fill(r, g, b);
        rect(x, y, w, h);
    } 
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Why You Need to Study Javascript Fundamentals

The harsh reality for JS Developers: If you don't study the fundamentals, you'll be just another β€œCoder”. Top learnings on how to get to the mid/senior level faster as a JavaScript developer by Dragos Nedelcu.