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