diff --git a/Bicycle.js b/Bicycle.js index 4e5178e..118eeec 100644 --- a/Bicycle.js +++ b/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 diff --git a/renderer.js b/renderer.js index 09f8839..05e80bd 100644 --- a/renderer.js +++ b/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.speed = this.speed; + this.bicycle = new Bicycle(new Vector(this.canvas.width / 2, this.canvas.height * 0.9), this.speed); this.visibleObjects.push(this.bicycle); }