Add simple handlebars and pedals.

Bicycle.js

@@ -2,22 +2,33 @@
 
 class Bicycle
 {
-	constructor(inPos)
+	constructor(inPos, inSpeed)
 	{
 		this.pos = inPos;
+		this.speed = inSpeed;
 		
 		this.wheelLeft = new Wheel(new Vector(-47, 20), 30, 200);
 		this.wheelRight = new Wheel(new Vector(47, 20), 30, 200);
 		
 		this.mainColour = "#4f32d2";
 		this.seatColour = "#312b50";
+		this.pedalReflectorColour = "rgb(214, 104, 14)"
+		
 		this.seatSize = 10;
+		this.gearWheelSize = 7;
+		this.pedalRadius = 13;
+		this.pedalSize = 4;
+		this.pedalSpeed = this.speed * 0.02;
+		
+		this.pedalRotation = 0;
 	}
 	
 	update(dt)
 	{
 		this.wheelLeft.update(dt);
 		this.wheelRight.update(dt);
+		
+		this.pedalRotation += this.pedalSpeed * dt;
 	}
 	
 	render(context)
@@ -25,12 +36,15 @@ class Bicycle
 		context.save();
 		context.translate(this.pos.x, this.pos.y);
 		
+		var pedalPosition = this.wheelRight.pos.clone().subtract(new Vector(35, 0)),
+		seatPosition = pedalPosition.clone().add(new Vector(15, -40));
+		
+		this.renderPedalsBack(context, pedalPosition)
+		
 		this.wheelLeft.render(context);
 		this.wheelRight.render(context);
 		
 		// Bicycle frame
-		var pedalPosition = this.wheelRight.pos.clone().subtract(new Vector(35, 0)),
-			seatPosition = pedalPosition.clone().add(new Vector(15, -40));
 		context.beginPath();
 		context.moveTo(this.wheelLeft.pos.x, this.wheelLeft.pos.y);
 		context.lineTo(this.wheelLeft.pos.x + 20, this.wheelLeft.pos.y - 52);
@@ -46,6 +60,16 @@ class Bicycle
 		context.strokeStyle = this.mainColour;
 		context.stroke();
 		
+		context.beginPath();
+		context.moveTo(this.wheelLeft.pos.x + 20 + 14, this.wheelLeft.pos.y - 52 - 6);
+		context.lineTo(this.wheelLeft.pos.x + 20 - 18, this.wheelLeft.pos.y - 52 + 11);
+		
+		context.lineWidth = 3;
+		context.strokeStyle = this.mainColour;
+		context.stroke();
+		
+		this.renderPedalsFront(context, pedalPosition);
+		
 		this.renderSeat(context, seatPosition);
 		
 		context.restore();
@@ -66,6 +90,102 @@ class Bicycle
 		
 		context.restore();
 	}
+	
+	renderPedalsFront(context, pos)
+	{
+		context.save();
+		context.translate(pos.x, pos.y);
+		
+		// Pedal attachment circle
+		context.beginPath();
+		context.ellipse(0, 0, this.gearWheelSize * 0.2, this.gearWheelSize * 0.2, 0, 0, Math.PI * 2, false);
+		context.lineWidth = 2;
+		context.strokeStyle = this.wheelLeft.spokeColour;
+		context.stroke();
+		context.strokeStyle = "rgba(0, 0, 0, 0.8)";
+		context.stroke();
+		
+		// Front pedal
+		var pedalOuterPosition = new Vector(this.pedalRadius * Math.sin(this.pedalRotation), this.pedalRadius * Math.cos(this.pedalRotation));
+		context.beginPath();
+		context.moveTo(0, 0);
+		context.lineTo(pedalOuterPosition.x, pedalOuterPosition.y);
+		
+		context.strokeStyle = this.wheelLeft.spokeColour;
+		context.stroke();
+		context.strokeStyle = "rgba(0, 0, 0, 0.4)";
+		context.stroke();
+		
+		this.renderPedal(context, pedalOuterPosition);
+		
+		context.restore();
+	}
+	
+	renderPedalsBack(context, pos)
+	{
+		context.save();
+		context.translate(pos.x, pos.y);
+		
+		// Outer gear wheel
+		context.beginPath();
+		context.ellipse(0, 0, this.gearWheelSize, this.gearWheelSize, 0, 0, Math.PI * 2, false);
+		
+		context.lineWidth = 3;
+		context.strokeStyle = this.wheelLeft.spokeColour;
+		context.stroke();
+		
+		// Inner gear wheel
+		context.beginPath();
+		context.ellipse(0, 0, this.gearWheelSize * 0.8, this.gearWheelSize * 0.8, 0, 0, Math.PI * 2, false);
+		
+		context.lineWidth = 2;
+		context.strokeStyle = this.wheelLeft.spokeColour;
+		context.stroke();
+		context.strokeStyle = "rgba(0, 0, 0, 0.4)";
+		context.stroke();
+		
+		// Back pedal
+		var pedalOuterPosition = new Vector(this.pedalRadius * Math.sin(this.pedalRotation + Math.PI), this.pedalRadius * Math.cos(this.pedalRotation + Math.PI));
+		context.beginPath();
+		context.moveTo(0, 0);
+		context.lineTo(pedalOuterPosition.x, pedalOuterPosition.y);
+		
+		context.strokeStyle = this.wheelLeft.spokeColour;
+		context.stroke();
+		context.strokeStyle = "rgba(0, 0, 0, 0.4)";
+		context.stroke();
+		
+		this.renderPedal(context, pedalOuterPosition);
+		
+		context.restore();
+	}
+	
+	renderPedal(context, pos)
+	{
+		context.save();
+		context.translate(pos.x, pos.y);
+		
+		context.beginPath();
+		context.moveTo(-this.pedalSize, 0);
+		context.lineTo(this.pedalSize, 0);
+		
+		
+		context.lineWidth = 3;
+		context.strokeStyle = this.mainColour;
+		context.stroke();
+		context.strokeStyle = "rgba(70, 70, 70, 0.4)";
+		context.stroke();
+		
+		context.beginPath();
+		context.moveTo(-this.pedalSize * 0.5, 0);
+		context.lineTo(this.pedalSize * 0.5, 0);
+		
+		context.lineWidth = 2;
+		context.strokeStyle = this.pedalReflectorColour;
+		context.stroke();
+		
+		context.restore();
+	}
 }
 
 class Wheel

renderer.js

@@ -32,8 +32,7 @@ class Renderer
 		this.road.speed = this.speed;
 		this.visibleObjects.push(this.road);
 		
-		this.bicycle = new Bicycle(new Vector(this.canvas.width / 2, this.canvas.height * 0.9));
+		this.bicycle = new Bicycle(new Vector(this.canvas.width / 2, this.canvas.height * 0.9), this.speed);
-		this.bicycle.speed = this.speed;
 		this.visibleObjects.push(this.bicycle);
 	}