Image Image Image Image Image
Scroll to Top

To Top

Prototypes

Javascript Animations: Lesson 8 – Acceleration and Gravity!

On 08, Feb 2016 | 8 Comments | In General, HTML5, JavaScript, Learning, Prototypes | By synergyseeker

 

Acceleration! The change of velocity over time. So, if velocity is the change of speed over time, this is the change of that velocity over time. This could be changing direction, speeding up or slowing down. Really it is just another vector applied to another over time. Because it is continually added it increases the magnitude of the that initial vector over time.

Read more…

Javascript: Random Spheres Trig

On 05, Feb 2016 | 13 Comments | In 3D, General, HTML5, JavaScript, Learning, Prototypes, The Lab, WebGL | By synergyseeker

If you have been following along with the Learning tutorials so far, you’ll recognize the basis of experiment comes from Lesson 5 – Making multiple objects move  In this demo, I am using radial gradient fills, a range of colors, and some good ole fashion trigonometry to create a nice 3D  effect.

Check it out here: 3D Spheres on Canvas Demo

Read more…

HTML5 360 Panorama

On 02, Feb 2016 | 4 Comments | In 3D, Games, General, HTML5, JavaScript, Prototypes, The Lab | By synergyseeker

I recently found myself in need of a 360 panorama. I wanted the user to be able to explore using the mouse or touch and zoom in and out. I wanted simple, clean animation. Most important it had to work on mobile and older browsers ( IE9+ ). This meant a NO FLASH , and NO WebGL or plugins solution.

After looking around at a number of potential plugins and players, I discovered as you may have, that there is not much out there. Most require purchase of a license or are not fully developed.

Read more…

Javascript Animations: Lesson 7.5 – Vectors as forces to move player

On 02, Feb 2016 | 7 Comments | In Games, HTML5, JavaScript, Learning, Prototypes | By synergyseeker

Ok so we are making a game. Well not really a game, but if we were, we might need a  player object. So we have a player object a really awesome cool triangle. Lame, I know, but actually I loved asteroids and well the little dude was just a triangle. So we have a trianlge and we are going to make it rotate and move around using our learnings from previous lessons. So if you are totally lost jump back and read on Vectors and if you are really, really lost jump back and read from the start about animations.

Read more…

Javascript Animations: Lesson 7 – Vectors

On 29, Jan 2016 | 10 Comments | In Games, HTML5, JavaScript, Learning, Prototypes, WebGL | By synergyseeker

Vectors. Yep Vectors. So what is a vector? A vector is a magnitude ( a number ) and a direction. These 2 elements are a vector. So speed is not a vector, because it is just a magnitude, but velocity is a vector because it tells how fast and in what direction something is going.

Read more…

25

Jan
2016

6 Comments

In HTML5
JavaScript
Learning
Prototypes

By synergyseeker

Javascript Animations: Lesson 6 – ArcTangent to find angles

On 25, Jan 2016 | 6 Comments | In HTML5, JavaScript, Learning, Prototypes | By synergyseeker

Screen Shot 2014-02-28 at 5.30.09 PMOk, so let’s say we have a video game and your character runs around.  The bad guys tend to follow you and look towards where you are. Let’s make a simple demo to illustrate this. We are going to make a triangle bad guy that flies around. He points where the mouse is on the screen.

If you recall the TAN is the opp/adj of an angle. The inverse TAN is the inverse of this value. So if we have a point at the origin and another at a distance ( x, y) from that origin. We can break the x,y into component lengths of x being the adj and the y being the opp.

Read more…

21

Jan
2016

2 Comments

In HTML5
JavaScript
Learning
Prototypes

By synergyseeker

Javascript Animations: Lesson 5 – Moving multiple objects

On 21, Jan 2016 | 2 Comments | In HTML5, JavaScript, Learning, Prototypes | By synergyseeker

Moving multiple objects is a bit misleading, if you have been reading along to this point. As you might recall from lesson 1, we are actually drawing a new image on the screen each frame , and not actually “moving” anything. However we create this illusion of motion by moving or changing things 1 frame at a time. Once we code our animation the result is motion.

Read more…

18

Jan
2016

9 Comments

In JavaScript
Learning
Prototypes
WebGL

By synergyseeker

Javascript Animations: Lesson 4 – Moving along paths

On 18, Jan 2016 | 9 Comments | In JavaScript, Learning, Prototypes, WebGL | By synergyseeker

400px-Defining_Trigonometric_Functions_Figure_4.svgSo now that we can move objects using some math. Let’s make the path more interesting than along X or Y. Let’s start with a circle. So recalling our trig functions, we can derive that any point along a circular path is x distance and y distance away from the origin or centre of the circle.  So to find the values of x and y at point (x,y) we use:

Read more…

14

Jan
2016

17 Comments

In JavaScript
Learning
Prototypes

By synergyseeker

Javascript Animations: Lesson 3 – Simple Animation

On 14, Jan 2016 | 17 Comments | In JavaScript, Learning, Prototypes | By synergyseeker

Screen Shot 2014-02-25 at 3.23.03 PMSo let’s make something move already!

Here is what we are building.

A ball moving up and down with easing applied on the center of the motion. The ball also grows and shrinks. There is easing applied in the shrinking as it reaches the edges. The up down motion is controlled using COSINE and the growing and shrinking is controlled using SINE. This makes sense if you remember the description of the SIN and COS functions from the last lesson. Speaking of previous lessons… check them out here! Read more…