background preloader

Applications, games, tools and tutorials using HTML5 canvas and JavaScript - Canvas Demos

Applications, games, tools and tutorials using HTML5 canvas and JavaScript - Canvas Demos
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! 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.

Rectangle World – HTML5 Canvas and JavaScript Tutorials In my previous couple of posts, I explored some methods for coding some imperfection into the drawing of basic geometric shapes, where the imperfection was created through the use of a fractal subdivision process. First I drew circles, then rectangles. These imperfect curves have proven to be a rich source for some experiments in generative art, and below I share several variations on a common theme. Click on each screencap to see randomized images generated in real time. An introduction to the Canvas 2D API If the <video> element is the poster boy of HTML5, then <canvas> is definitely Danny Zuko. The <canvas> element is (still) part of the HTML5 specification, but the 2D drawing API has been moved into a separate document (in case you go looking and can’t find it). <canvas> has a wealth of features, like: drawing shapes,filling colours,creating gradients and patterns,rendering text,copying images, video frames, and other canvases,manipulating pixels, andexporting the contents of a <canvas> to a static file.

Tutorial: Simple game with HTML5 Canvas - part 1 Check other language versions: [RUSSIAN] Tutorial: Simple game with HTML5 Canvas Part 1 - Introduction & Background Part 2 - Character & Animation Part 3 - Physics & Controls Part 4 - Platforms & Collisions Part 5 - Scrolling & Game States If you are interested in news and updates of that tutorial just follow me on twitter: [MichalBe's Twitter] Because 10KApart is closed now, and we are all waiting for the results, it is good time to remind my very simple "Stairs to heaven" game and explain in details how it was made. StH is very simple clone of Doodle Jump, but to be honest I was inspired by Icy Tower and discover DJ after I submit StH to the competition. Never mind.

20 Shockingly Cool HTML5 Canvas Applications HTML5 offers a wide variety of advanced functionality over what HTML was originally capable of. Perhaps the most powerful aspect of HTML5 is the HTML5 canvas. The canvas element is a drawable region defined in HTML code with and attributes. Homepage - Javascript Game Tutorial Table of Contents IntroductionGames ExamplesGame LogicGraphicsAudio User Input Save Games Cookies Server-side Other Resources Introduction Programming a game in Javascript is a lot like programming a game in any other language. That being said, there are a number of differences when programming within the web-browser that makes programming a javascript game, both a fun and rewarding challenge. The goal of this document is to serve as a repository for many of the ideas that I have discovered or developed to achieve a variety of effects that are possible today.

Getting Entangled with HTML5 Canvas Introduction This past spring (2010) I took interest in the rapidly increasing support for HTML5 and related technologies. At the time, a friend and I had been challenging each other in two-week game development competitions to hone our programming and development skills as well as bring to life the game ideas we were constantly tossing at each other. Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2] Howdy, guys, it’s Mike here again and this is the second part of our “Basic Web Design Video Course”. This time we will talk about the tools needed before starting out with HTML and CSS, then we will learn the most commonly used HTML tags. For this tutorial, we will only cover the tags that are very useful to beginners, we will cover more tags at a later time. Then, we will style the tags using basic CSS properties. No worries guys, in the next videos we will go more in-depth and learn together.

Part 2: The essential collection of visualisation resources This is the second part of a multi-part series designed to share with readers an inspiring collection of the most important, effective, useful and practical data visualisation resources. The series will cover visualisation tools, resources for sourcing and handling data, online learning tutorials, visualisation blogs, visualisation books and academic papers. Your feedback is most welcome to help capture any additions or revisions so that this collection can live up to its claim as the essential list of resources. This second part presents the prominent and powerful data visualisation programming languages and environments that dominate the creative engineering that sits behind today’s design output. Please note, I may not have personally used all the tools presented here but have seen sufficient evidence of their value from other sources.

gameQuery - a javascript game engine with jQuery The API has changed since this tutorial was written and it has not been updated yet, please have a look at the migration guide. In this tutorial I will guide you into making a simple javascript game from scratch. I’ve chosen a very basic side scrolling shooter for this first tutorial. 10 Best HTML5 Canvas Applications The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bit map and does not have a built in scene graph.Here are some great examples of HTML5 Canvas Applications. Canvas Sphere Canvas Sphere by Emil Korngold renders a 2D projection of the 3D points of a sphere using a tiny sprite 3D engine.

reveal.js The HTML Presentation Framework Hello There reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Tutorial: create a basic JavaScript game using our game template MSDN Library Design Tools Development Tools and Languages Have a Field Day with HTML5 Forms Forms are usually seen as that obnoxious thing we have to markup and style. I respectfully disagree: forms (on a par with tables) are the most exciting thing we have to work with. Here we’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques. I promise you will want to style your own forms after you’ve read this article.

Related:  HTML5 Part 1html5 1HTML5HTML5 Canvas