Jiyoung Ahn _ String Art

sketch


var num = 250;
var aS;//angle of the shape 
var increment; //increase of spacing
var radi; //radius
var radS; //spiral shape
var xI; //x increment
var yI; //y increment
var col1; //first color
var col2; //second color
var moX; //mouse
var moY; //mouse


function setup() {
    createCanvas(640, 480);
    radi = (width/2)-40;
    increment = 5;
    background('lightgreen');
    col1 = color('yellow');
    col2 = color('lightpink');
    
}

function draw() {
	noStroke();
	ellipse(0,400,260,260);
	fill('white');

	ellipse(560,0,220,220);
	fill('white');

	ellipse(210,120,180,180);
	fill('white');

	ellipse(490,500,320,320);
	fill('white');
	
   if(mouseX != moX) {
      var xI = width/2
       var yI = height /2
       for (var i = 1; i < num; i++){
          aS = i * increment;
          mult = i/num;
          radS = mult * radi;

          x = width/2 + cos(aS) * radS;
          y = height/2 + sin(aS) *radS;

          stroke(lerpColor(col2, col1, mult));
          strokeWeight(0.5);
          line(xI, yI, x,y);
          xI = x;
          yI = y;
       }   
      
       for (var i = 1; i < num; i++){
          aS = i * increment;
          mult = i/num;
          radS = mult * radi;

          x = width/2 + cos(aS) * radS;
          y = height/2 + sin(aS) *radS;

          stroke(lerpColor(col2, col1, mult));
          strokeWeight(0.03);
          line(xI+80, yI+80, x+80,y+80);
          xI = x;
          yI = y;
		 }
		for (var i = 1; i < num; i++){
          aS = i * increment;
          mult = i/num;
          radS = mult * radi;

          x = width/2 + cos(aS) * radS;
          y = height/2 + sin(aS) *radS;

          stroke(lerpColor(col2, col1, mult));
          strokeWeight(0.03);
          line(xI-80, yI-80, x-80,y-80);
          xI = x;
          yI = y;
		 }

   } 
}

 

I tried to create string art based on a pentagon shape, and I added white ellipse shapes as a background pattern.

Leave a Reply