Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
円をつなぐ線 p5.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]));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment