Josh Robertson / @hossman333

- Domo
- Open Source Enthusiast
- Snowflake
- Codepen

- Briefly talk about the Drawing API
- Basic Trigonometry for animation
- Basic motion (Velocity & Acceleration)

- Graphics with javascript
- Drawing pad controlled with js
- The API provides the drawing functionality.

Lots of demos.

- strokeStyle
- fillStyle
- lineWidth
- beginPath()
- closePath()
- stroke()
- lineTo(x, y)
- moveTo(x, y)
- arc(x, y, radius, startAngle, endAngle [, anticlockwise])
- clearRect(x, y, width, height)
- fillRect(x, y, width, height)
- save()
- restore()

```
var canvas = document.getElementById('example');
var ctx = canvas.getContext('2d');
```

```
ctx.clearRect(0, 0, canvas.width, canvas.height);
```

- Math != Fear
- Math.sin
- Math.cos

radians = degrees * Math.PI / 180

degrees = radians * 180 / Math.PI

```
var canvas = document.getElementById('example');
var ctx = canvas.getContext('2d');
var radius = 50;
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, Math.PI);
ctx.stroke();
```

Live Example

```
var canvas = document.getElementById('example');
var ctx = canvas.getContext('2d');
var radius = 50;
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, Math.PI * 2);
ctx.stroke();
```

Live Example

```
var canvas = document.getElementById('example');
var ctx = canvas.getContext('2d');
var radius = 50;
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, Math.PI / 2);
ctx.stroke();
```

Live Example

```
var canvas = document.getElementById('example');
var ctx = canvas.getContext('2d');
var radius = 50;
var degrees = 180;
var radians = degrees * Math.PI / 180;
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, radians);
ctx.stroke();
```

Live Example

```
var canvas = document.getElementById('example');
var ctx = canvas.getContext('2d');
var radius = 50;
var degrees = 360;
var radians = degrees * Math.PI / 180;
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, radians);
ctx.stroke();
```

Live Example

```
var canvas = document.getElementById('example');
var ctx = canvas.getContext('2d');
var radius = 50;
var degrees = 90;
var radians = degrees * Math.PI / 180;
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, radians);
ctx.stroke();
```

Live Example

Live Example

```
ctx.clearRect(0, 0, canvas.width, canvas.height);
```

- RequestAnimationFrame (of course)
- Create a circle (ball)
- (x, y)
- Loop it! (for loop)
- Random size? Sure!

Live Example

- Velocity = Speed and
**Direction** **V**elocity on**x**= horizontal movement**V**elocity on**y**= vertical movement

Live Example

Live Example

```
var angle = 32.3; // eh, whatever you wannnt bro
var radians = angle * Math.PI / 180;
var vx = Math.cos(radians) * speed;
var vy = Math.sin(radians) * speed;
```

Live Example

```
var x = 0;
var vx = 0;
var ax = 0.04;
requestAnimationFrame(function draw() {
vx += ax;
x += vx;
requestAnimationFrame(draw);
});
```

Live Example
```
var y = 0;
var vy = 0;
var ay = 0.04;
requestAnimationFrame(function draw() {
vy += ay;
y += vy;
requestAnimationFrame(draw);
});
```

Live Example
```
var x = 0;
var y = 0;
var vx = 0;
var vy = 0;
var angle = 45;
var force = 0.01;
requestAnimationFrame(function draw() {
var radians = angle * Math.PI / 180;
var ax = Math.cos(radians) * force;
var ay = Math.sin(radians) * force;
vx += ax;
vy += ay;
x += vx;
y += vy;
requestAnimationFrame(draw);
});
```

Live Example
Live Example

- Github - Hossman333
- Twitter - @hossman333
- Codepen - hossman
- hossman333@gmail.com
- Foundation HTML5 Animation with JavaScript