//Hae Wan Park
//15104-A
//haewanp@andrew.cmu.edu
//Project-04-StringArt
//radius of imaginary circle that its boundary contains X, Y coordinate of beginning or ending point of lines
//radius of some ellipses
var r1 = 110;
var r2 = 90;
var r3 = 55;
var r4 = 40;
//X, Y coordinate of beginning or ending point of lines
var x1;
var y1;
var x2;
var y2;
var x3;
var y3;
function setup() {
createCanvas(400, 300);
}
function draw() {
background(255);
translate(width/2, height/2);
//circle yellow 1
noStroke();
fill(255, 220, 100);
ellipse(0, 0, 2*r1, 2*r1);
//circle yellow 2
fill(255, 240, 100);
ellipse(0, 0, 210 + r4/3, 210 + r4/3);
//circle green
fill(211, 229, 212);
ellipse(0, 0, 180, 180);
//circle blue
fill(0, 50, 130);
ellipse(0, 0, r4*2, r4*2);
angleMode(DEGREES);
strokeWeight(1);
//along the boundary of imaginary circle, lines are created in each 5 degree
for (var a = 0; a < 360; a = a + 5) {
x1 = cos(a) * r1;
y1 = sin(a) * r1;
x3 = cos(a) * r3;
y3 = sin(a) * r3;
stroke(242, 109, 98);
line(x1, y1, -cos(a - 110) * r1, -sin(a - 110) * r1);
line(x3, y3, -cos(a - 90) * r4, -sin(a - 90) * r4);
}
//along the boundary of imaginary circle, lines are created in each 10 degree
for (a = 0; a < 360; a = a + 10) {
x2 = cos(a) * r2;
y2 = sin(a) * r2;
x3 = cos(a) * r3;
y3 = sin(a) * r3;
stroke(255, 240, 100);
line(x2, y2, x3, y3);
stroke(0, 50, 130);
line(x3, y3, -cos(a - 80) * r4, -sin(a - 80) * r4);
}
//change size of radius based on position of mouse
r4 = map(mouseY, 0, 300, 30, 80);
r1 = map(mouseX, 0, 400, 70, 170);
//if press mouse radius increases then release radius decrease
if (mouseIsPressed){
r2 = r2 + 10;
} else {
if (r2 > 90) {
r2 = r2 - 5;
}
}
//blue lines around canvas
stroke(0, 50, 130);
for (var i = -30; i < 30; i++) {
line(-150, i*17, i*17 - 120, 150);
line(150, i*17, i*17 + 120, -150);
line(-150, i*17, -i*17 - 120, -150);
line(150, -i*17, i*17 + 120, 150);
}
}
The process was a bunch of geometry to calculate the X, Y coordinate of lines which are created along imaginary circles. I created the animation based on the mouse behaviors. Especially, I like that raylike lines are stretched out when the mouse is pressed.