Project 04 – Yugyeong Lee

sketch

//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Project-04

var spacing;
var x;				//positionX
var y;				//positionY
var b;				//colorB	
var w;				//strokeWeight

function setup() {
    createCanvas(400, 300);
    x = 0;
    y = 0;
}

function draw() {
	//background color changes based on mouseX
	b = map(mouseX, 0, width, 0, 150);
	background(b);
    
    //spacing for each loop changes based on mouseX
    spacing = map(mouseX, 0, width, 10, 20);

    //the stroke weight changes based on mouseX
    w = map(mouseX, 0, width, .5, 1);
    strokeWeight(w);

    //the four corners
    for (i = 0; i < 50; i++) {
    	stroke(255, 200, 100+i*5);
    	line(x, y+i*spacing, x+i*1.5*spacing, height);
    	line(x, height-i*spacing, x+i*1.5*spacing, y);
    	stroke(255, 200, 255-i*5)
    	line(width, y+i*spacing, width-i*1.5*spacing, height);
    	line(width, height-i*spacing, width-i*1.5*spacing, y);
    }

    //the 'diamond'-like shape in the center 
    for (i = 0; i < 15; i++) {
    	stroke(255-i*2);
    	line(0, height/2, width, height/2);  //horizontal&vertical line
    	line(width/2, y+i*spacing, width/2+i*spacing, height/2);
    	line(width/2, y+i*spacing, width/2-i*spacing, height/2);
    	line(width/2, height-i*spacing, width/2-i*spacing, height/2);
    	line(width/2, height-i*spacing, width/2+i*spacing, height/2);
    }
}

I wanted to create an interactive string art. The string art created by four quadrants base its spacing size, stroke weight, and background color gradient on the position of mouseX.