I started this project because I was inspired by the spokes on the bike. They looked like something that would lend itself to string art. After that, I wanted to make it look like the bike was moving so I had the positions of the spokes change and added the cactus in the back. Additionally, the color of the sky changes over time.
sketch
//Nakshatra Menon
//Section C
function setup() {
createCanvas(400, 300);
background(200);
}
var bikeWheel = 50;
var heightGround = 250;
var wheel = 1
var numLines = 10
var color3 = 100
var cactusX = 500
var cactusY = 200
function draw() {
background(246, 235, 216);
var skyX = 0
var skyX2 = 600
var skyY2 = 125
for (var skyY = 0; skyY<250; skyY+= 8){ //drawing the lines for sky
strokeWeight(.5);
stroke(71, 61, color3)
line(skyX, skyY, skyX2, skyY2);
}
var x1 = 0;
var y1 = 300;
var x2 = 400;
var y2 = 250;
var y3 = 275
//ground
for (var y1=300; y1>=250; y1+=-2) { //ground right up
stroke(159, 135, 94);
strokeWeight(1);
line(x1, y1, x2, y2);
}
for (var y2; y2<= 300; y2 +=2){ //ground left up
stroke(82, 66, 38);
strokeWeight(1);
line(x1, y1, x2, y2);
}
for(var y3 = 275; y3 <= 300; y3 +=2){ //ground across
stroke(198, 184, 153);
line(x1, y3, x2, y3);
}
//cactus
fill(53, 68, 52);
ellipse(cactusX-20, cactusY, 35, 15); // left
ellipse(cactusX+20, cactusY-20, 45, 15); // right arm
ellipse(cactusX-35, cactusY-12, 10, 25); // top left
ellipse(cactusX, cactusY, 20, 100); //main
ellipse(cactusX+40, cactusY-30, 5, 15); //right top
// bike wheel arcs
noFill();
strokeWeight(7);
stroke(115, 45, 4);
arc(100, heightGround-bikeWheel-5, 2*bikeWheel, 2*bikeWheel, radians(190), radians(0)); // arc on left tire
arc(300, heightGround-bikeWheel-5, 2*bikeWheel, 2*bikeWheel, radians(190), radians(0)); //arc on right tire
// bike from right wheel
push();
translate(300, heightGround-bikeWheel); //moving wheel to correct place
rotate(radians(-163)) // rotating line 9 degrees evertime it draws a new line
line(0,0,60,bikeWheel+45);
line(50, bikeWheel+45, 70, bikeWheel+55 ) // far handle // drawing vertical line
line(60, bikeWheel+45,80, bikeWheel+45) // close handle
pop();
// bike from left wheel
push();
translate(100, heightGround-bikeWheel); //moving origin to correct place
rotate(radians(-163)) // rotating lines
line(-60,bikeWheel-30,-150,bikeWheel+70); // across
line(0,0,-60,bikeWheel-30); // line to the line holding seat // drawing vertical line
line(-60, bikeWheel-30, -20, 90) // line holding up seat
push();
rotate(radians(-30));
ellipse(-60, 70, 60, 6);
pop();
line(0,0,-30,bikeWheel+15); // line 2 to the line holding seat
line(-30,bikeWheel+15, -150, bikeWheel+70); //across 2
pop();
// bike wheel left
if(wheel <= 1){
for(var i=0; i<4*numLines; i += 1){ // how many times it runs (4*numlines to get it to 360)
stroke(64, 38, 22); // shade of brown
strokeWeight(.5);
push();
translate(100, heightGround-bikeWheel); //moving wheel to correct place
rotate(radians((i/2)*180/numLines)) // rotating line 9 degrees evertime it draws a new line
line(0,0,0,bikeWheel); // drawing vertical line
pop();
}
}
if ( wheel <= 2 & wheel > 1){
for( var i=0; i<6*numLines; i += 1){ // how many times it runs (4*numlines to get it to 360)
stroke(64, 38, 22); // shade of brown
strokeWeight(.5);
push();
translate(100, heightGround-bikeWheel); //moving wheel to correct place
rotate(radians((i/3)*180/numLines)) // rotating line 9 degrees evertime it draws a new line
line(0,0,0,bikeWheel); // drawing vertical line
pop();
}
}
// bike wheel right
if(wheel <= 1){
for(var i=0; i<4*numLines; i += 1){ // how many times it runs (4*numlines to get it to 360)
stroke(64, 38, 22); // shade of brown
strokeWeight(.5);
push();
translate(300, heightGround-bikeWheel); //moving wheel to correct place
rotate(radians((i/2)*180/numLines)) // rotating line 9 degrees evertime it draws a new line
line(0,0,0,bikeWheel); // drawing vertical line
pop();
}
}
if ( wheel <= 2 & wheel > 1){
for( var i=0; i<6*numLines; i += 1){ // how many times it runs (4*numlines to get it to 360)
stroke(64, 38, 22); // shade of brown
strokeWeight(.5);
push();
translate(300, heightGround-bikeWheel); //moving wheel to correct place
rotate(radians((i/3)*180/numLines)) // rotating line 9 degrees evertime it draws a new line
line(0,0,0,bikeWheel); // drawing vertical line
pop();
}
}
//bike tire left
push();
noFill();
strokeWeight(4);
stroke(64, 38, 22)
translate(100, heightGround-bikeWheel);
circle(0,0,2*bikeWheel); // drawing the tire
pop();
//bike tire right
push();
noFill();
strokeWeight(4);
stroke(64, 38, 22)
translate(300, heightGround-bikeWheel);
circle(0,0,2*bikeWheel);
pop();
wheel += .1 // wheels move
if (wheel > 2){
wheel = 0;
}
color3 += .5 // color of sky changes
if (color3 > 300){
color3 = 100
}
cactusX += -5 // cactus moves
if (cactusX < -100){
cactusX = 500
}
}