function setup() {
createCanvas(400, 300);
}
var ratio = 0.75; // width to height ratio
var radius = 400; // length of radiating center lines
function draw() {
background(47,19,116);
// circles:
// outer circle
fill(244, 96, 54);
noStroke();
ellipse(width / 2, height / 2, 300, 300);
// middle circle
fill(245, 110, 72);
noStroke();
ellipse(width / 2, height / 2, 150, 150);
// inner circle
fill(246, 124, 90);
noStroke();
ellipse(width / 2, height / 2, 50, 50);
// lines:
// center radial
for (var a = 0; a < 360; a += 10) {
stroke(255, 249, 104);
line(width / 2, height / 2,
// trig uses var radius as hypotenuse
width / 2 + radius * cos(radians(a)),
height / 2 + radius * sin(radians(a)));
}
// bottom left corner
for (var b = 0; b < width; b += 7) {
stroke(66, 51, 227);
line(0, b, b / ratio, height);
}
// top left corner
for (var c = 0; c < width; c += 7) {
stroke(30, 81, 221);
line(0, c, width - c / ratio, 0);
}
// top right corner
for (var d = 0; d < width; d += 7) {
stroke(66, 51, 227);
line(width, d, d / ratio, 0);
}
// bottom right corner
for (var e = 0; e < width; e += 7) {
stroke(30, 81, 221);
line(width, e, width - e / ratio, height);
}
}
It took me a while to catch on, but I hit one good curve and used it to figure out the others. I played around with difference colour schemes and decided to go with a sun, stars, and space theme from there.