HTML5 Game Development – Lesson 4

HTML5 Game Development – Lesson 4

HTML5 Game Development – Lesson 4 Today we continue a series of articles on game development in HTML5 using canvas. Today we going to learn next elements: animation with sprites and basic work with sound. In our demonstration you will see a flying dragon. We will hear the sounds of wings all time (we will…

Creating an Image Zoomer in HTML5 Canvas

Creating an Image Zoomer in HTML5 Canvas

HTML5 canvas – Image zoomer New interesting tutorial – I will show you how you can create nice and easy Image zoomer using HTML5. Main idea – to draw a picture on the canvas, add event handlers to mousemove, mousedown and mouseup (to move the enlarged area of ??the motion while holding the mouse).

HTML5 Game Development – Navigating Your Spaceship- Lesson 3

HTML5 Game Development – Navigating Your Spaceship- Lesson 3

HTML5 Game Development – Lesson 3 Today we continue a series of articles on game development in HTML5 using canvas. Finally, today we will start adding animation, and few more interesting features. Our demonstration will include a spaceship flying through space, and a new element – the Dialogue. The dialogue will contain two pages, and…

Creating a Photo Array in WebGL

Creating a Photo Array in WebGL

Creating photo array in WebGL Today we continue HTML5 WebGL examples. I prepared a nice photo gallery for you. Images in this gallery will be replaced by a mouse click.

Creating HTML5 Image Effects App – Adding Horizontal Flip

Creating HTML5 Image Effects App – Adding Horizontal Flip

HTML5 Image Effects App – Adding Horizontal Flip Today we going to continue HTML5 canvas examples, I hope you enjoy this series of articles. Even for me, working with graphics, images brings pleasure. Sure that you like this too. Today we will be adding new filter – Horizontal Flip.

Creating an Animated 3D WebGL Demonstration

Creating an Animated 3D WebGL Demonstration

Making 3D WebGL demonstration Today we continue HTML5 canvas examples. And today we will try to begin learning WebGL. In my demonstration I will show you how to initialize WebGL and draw simple 3D object. Also we will animate this object too.

HTML5 Image Effects App – Adding Noise and Invert

HTML5 Image Effects App – Adding Noise and Invert

HTML5 Image Effects App – Adding Noise and Invert Today we continue HTML5 canvas examples, I hope you enjoy this series of articles. Even for me, working with graphics, images brings pleasure. Sure that and for you too. Today we will be adding two new filters – Noise and Invert.

Creating a Rotating Slider with Easing Effects in jQuery

Creating a Rotating Slider with Easing Effects in jQuery

Creating rotate slider with easing effects Today I decide to make another one slider (jQuery), where image is scrolled on its axis (emulating 3D). Also I will allow to use custom easing effects for switching of images. In result – this will our own jQuery plugin.

HTML5 Canvas Image Effects App – Adding Blur

HTML5 Canvas Image Effects App – Adding Blur

HTML5 Canvas Image Effects App – Adding Blur Today we continue HTML5 canvas examples, hope that you remember application which we made quite 2 weeks ago? Sure that this was very interesting to you to investigate image processing functions. Today I decided to continue and added new filter here – Blur.

Creating an Attractive Presentation with HTML5

Creating an Attractive Presentation with HTML5

Creating an Attractive Presentation with HTML5 Today we will prepare something new – presentation. And we will using all interesting what can give us HTML5. Presentation itself will contain 5 easy slides. We will able to use navigation arrow keys for sliding, spacebar, display notes, sidebar with some custom content. Here are new html5 tags…

Creating an Unbelievable HTML5 Canvas App for Online Image Enhancements

Creating an Unbelievable HTML5 Canvas App for Online Image Enhancement...

HTML5 Canvas Image Effects App Today we continue HTML5 canvas examples, I sure that this still interesting to you. Today we will make application to adjust image colors (Changing photo colors / Grayscale). We will able to make photo darker, lighter, change density of each channel (RGB), make image grayscale (and still able to play…

10 Fresh & Impressive HTML5 Canvas (and WebGL) Examples

10 Fresh & Impressive HTML5 Canvas (and WebGL) Examples

Fresh 10 HTML5 Canvas (and WebGL) examples Today I prepared new collection of interesting HTML5 examples. And today I included several demos of WebGL applications too. WebGL is software library which allow to display interactive 3D graphic within web-browser. Trust me – this is very interesting. So I’m happy to show you the most outstanding…

Creating a Photo Scrambler grid in javascript

Creating a Photo Scrambler grid in javascript

Photo grid in javascript Today we continue JavaScript examples, and today we will create effect of splitting image to pieces (transforming image into grid), plus – our pieces will moving when we will move our mouse pointer. This will pretty interesting demonstration. As we using pure javascript, our result will quite crossbrowser. I already checked…

Creating a Photo Slideshow (zoom fading) effect

Creating a Photo Slideshow (zoom fading) effect

Photo inspiration (zoom fading) effect Today we continue JavaScript examples, and our article will about using javascript in modeling of nice fading and zoom effects for set of images. As we using pure javascript, our result will quite crossbrowser. I prepared 2 modes of switching (you can switch it using added button)