Canvas Demos

Getting Started with Three.js

Andi Smith — Fri, 29 Jul 2011 21:30:52 +0000

Want to get started with Mr. doob’s 3D library Three.js? Paul Lewis has created this great tutorial which will help you do just that.

Let's get started!

In this tutorial, Paul covers the basics of three.js including setting a scene; making a mesh and adding materials and lights. If you want to get started with three.js, now’s your chance!

http://aerotwist.com/lab/creating-particles-with-three-js/

GLGE

Andi Smith — Fri, 29 Jul 2011 09:30:07 +0000

GLGE, by Paul Brunt, is a JavaScript library intended to ease the use of WebGL masking the involved nature of developing WebGL from the developer so that they can spend their time creating richer content for the web.

Create awesome WebGL demos with GLGE

GLGE’s main features include: keyframe animation; perpixel lighting directional lights, spot lights and point lights; normal mapping; skeletal animation; depth shadows; shader based picking; environment mapping; reflections and refractions.

Keep an eye on CanvasDemos.com over the coming weeks for WebGL demos using GLGE.

Alex the Allegator 4

Andi Smith — Thu, 28 Jul 2011 21:30:40 +0000

A long time ago, I used to run an independant games company called Natomic Studios and one of our fellow indie developer friends was Johan Peitz of Free Lunch Design who in 2003 created Alex the Allegator 4 for a four color retro games competition. It was a awesome little platform game and I was delighted to see it revived recently when Oliver submitted this wonderful HTML5 tribute version of Alex the Allegator 4 running on MelonJS.

Awesome retro platforming

Alex the Allegator 4 is a pure jump’n'run, just like the old classic platform games. Guide Alex through the jungle in order to save his girlfriend Lola from evil humans who want to make a bag of her.

Move left & right with the arrow keys, use X to jump and press left control to spit eggs (if you have some available).

The latest Chrome is recommended.

Magician – Fairy Rescue

Andi Smith — Thu, 28 Jul 2011 09:30:58 +0000

Brunda has submitted this simple yet addictive shoot ‘em up called “Magician – Fairy Rescue”. Using the magic wand at the bottom of the screen, you must free the fairies from the bubbles so they can float upwards to safety but make sure they avoid the monsters on their way up.

Magician - Fairy Rescue

Move the mouse around the game area to aim the magic wand at your desired angle, then click the mouse to fire the magic spell. The magic spell will hit the fairy bubble and release them.

CATcher

Andi Smith — Wed, 27 Jul 2011 21:30:13 +0000

Like kitteh? Like CATcher! CATcher by Willian Carvalho is a simple game where you have to catch the falling kitties with a basket. You have 30 seconds to save as many as you can.

Catch the cats!

Use the mouse cursor to move the basket. Every 100 points you score will give you 15 more seconds of playtime.

WebGL Maze

Andi Smith — Wed, 27 Jul 2011 09:30:25 +0000

Xavier Bourry has created this 3D maze game in WebGL. The object of the game is to get through the maze – from the start to the end which are clearly marked as signposts in the sky above.

Find your way to the end!

Use the mouse to look around and move through the maze. There’s 7 levels to play.

Got a WebGL demo? Submit it to us and see it featured on Canvas Demos!

Get Started With WebGL: Draw a Square

Andi Smith — Tue, 26 Jul 2011 21:30:28 +0000

Bartek Drozdz has written a tutorial in .net magazine for any aspiring WebGL developers which shows you how to… wait for it… draw a square!

Why so simple? Bartek explains..

The first encounter with WebGL can be intimidating. The API has nothing of the friendly object-oriented libraries you might have used. WebGL is based on OpenGL, which is a rather old type C-style library. It features a long list of functions used to set different states and pass data to the GPU.

Shapes and shaders

The tutorial explains how the WebGL context works; how to create shaders; how the co-ordinates system works and how to set the drawing mode.

No Comply

Andi Smith — Tue, 26 Jul 2011 09:30:37 +0000

In No Comply, Mozillian Paul Rouget invites us to animate the soul of your songs using WebGL and AudioAPI technology. No comply puts us in a urban world with 2D retro characters from 8 bit fighting games of the past fighting in a 3D arena.

Retro in 3D

Comments from the Author:

In addition to cutting edge graphics with WebGL and canvas, we also wanted to explore how far we could push the new Firefox 4 Audio API we’d developed. The Audio Data API allows us to do many new things with the HTML5 audio and video tags, such as outputting generated audio and revealing realtime audio data to JavaScript.

Check it out!

JavaScript 2D Particle System

Andi Smith — Mon, 25 Jul 2011 21:30:07 +0000

Jarrad Overson has created this awesome JavaScript 2D particle system. In Jarrad’s demo, you can drag the particle emitters and fields to create complex designs and patterns.

Candle particles

Comments from the Author:

Control particles in a realtime gravity sandbox. Add attracting or repelling forces to make beautiful orbits or use your mouse to add chaos to your environment.

Click on an emitter to change settings and drag it to move it. Add new fields and emitters with the buttons on the righthand menu; and control other visuals from the menu buttons.

Performs best in the latest Chrome and Firefox.

Mutant Zombie Monsters

Andi Smith — Mon, 21 Mar 2011 10:30:55 +0000

Bill Scott has created this zombie shooting platform game using the ImpactJS engine.

Brraaainnns!

Comments from the Author:

Mutant Zombie Monsters is a retro platform zombie shooter made entirely with JavaScript that is displayed on an HTML5 canvas. This game works on mobile browsers as well, adjusting a few things if the user is on a mobile device.

Use the arrow keys to move, C to shoot and X to throw a scythe. Good luck!