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.