sijings-project04-stringArt

Sijings-StringArt

//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.