//Clair(sijing) Sun
//session C
//sijings@andrew.cmu.edu
//stringArt
var angle=0
function setup() {
createCanvas(400, 300);
}
function draw() {
//outer patel
strokeWeight(1.5);
background(247,234,186);
//left top middle petal - 1st curve
var curveinY = height/2+40;//local variable for determing the changes in location of lines
var curveinX2 = width/2;
for (var i5 = 0 ; i5 < 80 ; i5 ++) {
stroke(250,112,154);
line(0, curveinY, curveinX2, 0);
curveinY -= 10;//by minusing 10, we change the start position of y everytime a new line is created
curveinX2 += 10;//by adding 10, we change the end position of x everytime a new line is created
}
//left bottom petal - 2nd curve
var curve1Y = height/2+50;
var curve1X2 = width/2+50;
var color31=251;//an initial value for color changing
var color32=171;
var color33=126;
var colorchange3=0;//the variable helps changing the color
for (var i = 0 ; i < 50 ; i ++) {
colorchange3+=3;//the value each time the RGB value changes
stroke(color31,color32+colorchange3,color33+colorchange3);
line(0, curve1Y, curve1X2, height);
curve1Y -= 10;//similar concept as the previous curve
curve1X2 -= 10;
}
//petal at the top left, far back - 3rd curve
var curve2X = 50;
var curve2Y2 = height/2+50;
var color21=250;//color for 3rd curve variables
var color22=172;
var color23=168;
var colorchange2=0;//vairble helps chainging the color
for (var i2 = 0 ; i2 < 50 ; i2 ++) {
colorchange2+=4;//changed value everytime the RGE value changes
stroke(color21,color22+colorchange2,color23+colorchange2);
line(curve2X, 0, 0, curve2Y2);
curve2Y2 -= 10;//ending y position changed
curve2X += 10;//starting x position changed
}
//patel at the top right -4th curve
var curve3X = 50;
var curve3Y2 = 50;
var color1=255;
var color2=185;
var color3=205;
var colorchange1=0;
for (var i3 = 0 ; i3 < 50 ; i3 ++) {
colorchange1+=2;
stroke(color1,color2+colorchange1,color3);
line(curve3X, 0, width, curve3Y2);
curve3X += 10;//starting x position changed
curve3Y2 += 10;//ending y position changed
}
//petal at the bottom right - 5th curve
var curve4Y = 50;
var curve4X2 = width-50;
var color11=255;
var color12=65;
var color13=101;
var colorchange=0;
for (var i4 = 0 ; i4 < 50 ; i4 ++) {
colorchange+=5;//color gradient between lines
stroke(color11,color12+colorchange,color13);
line(width, curve4Y, curve4X2, height);
curve4X2 -= 10;
curve4Y += 10;
}
//top left petal, on the front - 6th curve
var curvein2X = width/2;
var curvein2Y2 = height/2;
var color41=255;
var color42=125;
var color43=125;
var colorchange4=0;
for (var i6 = 0 ; i6 < 80 ; i6 ++) {
colorchange4+=3;
stroke(color41,color42+colorchange4,color43);
line(curvein2X, 0, 0, curvein2Y2);
curvein2X -= 10;
curvein2Y2 += 10;
}
push();//to avoid changing color and stroke for other variables
noStroke();
fill(255,255,255);
ellipse(width/2,height/2-20,135,135);
pop();
//middle spinning flower
if (mouseX>110&mouseX<270&&mouseY>90&&mouseY<200){
//when mouse approaches the middle, circle appears
for(var ii = 1; ii <=100; ii+=0.1) {//set to 100 so it will keep spinning
angle+=30;//changing variable for spinning
stroke(255, 114, 115);
line((width/2-20)+computeX(3,angle), (height/2+20)+computeY(3,angle),
width/2+computeX(70,angle+140), (height/2-20)+computeY(70,angle+140));
//the inspiration came from deliverables
}
}
}
function computeX(r,angle) {//creating own function to cauculate the spinning circle
return r*cos(angle);
}
function computeY(r,angle) {
return r*sin(angle);
}
For this project, I had a really hard time to figure out what I really want to do because I personally don’t like string art which seems to be too scientific for me. However, after seeing the provided examples, I start to understand its beauty. I first analysed the Holly Hatfield’s blog on “7th Grade String Art” to figure out the algorithm. Once I understood how curves were created, my project became easier. My intention was to create a unique style of an eye where the spinning eyeball will appear once your mouse is on the pupil. After I finished creating the project, I felt my algorithm was too simple so I started figuring out how to make gradient curves (which is shown and explained in the comments). The whole process was fun and improved my understanding of this language.