var num = 250;
var aS;//angle of the shape
var increment; //increase of spacing
var radi; //radius
var radS; //spiral shape
var xI; //x increment
var yI; //y increment
var col1; //first color
var col2; //second color
var moX; //mouse
var moY; //mouse
function setup() {
createCanvas(640, 480);
radi = (width/2)-40;
increment = 5;
background('lightgreen');
col1 = color('yellow');
col2 = color('lightpink');
}
function draw() {
noStroke();
ellipse(0,400,260,260);
fill('white');
ellipse(560,0,220,220);
fill('white');
ellipse(210,120,180,180);
fill('white');
ellipse(490,500,320,320);
fill('white');
if(mouseX != moX) {
var xI = width/2
var yI = height /2
for (var i = 1; i < num; i++){
aS = i * increment;
mult = i/num;
radS = mult * radi;
x = width/2 + cos(aS) * radS;
y = height/2 + sin(aS) *radS;
stroke(lerpColor(col2, col1, mult));
strokeWeight(0.5);
line(xI, yI, x,y);
xI = x;
yI = y;
}
for (var i = 1; i < num; i++){
aS = i * increment;
mult = i/num;
radS = mult * radi;
x = width/2 + cos(aS) * radS;
y = height/2 + sin(aS) *radS;
stroke(lerpColor(col2, col1, mult));
strokeWeight(0.03);
line(xI+80, yI+80, x+80,y+80);
xI = x;
yI = y;
}
for (var i = 1; i < num; i++){
aS = i * increment;
mult = i/num;
radS = mult * radi;
x = width/2 + cos(aS) * radS;
y = height/2 + sin(aS) *radS;
stroke(lerpColor(col2, col1, mult));
strokeWeight(0.03);
line(xI-80, yI-80, x-80,y-80);
xI = x;
yI = y;
}
}
}
I tried to create string art based on a pentagon shape, and I added white ellipse shapes as a background pattern.