Web Design | The Highlander Blog

JavaScript animation – using EaselJS pt 2

Jan 062012

In this post I am continuing my foray into Easel.js. Here I am now actually displaying and animating pictures. So this post is about JavaScript animation – using EaselJS pt 2. We will be making this…

EaselJS animation v1

…and it will be the car that is moving across the screen.

Again you need to make up a simple html5 page and link to the easljs library…

First you need to create a stage and link it to your canvas element…

var page = document.getElementById(“canvas”);
var stage = new Stage(page); Read more...

Which web technologies?

Flash, HTML5 No Responses »

Oct 032011

In a flash class recently I was asked which technologies some one needs to be aware of and competent with when dealing with web design. In answer I quickly knocked a simple ideas chart to showcase which web technologies you need to know, and also some notes about where things are/were and where they are going…

Which web technologies

The big thing of course is html5 and Flash. As you can see from the diagram, everything Flash can do (broadly speaking) can be done in HTML5, with the caveat that HTML5 covers CSS3/JavaScript/HTML5 and things like WebGL. Read more...

Learning three.js

HTML5 No Responses »

Sep 232011

In my foray into the world of WebGL, I came across three.js, a JavaScript library for doing 3D in a web browser, with no plug-ins needed. It can render in three types – WebGL, SVG, or directly into the canvas. So I thought I would go through Three.js and see how easy it is to create a 3D scene. So, in this my first post into learning Three.js I will just create a simple shape – a sphere. Read more...

More JavaScript libraries

HTML5 No Responses »

Sep 162011

Just a quick update to my JavaScript libraries collection. Here are some more JavaScript libraries – things just seem to be getting better and better as far as JavaScript and HTML5 and the web are concerned!

three.js – A brilliant lightweight 3D engine (works with WebGL, amongst other things)

https://github.com/mrdoob/three.js/

newton.js – box2d plus raphael (does not seem to be released yet, but looks fantastic)

Dmitry Baranovskiy: newton.js: box2d + Raphael

Runtime: 5:48
Views: 2,809

paper.js - The Swiss Army Knife of Vector Graphics Scripting (looks like great fun)

http://paperjs.org/about/ Read more...

What is WebGL?

HTML5 No Responses »

Sep 092011

I have recently been taking an interest in WebGL, so I thought I would post some information about WebGL here, and also add some links to some of the examples that I have found.

What is WebGL? WebGL is a graphics library that extends JavaScript to allow it to generate some truly spectacular 3D graphics, within the browser, with no plug-ins needed. It uses the computer’s GPU (Graphics Processing Unit), and as such is a fairly low-level language (read: complicated).

WebGL interactive water example / (http://madebyevan.com/webgl-water/) Read more...

WebGL Water Simulation

Runtime: 1:14
Views: 83,693

HTML5/CSS3 experiments

HTML5 No Responses »

Jul 102010

What can HTML5 and CSS do? Here are a list of HTML5/CSS3 experiments that I have come across. Have a look, they are great fun.

A solar system…

http://neography.com/experiment/circles/solarsystem/

Blowing up video…

http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/

Leopard style stack example…

http://gordonbrander.com/lab/css3-stacks/#stack

Harmony…

http://mrdoob.com/projects/harmony/#shaded

Fishtank…

http://gregmurray.org/fish/

Canvas molecules…

http://alteredqualia.com/canvasmol/

As I find new ones I will post them, but if anyone knows of any others, let me know and I will add them to the list.

Did you like this? Share it:

Javascript libraries

HTML5 5 Responses »

Jun 062010

With the recent advent of all the hoopla over flash and html 5 and the iphone/ipad, I decided to go back to Javascript and have a look to see what is around.

I was particularly looking for Javascript libraries to help me with the new drawing features for HTML5 etc, and in my research I came across three that I think are well worth further investigation…

jQuery

jQTouch

Raphael

Now I am sure there are more out there, and I would love to hear from anyone as to what Javascript tools/libraries do you use, but the three above I was particularly taken with and so I recommend to everyone, have a look and let me know what you think. Read more...

Free textures

Blender, Photoshop No Responses »

Feb 162010

Every so often i come across sites that give away free icons, textures, etc. I particularly look out for free textures, as i use them in my 3D and actionscript work.

So i thought, let’s put it in a blog and share it around. Here are a list of web sites that i have found.

If anyone has any others, let me know.

free icons

List of free texture sites

food textures

free vector glass buttons

useful textures

more textures

lovetextures.com

chicago reference pack

various patterns

free illustrator patterns Read more...

Flash 3D image slider

Flash No Responses »

Dec 152009

If you want to create a some nice snazzy banners, image galleries, etc, in flash, here is a nice application done in Flash – Cu3er.

It is free, and it works via an xml file, which you edit. It is easily customisable and will display images/slides in a 3D structure. You can specify things like transitions, buttons, symbols, colours, etc.

It is well worth a look at.

Have fun