haewanp – Project 04 – String Art

String Art

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