The Highlander Blog » web design http://www.highlander.co.uk/blog Thoughts and musing from within Highlander Fri, 04 May 2012 11:26:47 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 JavaScript animation – using EaselJS pt 2 http://www.highlander.co.uk/blog/2012/01/06/javascript-animation-using-easeljs-pt-2/ http://www.highlander.co.uk/blog/2012/01/06/javascript-animation-using-easeljs-pt-2/#comments Fri, 06 Jan 2012 16:07:36 +0000 Alex http://www.highlander.co.uk/blog/?p=2667 [...]]]> 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

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…

<script src=”easel.js”></script>

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

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

Here my canvas element has an id of canvas. The stage variable will hold all of my items to view and animate, and it is linked to the canvas element by Stage(page). Now I can start adding images. The images I use , of course, can just be replaced by any image you wish. To use easeljs to show an image…
var sun= new Bitmap(“sun.png”);
Just create a new variable and make it a new Bitmap object, with the url of your image inside. Once you have your image you can adjust its x and y properties, and its scale properties…

tree1.scaleX = tree1.scaleY = 0.4;
tree1.x = 100;
tree1.y = 100;

again, this will be familiar to those of you who know ActionScript 3. To finally see the image we need to use addChild()…

stage.addChild(sun);

 …this last is vital, as without it we have setup our image, position, size, etc, but we will not see it until we use addChild().
We can then repeat this as many times as we like for each image we wish. However, before we run this we need to do a couple more things. First we need to set the frame rate, and also we need to tell easeljs to update the canvas as we are moving objects.
This is done like so…

Ticker.setFPS(60);
Ticker.addListener(window);

 The last line tells easeljs to look for a function called tick, and it is within this function that we update our canvas…

function tick()
{
stage.update();
carMan.x-=1;
}

I am not doing anything fancy with the animation, just changing x by 1 pixel, but it looks pretty good. In further posts I will discuss more advanced movement, easing, etc, but for now I think it works pretty well. You do not have to write too much code, and it all fits together very nicely. Here is the full code for the example…

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>easel_test</title>
<meta name=”description” content=”" />
<meta name=”author” content=”alex” />
<script src=”easel.js”></script>
<script>

var stage;
var page;
var carMan;

function init()
{
page = document.getElementById(“canvas”);
stage = new Stage(page);

var sun= new Bitmap(“sun.png”);
sun.scaleX = sun.scaleY = 0.15;
stage.addChild(sun);

var  tree1= new Bitmap(“tree1.png”);
tree1.scaleX = tree1.scaleY = 0.4;

tree1.regY = tree1.image.height;
tree1.y = 300;

stage.addChild(tree1);

var  tree2= new Bitmap(“tree2.png”);
tree2.scaleX = tree2.scaleY = 0.4;

tree2.regY = tree2.image.height;
tree2.y = 305;
tree2.x = 300;
stage.addChild(tree2);

carMan= new Bitmap(“carman.png”);
carMan.scaleX = carMan.scaleY = 0.1;
carMan.regY = carMan.image.height;
carMan.y = 308;
carMan.x = 1000;
stage.addChild(carMan);

Ticker.setFPS(60);
Ticker.addListener(window);
//looking for a function called Tick
}

function tick()

{
stage.update();
carMan.x-=1;
}

</script>

<style>
body
{
background-color: rgba(209,146,95,1);
}

#canvas
{
background-color: rgba(235,217,118,0.3);
border-color:rgba(200,146,95,1);
border-style: solid;
border-width: 1px;
}
</style>
</head>

<body onload=”init();”>
<div>
<header>
<h1>easel_test</h1>
</header>
<nav>
<p>
<a href=”/”>Home</a>
</p>
<p>
<a href=”/contact”>Contact</a>
</p>
</nav>

<canvas id=”canvas” width=”1024″ height=”300″></canvas>

<footer>
<p>
..by alexS
</p>
</footer>
</div>
</body>
</html>

Have a play with the code and see what you can come up with!
]]> http://www.highlander.co.uk/blog/2012/01/06/javascript-animation-using-easeljs-pt-2/feed/ 0 Which web technologies? http://www.highlander.co.uk/blog/2011/10/03/which-web-technologies/ http://www.highlander.co.uk/blog/2011/10/03/which-web-technologies/#comments Mon, 03 Oct 2011 10:00:58 +0000 Alex http://www.highlander.co.uk/blog/?p=2388 [...]]]> 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

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.

The main sticking point at the moment is that Flash is a GUI and there really is no GUI that covers the things in HTML5, however, things are changing! The next year or so is going to be very interesting as regards HTML5 and web design I feel.

To show just how, here are some links to some of the newcomers that will help you animate and draw using HTML5 technologies…

Adobe Edge (beta) - http://labs.adobe.com/

Wallaby – for converting your Flash files into html – very basic, but interesting - http://labs.adobe.com/

The following are not HTML5 specific, but I think are well worth mention in their own right as they make life very easy for design and sketching out your web pages…

Balsamiq - http://balsamiq.com/

Napkee - http://www.napkee.com/

Do not forget of course that we are also talking about using HTML5 to creating some fantastic tablet and smartphone apps, so do not think of just web pages, but also iPad and iPhone apps as well. Have a look at these web-based apps…

scribd - http://www.scribd.com/

aviary - http://www.aviary.com/

google body - http://bodybrowser.googlelabs.com/

CSS3maker - http://www.css3maker.com/

…and so on. There are many apps out there, with more coming. Let me know if you have come across any interesting ones and I will add them to the list.

 

 

 

 

 

 

Enhanced by Zemanta
]]> http://www.highlander.co.uk/blog/2011/10/03/which-web-technologies/feed/ 0 Learning three.js http://www.highlander.co.uk/blog/2011/09/23/learning-three-js/ http://www.highlander.co.uk/blog/2011/09/23/learning-three-js/#comments Fri, 23 Sep 2011 17:01:45 +0000 Alex http://www.highlander.co.uk/blog/?p=2335 [...]]]> 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.

In the first few examples I will stick to very simple code, so as to make it easy to concentrate on the actual important stuff – Three.js. So I will not be using JQuery, and I will not be using any other libraries  - just Three.js. Eventually I will introduce some more libraries for particular purposes, but for now, all you need is to care a simple html page, and download the three.js library and link to it. You can download the library from here…

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

You will also need a WebGL enabled browser – basically the latest version of Chrome, Safari, or FireFox should do. If you are not sure if your browser can run WebGL, go to this website…

http://webglreport.sourceforge.net/

…this will tell if you can run WebGL. Once you have a browser that can run WebGL, load up a simple web page and get ready to code. This is what we are going to create…

simple sphere

simple sphere

Here is a simple html setup for this example…

<!DOCTYPE HTML>
<html lang=“en”>
<head>
<title>Three js example 1</title>
<meta charset=“utf-8″>

<script type=“text/javascript” src=“js/libs/Three.js”></script>

</head>
<body>
<div id=“myshape”></div>
<script></script>

</body>
</html>

…it is HTML5, but any simple html code will do. We have linked at the top to the Three.js library, and we will be writing our code in the script tag lower down the page. There are a lot of very good examples (much more advanced) at the Three.js site, so have a look and see exactly what it is capable of, but at the moment we will start very simply. I have adapted this example from various sources, and simplified it to make it more understandable. So, on to the JavaScript.

First we need to set up some variables…

var myworld;//this holds the element that we will use to draw in
//this sets the canvas size.
var WIDTH = 1200, HEIGHT = 500;

// camera attributes
var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000;

These variables set the width and height of the drawing area (our world you might say), the camera details (viewing angle, aspect, etc) Next we populate the variable my world…

myworld = document.getElementById(“myshape”);

Now, if you look at the html, you will see that I had already created a div element with the id of myshape. It is this that we will draw into. However, you could also do this…

myworld =document.createElement(“div”);
document.body.appendChild(myworld);

This creates a brand new element and then appends it to the current document body. Both will work, however a word of warning. Create a div element, not a canvas element, as Three.js creates a new canvas element to draw into inside the created element. So if the created element is a canvas element, you then get another canvas element inside, and then nothing gets rendered.

Next we need to create a renderer, a camera, and a scene…

var renderer = new THREE.WebGLRenderer();
//I am choosing the WebGL renderer here, but you have others to choose from
var camera = new THREE.Camera(VIEW_ANGLE, ASPECT, NEAR, FAR);
//these variables have been set at the top of  our script
var scene = new THREE.Scene(); //create a new scene
// the camera starts at 0,0,0 so we need to pull back
camera.position.z = 200;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);

Next we need to set up a material to use with our shape. I will use a MeshLambertMaterial, but check out what happens when you use a MeshBasicMaterial! Looks completely flat!

//create materials
var material = new THREE.MeshLambertMaterial({color: 0xCC0000});
//var material = new THREE.MeshBasicMaterial({color: 0xCC0000});  //gives you just a flat colour – ugly

Next we need a new mesh, and we will use a spherical geometry. In future posts I will try out the different geometries and eventually I will get on to load complete 3D scenes created in Blender.

// create a new mesh with sphere geometry
var radius = 50, segments = 16, rings = 16;
var mesh = new THREE.Mesh( new THREE.SphereGeometry( radius, segments, rings ), material );
scene.addChild(mesh);

Now we need to add our scene into our DOM element…

 // attach the render-supplied DOM element
myworld.appendChild(renderer.domElement);

If you were to load this file now you wold see nothing. There is one more thing that we need and that is a light source.

var pointLight = new THREE.PointLight( 0xFFFFFF );
// set its position
pointLight.position.x = 50;
pointLight.position.y = 50;
pointLight.position.z = 130;
// add to the scene
scene.addLight(pointLight);
// render our scene
renderer.render(scene, camera);

All you see is a simple red and black sphere. Nothing terribly exciting, but now try changing the pointLight position, the radius, colour, and camera position. This will give you a good idea of how  to setup a simple WebGL (or whatever renderer you use) scene.

In the next tutorial I plan to add more shapes, along with buttons to allow you to choose which shapes to draw.

threejs1

]]> http://www.highlander.co.uk/blog/2011/09/23/learning-three-js/feed/ 0 More JavaScript libraries http://www.highlander.co.uk/blog/2011/09/16/more-javascript-libraries/ http://www.highlander.co.uk/blog/2011/09/16/more-javascript-libraries/#comments Fri, 16 Sep 2011 14:56:58 +0000 Alex http://www.highlander.co.uk/blog/?p=2284 [...]]]> 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
View count
3,405

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

http://paperjs.org/about/

processingjs - Processing.js is the sister project of the popular processing visual programming language, designed for the web – superb for data visualisations

http://processingjs.org/

box2d js - a JavaScript port of  the box2d physics engine

http://box2d-js.sourceforge.net/

scene.js – a WebGL scene graph library – some lovely examples on the web site

http://scenejs.org/

Anyone got anymore?

]]> http://www.highlander.co.uk/blog/2011/09/16/more-javascript-libraries/feed/ 0 What is WebGL? http://www.highlander.co.uk/blog/2011/09/09/what-is-webgl/ http://www.highlander.co.uk/blog/2011/09/09/what-is-webgl/#comments Fri, 09 Sep 2011 09:16:18 +0000 Alex http://www.highlander.co.uk/blog/?p=2240 [...]]]> 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/)

WebGL Water Simulation
Runtime
1:14
View count
103,740

It uses the canvas element (html5) and the webgl context  of that element (if you know anything about drawing with the canvas element, the context is how you access the particular api for drawing in either 2D or WebGL).

You can use WebGL now in Safari, Firefox, and Chrome. But not Opera or Internet Explorer, and not on smart phones or tablets yet.

Although the actual language looks daunting, not only can you create superb results, but there are various JavaScript libraries that will use WebGL to render their output…

Here are some examples of WebGL in action…

BioDigital Human

(http://www.biodigitalhuman.com/default.html)

 HelloRacer (using three.js)

(http://helloracer.com/webgl/)

Interactive water example

(http://madebyevan.com/webgl-water/)

WebGL filters

(http://evanw.github.com/webgl-filter/)

There are many more (if you know of any please let me know).

You can even use Blender to create a scene and output it to something that can be used by scene.js and so basically create a 3D environment in Blender for use on a web page.

In future posts I am going to look into these topics and see what can be created and I will be posting the results here.

]]> http://www.highlander.co.uk/blog/2011/09/09/what-is-webgl/feed/ 0 HTML5/CSS3 experiments http://www.highlander.co.uk/blog/2010/07/10/html5css3-experiments/ http://www.highlander.co.uk/blog/2010/07/10/html5css3-experiments/#comments Sat, 10 Jul 2010 08:08:07 +0000 Alex http://www.highlander.co.uk/blog/?p=379 [...]]]> 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.

]]> http://www.highlander.co.uk/blog/2010/07/10/html5css3-experiments/feed/ 0 Javascript libraries http://www.highlander.co.uk/blog/2010/06/06/javascript-libraries/ http://www.highlander.co.uk/blog/2010/06/06/javascript-libraries/#comments Sun, 06 Jun 2010 18:39:51 +0000 Alex http://www.highlander.co.uk/blog/?p=331 [...]]]> 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.

Are there any other great Javascript libraries out there? let me know and I will post them up.

]]> http://www.highlander.co.uk/blog/2010/06/06/javascript-libraries/feed/ 5 Free textures http://www.highlander.co.uk/blog/2010/02/16/free-textures/ http://www.highlander.co.uk/blog/2010/02/16/free-textures/#comments Tue, 16 Feb 2010 22:13:02 +0000 Alex http://www.highlander.co.uk/blog/?p=114 [...]]]> 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

brushes

As always, check the site you download the images from as to how you may use them – free is not necessarily what you think it is. There is usually a license agreement somewhere telling you what you may use the images for, e.g, Creative Commons license, etc.

Have fun!

]]> http://www.highlander.co.uk/blog/2010/02/16/free-textures/feed/ 0 Flash 3D image slider http://www.highlander.co.uk/blog/2009/12/15/flash-3d-image-slider/ http://www.highlander.co.uk/blog/2009/12/15/flash-3d-image-slider/#comments Tue, 15 Dec 2009 14:19:15 +0000 Alex http://www.highlander.co.uk/blog/?p=61 [...]]]> 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 :-)

]]> http://www.highlander.co.uk/blog/2009/12/15/flash-3d-image-slider/feed/ 0 The New Web? HTML5 http://www.highlander.co.uk/blog/2009/12/09/the-new-web-html5/ http://www.highlander.co.uk/blog/2009/12/09/the-new-web-html5/#comments Wed, 09 Dec 2009 10:37:49 +0000 Alex http://www.highlander.co.uk/blog/?p=54 [...]]]> Again, a new standard, HTML5, being worked on, but not finalised yet. And again, some browsers are starting to use some of the new HTML5 commands.

I have not tried them yet (but I plan to), but here is a short list of browsers/links to help you get started…

Browsers that have started implementing HTMl5

Chrome

Firefox 3.5

Opera

Safari

Useful HTML5 links

w3.org HTML5 spec

safari features

alistapart.com HTML5 article

websites using html5

]]> http://www.highlander.co.uk/blog/2009/12/09/the-new-web-html5/feed/ 0