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.

project04-1.js

//Shariwa Sharada
//Section-A
//ssharada@andrew.cmu.edu
//Project-04

var gap = 1; //spacing between lines 
var x1 = 0; //starting point x
var x2 = 200; //mid-point x
var x3 = 400 //endpoint x
var y1 = 150; //midpoint y 
var y2 = 0; //starting point y
var y3 = 300; //end point y 


function setup(){
	createCanvas(400,300);
	strokeWeight(1); //predetermining the stroke weights of everything 	
}

function draw(){
	background(255, 247, 213);

	gap = map(mouseY, 0, 300, 3, 10);//mapping the gap size so that it is proportionate no matter the placement of the mouse
	
	var g = 150; //changing the green value
	var b = 100; //changing the blue value
	var r = 50; //changing the red value

	
	for (var i= 0; i< width; i++){ 
		
		//creating the first pair of dark green to yellow curves 
		stroke(r,g,0);
		line (x1, gap*i, gap*i, y1);//creating lines based of the start and mid points
		line (x2, gap*i, gap*i, y2);
		g += i/20; //creating a gradation in the colour range in terms of the increment
		r += i/10;

		//creating the second pair of yellow to dark green curves 
		stroke(r,g,0);
		line (gap*i, height-y1, width-x1, gap*i); //creating lines based of the end and mid points
		line (gap*i, height-y2, width-x2, gap*i);
		g += i/2;//creating a gradation in the colour range in terms of the increment
		r += i/4;
	}

	//creating the third pair of green to blue curves 
	for (var j= 0; j< width; j++){
		stroke(0,g,b);
		line (x3, gap*j, gap*j, y1); //creating lines based of the end and mid points
		line (x1, gap*j, gap*j, y3);
		g += j/20; //creating a gradation in the colour range in terms of the increment
		b += j;



	}


}

The main aim of my work was to examine the difference between larger increments and smaller increments while trying to vanish some lines into the background and keeping focus on a few of them. I wanted to explore this idea because I found it fascinating how the lines when they come together form this dense intrinsic pattern of curves that you could never imagine that they could come from straight lines – but as you drag the mouse away, you realise what actually creates the lines and it makes you wonder about the complexity of everyday simple objects like curves