Generative Art 3

index.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
<script src="script.js"></script>

script.js

let side;
let mid;
let v1, v2, v3, v4;
let f = [];
let x = [];
let y = [];

function setup() {
    createCanvas(600, 400);
    rectMode(CENTER);
    noStroke();
    frameRate(0.5);

    side = 200;
    mid = side / 2;

    v1 = createVector(mid, 0);
    v2 = createVector(-mid, 0);
    v3 = createVector(0, mid);
    v4 = createVector(0, -mid);

    f.push(v1, radians(90), radians(270), v2, radians(270),
        radians(90), v3, radians(180), radians(0),
        v4, radians(0), radians(180));

    x.push(100, 300, 500, 100, 300, 500);
    y.push(100, 300, 100, 300, 100, 300);
}
  function draw(){

    for (let j = 0; j <= 5; j++) {
        push();
        translate(x[j], y[j]);
        fill(random(0, 255), random(0, 255), random(0, 255));
        rect(0, 0, side, side);
        fill(random(0, 255), random(0, 255), random(0, 255));
        drawArc();
        pop();
    }
}

function drawArc() {
    let index = round(random(0, 3));
    let values = [0, 3, 6, 9];
    let i = values[index];
    arc(f[i].x, f[i].y, side, side, f[i + 1], f[i + 2], PIE);

}