円をつなぐ線 p5.js

sketch.js

// https://stackoverflow.com/questions/4856717/javascript-equivalent-of-pythons-zip-function
// ex:
// zip([[1,2,3],['a','b','c']])
// [[1,'a'],[2, 'b'], [3, 'c']]
const zip = rows => rows[0].map((_, c) => rows.map(row => row[c]));

function makeCirclePoints(degs, t, offsetX, offsetY) {
    return degs.map(deg => ({
        "x": cos(radians(deg + t)) * 50 + offsetX,
        "y": sin(radians(deg + t)) * 50 + offsetY,
        "color": color(int(map(deg % 360, 0, 359, 0, 255)), 239, 239)
    }));
}
function drawCircle(points) {
    points.forEach(p => {
        strokeWeight(5);
        stroke(p.color);
        point(p.x, p.y);
    });
}
function drawLine(point1, point2) {
    stroke(point1.color);
    strokeWeight(1);
    line(point1.x, point1.y, point2.x, point2.y);
}

var degs;

function setup() {
    createCanvas(400, 400);
    colorMode(HSB, 255);
    degs = Array.from({ length: 360 / 15 }, (v, k) => k * 15);
}

function draw() {
    background(40);

    var t = frameCount * 0.5;
    var points1 = makeCirclePoints(degs, t, width / 2, height / 6 * 1);
    var points2 = makeCirclePoints(degs, t + 90, width / 6 * 5, height / 2);
    var points3 = makeCirclePoints(degs, t + 180, width / 2, height / 6 * 5);
    var points4 = makeCirclePoints(degs, t + 270, width / 6 * 1, height / 2);
    [points1, points2, points3, points4].map(p => drawCircle(p));

    zip([points1, points2]).forEach(p => drawLine(p[0], p[1]));
    zip([points2, points3]).forEach(p => drawLine(p[0], p[1]));
    zip([points3, points4]).forEach(p => drawLine(p[0], p[1]));
    zip([points1, points4]).forEach(p => drawLine(p[0], p[1]));
}