Project-04: String Art

sketch

function setup() {
	createCanvas(400, 300);
 }

// ufo light variables 
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;
var angle = 0;

function draw() {
	background(20, 0, 50, 50); // opacity at 50 for shadow effect on ufo

	// trees 2 (same pattern as above)
	stroke(55, 126, 28) // dark green
	var tree2total = 8;
	var tree2x1 = 0;
	var tree2y1 = 150;
	var tree2numLines = 30;
	var tree2dx1;
	var tree2dy1;
	var tree2dx2;
	var tree2dy2;
	for(var i = 0; i <= tree2total; i += 1) {
		line(tree2x1, height, tree2x1 + 25, tree2y1);
		line(tree2x1 + 25, tree2y1, tree2x1, height);
		tree2x1 += 50;
		tree2dx1 = 25/tree2numLines;
		tree2dy1 = 150/tree2numLines;
		tree2dx2 = -25/tree2numLines;
		tree2dy2 = -150/tree2numLines;
		
		var tree2linesx1 = tree2x1 - 50;
		var tree2linesy1 = height;
		var tree2linesx2 = tree2x1 - 25;
		var tree2linesy2 = tree2y1;
		
		for(var j = 0; j <= tree2numLines; j += 1) {
			line(tree2linesx1, tree2linesy1, tree2linesx2, tree2linesy2); 
			line(tree2linesx1 - 25, tree2linesy2, tree2linesx2 - 25, tree2linesy1); //fill tree w lines from both sides
			tree2linesx1 += tree2dx1;
		    tree2linesy1 += tree2dy1;
		    tree2linesx2 -= tree2dx2;
		    tree2linesy2 -= tree2dy2;
		}
	}
	
	// trees 1
	stroke(116, 198, 55) // green
	var treetotal = 8; // number of iterations of trees
	var treex1 = -20; // starting tree line location
	var treey1 = 170;
	var treenumLines = 20;
	var treedx1;
	var treedy1;
	var treedx2;
	var treedy2;
	for(var i = 0; i <= treetotal; i += 1) { // iterating through trees 
		line(treex1, height, treex1 + 25, treey1); // starting lines
		line(treex1 + 25, treey1, treex1, height);
		treex1 += 50; // next tree x location
		treedx1 = 25/treenumLines;
		treedy1 = 130/treenumLines;
		treedx2 = -25/treenumLines;
		treedy2 = -130/treenumLines;

		var treelinesx1 = treex1 - 50; // lines to fill trees
		var treelinesy1 = height;
		var treelinesx2 = treex1 - 25;
		var treelinesy2 = treey1;
		
		for(var j = 0; j <= treenumLines; j += 1) { // iterating through fill lines
			line(treelinesx1, treelinesy1, treelinesx2, treelinesy2); 
			line(treelinesx1 - 25, treelinesy2, treelinesx2 - 25, treelinesy1); //fill tree w lines from both sides
			treelinesx1 += treedx1;
		    treelinesy1 += treedy1;
		    treelinesx2 -= treedx2;
		    treelinesy2 -= treedy2;
		}
	}

	//stars
	randomSeed(104); //prevents completely random stars each iteration
	var stars = 100; // stars to be drawn
	for( var i = 0; i <= stars; i += 1) { //iterating to draw each star 
		fill(255);
		noStroke();
		circle(random(400), random(300), random(4)) //random size and placement of stars in sky 
	}

	// spinning abducted snowman
	push();
	translate(mouseX, 220); // to spin around center of snowman
	rotate(radians(angle));
	fill(255);
	noStroke();
	ellipse(0, -10, 10, 10); // top
	pop();
	push();
	translate(mouseX, 220);
	rotate(radians(angle));
	fill(255);
	noStroke();
	ellipseMode(CENTER);
	ellipse(0, 0, 15, 15); // middle
	pop();
	push();
	translate(mouseX, 220);
	rotate(radians(angle));
	fill(255);
	noStroke();
	ellipse(0, 10, 18, 18); // bottom
	pop();
	angle += 2; // to spin slowly

	// ufo light (same pattern as trees but no iterations)
	stroke(249, 224, 45, 50); // opacity is lighter (like light)
	line(mouseX, 50, mouseX -50, height); // depends on mouseX position
	line(mouseX + 50, height, mouseX, 50);
 	dx1 = -50/numLines;
	dy1 = (height - 50)/numLines;
	dx2 = -50/numLines;
	dy2 = (50 - height)/numLines;
	//ufo light lines 
	var x1 = mouseX;
	var y1 = 50;
	var x2 = mouseX + 50;
	var y2 = height;
	for( var i = 0; i <= numLines; i += 1) {
		line(x1, y1, x2, y2);
		line(x1 - 50, y2, x2 - 50, y1);
		x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
	}

	//ufo
	fill(220, 226, 248);
	ellipse(mouseX, 60, 100, 30);
	ellipse(mouseX, 50, 50, 40);
	fill(249, 45, 218);
	circle(mouseX, 30, 10);
}







For this project, I thought a spotlight can be aesthetically shown using string art. To make it more interesting and fun, I decided to make the spotlight come down from a UFO abducting a snowman that can move by the x position of the mouse. I also thought pine trees can be drawn using string art so I made a forest of them using for loops.

Leave a Reply