Workshop › Angry Birds-style Slingshot › Step 6 of 47

Pull the bird back

What we are doing

A sling is pulled back, away from the aim: if you aim up and right, the bird sits down and left of the sling. Math.cos and Math.sin turn the angle into a sideways and an up-down share.

```js
const bx = SLING.x - Math.cos(aim.angle) * aim.pull * 0.5
const by = SLING.y - Math.sin(aim.angle) * aim.pull * 0.5
ctx.fillStyle = MATERIALS.bird.color
ctx.beginPath()
ctx.arc(bx, by, BIRD, 0, Math.PI * 2)
```

What it means

Math.cos(angle) is how much of a step along the angle goes sideways, Math.sin(angle) how much goes down.
Multiplying by aim.pull makes the step that long; subtracting goes backwards from the sling.
* 0.5 only draws it at half size, so a full pull of 70 does not leave the bird far behind the sling.

Your turn

In draw, write the bx and by lines above ctx.fillStyle = MATERIALS.bird.color, and change the arc to use bx, by.

Skills: Drawing on a canvas, Velocity and gravity

← A bird in the sling The rubber band →

All steps