sbrl/Parallax-Bicycle
sbrl/Parallax-Bicycle
1
0
Fork 0
Code Issues Pull requests Activity

Add simple handlebars and pedals.

Browse source
This commit is contained in:
Starbeamrainbowlabs 2016-06-13 14:39:24 +01:00
parent cf63528e0e
commit e0c676280e
2 changed files with 124 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
Bicycle.js
View file

@ -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

3
renderer.js
View file

@ -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);
}