Devirtuoso » Experimental

Canvas Image Manipulation Experiment

Shawn — Fri, 09 Sep 2011 16:17:32 +0000

There are plenty of cool things that HTML 5 has to offer. Here lies an experiment with the canvas and image manipulation. Oh what FUN!

Canvas Experiment (Best viewed on Chrome / Safari)

Just a brief description of what I built. We first pull in all the image data, and convert them to particles. Then let the playing happen. In this case I just made the particles jump away from the mouse, then jump back. I heavily commented the code to help you look through it.

Does not work locally! Image needs to be on server somewhere.

If you try to load in a local image or an image from another domain you will get a javascript security error. To get around this you can encode the image into base64. Here is a handy tool for that….very simple to use.

Download Example

Play with the code on JSFiddle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<html>
<head>
<meta charset="UTF-8">
<title>Canvas Image</title>
<style>
body{
background:black;
}
canvas{
width:900px;
height:200px;
background:none;
}
#canvasSource{
display:none;
}
</style>
</head>
<body>

<img id="canvasSource" src="picture.png" alt="Canvas Source" />

="area" width="900" height="200"></canvas>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>

<script>
//Image Manipulation Javascript will go here.
</script>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305

The Future of the Web is WebGL

Shawn — Fri, 04 Mar 2011 16:18:25 +0000

So what’s in store for the web in the future? Is it more bejeweled games? Or is it 3d first person shooters?A big shout out goes to Human Engines and Gregg Tavares. This is a demo I came accross of WebGL in all it’s glory and had to share it. The performance is pretty good considering all the reflections and volumetrics. Very cool stuff.

You can check out the experiment at: THIS REQUIRES GOOGLE CHROME

http://webglsamples.googlecode.com/hg/aquarium/aquarium.html

Google Sphere

Shawn — Tue, 29 Sep 2009 01:29:51 +0000

Once again Google is broken in this fantastic experiment. From the maker of Google Gravity, this experiment takes Google and forms it into a sphere.

Google Sphere

I love Mr.doob’s work. Big points for creativity. The best part about it is that the image search still works.

Again this one requires Chrome to view it, he uses the webkit to transform his Actionscript 3 3d engine into JavaScript.

3D Sphere Using jQuery

Shawn — Tue, 22 Sep 2009 17:53:35 +0000

Ever wanted your tag cloud to resemble a ball? Of course you did. This tutorial will walk you through how to create a Sphere in jQuery.

What We Are Building

This one can bog down a system in a hurry, but that’s the fun with experimenting with JavaScript. We will be building a sphere that rotates depending on which way the mouse moves….exciting.

Download Example

Getting Started

This tutorial is a continuation of a line of 3D jQuery posts. I would recommend you having a look at the previous post so you’re up to speed.

Now that is out of the way lets get started. For this project we’ll have 3 files.

3DEngine.js
Sphere.js
sphere.html

The 3DEngine.js is the same file that was in the previous posts so we won’t be covering that. The Sphere.js holds the Sphere class which is used by the 3D Engine. Lastly the html file puts everything together.

The Sphere

With the sphere class we’ll be creating a set of 3d points (x,y,z) in an array. To build the sphere we’re simply going to create a whole bunch of rings that start off small, get larger, then small again. I’m not sure if this the best way of building a sphere, but it works so I’m not going to worry too much.

Here is the JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

There are two loops. One for the number of rings, the other for the points within each ring. Inside the inner loop we first figure out where each point should lie, then figure out how that would translate into the x, y and z co-ordinates.

The jQuery / Html

Not much has changed in our jQuery / HTML since the 3d Plane post. The only thing that has changed is we imported the Sphere.js and instead of adding a plane, we’re adding a sphere.

Here is the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

<body>
<div id="item">
</div>
</body>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="3DEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="Sphere.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//

$(document).ready(function() {

//Init Camera
var camera = new Camera3D();
camera.init(0,0,0,300);

var container = $("#item")

//Create object holder
var item = new Object3D(container);

//Add sphere to the object holder
item.addChild(new Sphere(200,10,100));

//Create scene
var scene = new Scene3D();

//Add object holder to the scene
scene.addToScene(item);

var mouseX,mouseY = 0;
var offsetX = $("#item").offset().left;
var offsetY = $("#item").offset().top;
var speed = 6000;

//Figure out where the mouse is when the mouse is moved.
$().mousemove(function(e){
mouseX = e.clientX - offsetX - (container.width() / 2);
mouseY = e.clientY - offsetY - (container.height() / 2);
});

var animateIt = function(){
//rotate the sphere along the y axis when the mouse
//mouse is moved left and right
if (mouseX != undefined){
axisRotation.y += (mouseX) / speed
}

//rotate along the x axis when the mouse is moved
//up and down.
if (mouseY != undefined){
axisRotation.x -= mouseY / speed;
}

//Render the scene.
scene.renderCamera(camera);

};

setInterval(animateIt, 20);

});
//]]>
</script>

Disclaimer

Be careful adding points on this one. Because the 3D engine doesn’t use html’s canvas just yet, it really can’t handle too many points. I can get away with 100 points on my machine without too much delay. Chrome handles it the best out of all the browsers I tried. So use it at your own discretion, you might have some angry viewers if you go too nuts. This is just meant to be experimental…and cool.

The next step will be to optimize the 3D Engine a bit using the canvas so there won’t be this problem in the future.

Here is all the code together:

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

HTML

<html>
<head>
<title>3d engine</title>
<style type="text/css" media="screen">
#item{
width:100px;
height:100px;
margin:0 auto;
top:300px;
position: relative;

}
ul{
list-style-type: none;
}
body{
background-color: #111;
color: #69c;
font-family: Arial, "MS Trebuchet", sans-serif;
font-weight: bold;
font-size:2em;
}
</style>
</head>
<body>
<div id="item">
</div>
</body>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="3DEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="Sphere.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//

$(document).ready(function() {

var camera = new Camera3D();
camera.init(0,0,0,300);

var container = $("#item")

var item = new Object3D(container);

item.addChild(new Sphere(200,10,100));

var scene = new Scene3D();
scene.addToScene(item);

var mouseX,mouseY = 0;
var offsetX = $("#item").offset().left;
var offsetY = $("#item").offset().top;
var speed = 6000;

$().mousemove(function(e){
mouseX = e.clientX - offsetX - (container.width() / 2);
mouseY = e.clientY - offsetY - (container.height() / 2);
});

var animateIt = function(){
if (mouseX != undefined){
axisRotation.y += (mouseX) / speed
}
if (mouseY != undefined){
axisRotation.x -= mouseY / speed;
}

scene.renderCamera(camera);

};

setInterval(animateIt, 20);

});
//]]>
</script>
</html>

Download Example

Creating a Wobbling 3D Carousel

Shawn — Sun, 20 Sep 2009 07:07:33 +0000

We’ve all seen a carousel in one form or another. This post will show how to create a carousel with a wobbling effect, much like an unbalanced wheel.

What We’re Building

We’ll be creating a carousel with the help of the 3d Engine we built in a previous post. The idea is we’ll create a ring by plotting points in 3d space, then we’ll rotate it so it’s almost perpendicular to the viewer. Because it’s not 100% flat, it will look like it’s wobbling up and down, giving your carousel a little more flavor.

Download Example

Building the Ring

If you haven’t read up on the 3d Engine just yet I recommend you do so. Creating objects for the engine isn’t overly complicated. It’s just an array of 3d points. With the ring, we’re going to use math to plot the points for us. We’re going to be creating a circle and plot it in 3d space.

Here is the JavaScript: (Ring.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

var Ring = function (radius, numOfItems){

//Step through each point on ring.
for (var i = numOfItems - 1; i >= 0; i--)
{
//Figure out where each point lies on the circle
var angle = i * Math.PI * 2 / numOfItems;

//Translate that point on the circle into x,y coordinates.
var x = Math.sin(angle) * radius;
var y = Math.cos(angle) * radius;
var z = 0;

//Add the point to the array.
this.pointsArray.push(this.make3DPoint(x,y,z));
}

};

//You need to inherit the DisplayObject3D.
Ring.prototype = new DisplayObject3D();

The Ring class takes 2 parameters, the first is the radius of the ring, and the second is how many items are going to be on the ring.

We then proceed to step through all the points, and place them at equal distances around the ring.

The HTML

There isn’t much too the html. We’re simply going to create a

Here is the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div id="item">
<ul>
<li>website</li>
<li>jQuery</li>
<li>JavaScript</li>
<li>HTML</li>
<li>PHP</li>
<li>3D</li>
<li>Ajax</li>
<li>CSS</li>
<li>Design</li>
<li>Flash</li>
<li>Experimental</li>
<li>Development</li>
<li>web</li>
<li>Tutorial</li>
<li>ASP</li>
</ul>
</div>

The jQuery

There is not much changed from our previous post on how to create a 3d plane for jQuery 3D Engine. The only difference here is we’re going to give an initial value to the axisRotation x value. This will rotate the ring towards the viewer. Through trial and error I figured out the value that worked for me.

Then we’ll animate the axisRotation y value when the mouse moves left and right.

Here is the jQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

$(document).ready(function() {

//setup camera.
var camera = new Camera3D();
camera.init(0,0,0,300);

var container = $("#item");

//Setup 3d object holder.
var item = new Object3D(container);

//Add ring to 3d object holder.
//The first argument for the ring is the radius.
//The second argument for the ring is how many items
//are on the ring. So we pass in how many items are in our list.
item.addChild(new Ring(200, $("#item ul li").length));

//Create a scene.
var scene = new Scene3D();

//Add 3d object holder to the scene.
scene.addToScene(item);

var mouseX,mouseY = 0;
var offsetX = $("#item").offset().left;
var offsetY = $("#item").offset().top;
var speed = 6000;

//Capturing mouse movements.
$().mousemove(function(e){
mouseX = e.clientX - offsetX - (container.width() / 2);
mouseY = e.clientY - offsetY - (container.height() / 2);
});

//Rotate ring so it's almost perpendicular to the viewer.
axisRotation.x = 1.5;

var animateIt = function(){
if (mouseX != undefined){

//When the user moves the mouse left and right,
//rotate around the ring on the y axis.
axisRotation.y += (mouseX) / speed;
}

scene.renderCamera(camera);

};

setInterval(animateIt, 20);

});

Voila!

That’s all there is too it.

Here is all the code together:

<html>
<head>
<title>3d engine</title>
<style type="text/css" media="screen">
#item{
width:100px;
height:100px;
margin:0 auto;
top:300px;
position: relative;

}
ul{
list-style-type: none;
}
body{
background-color: #111;
color: #69c;
font-family: Arial, "MS Trebuchet", sans-serif;
font-weight: bold;
font-size:1em;
}
</style>
</head>
<body>
<div id="item">
<ul>
<li>website</li>
<li>jQuery</li>
<li>JavaScript</li>
<li>HTML</li>
<li>PHP</li>
<li>3D</li>
<li>Ajax</li>
<li>CSS</li>
<li>Design</li>
<li>Flash</li>
<li>Experimental</li>
<li>Development</li>
<li>web</li>
<li>Tutorial</li>
<li>ASP</li>
</ul>
</div>
</body>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="3DEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="Ring.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//

$(document).ready(function() {

var camera = new Camera3D();
camera.init(0,0,0,300);

var container = $("#item");

var item = new Object3D(container);

item.addChild(new Ring(200, $("#item ul li").length));

var scene = new Scene3D();
scene.addToScene(item);

var mouseX,mouseY = 0;
var offsetX = $("#item").offset().left;
var offsetY = $("#item").offset().top;
var speed = 6000;

$().mousemove(function(e){
mouseX = e.clientX - offsetX - (container.width() / 2);
mouseY = e.clientY - offsetY - (container.height() / 2);
});

axisRotation.x = 1.5;

var animateIt = function(){
if (mouseX != undefined){
axisRotation.y += (mouseX) / speed;
}

scene.renderCamera(camera);

};

setInterval(animateIt, 20);

});
//]]>
</script>
</html>

Ring.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var Ring = function (radius, numOfItems){

for (var i = numOfItems - 1; i >= 0; i--)
{
var angle = i * Math.PI * 2 / numOfItems;

var x = Math.sin(angle) * radius;
var y = Math.cos(angle) * radius;
var z = 0;

this.pointsArray.push(this.make3DPoint(x,y,z));
}

};

Ring.prototype = new DisplayObject3D();

Just a small tip. If you wanted to create a carousel that doesn’t wobble, your first instinct might be to adjust the axisRotation x value until you get it. You can do it this way, it just might take a bit to get it right on the money. The easier way is to adjust the Ring.js file, and switch the y and z values. This will create a totally flat ring and you don’t have to worry about using the axisRotation x value to try and flatten it out.

Download Example

3D Plane for jQuery 3D Engine

Shawn — Wed, 16 Sep 2009 18:11:23 +0000

In the last post we created a 3D Engine with jQuery. This time around we’re going to make a new shape and make it interact with the mouse.

What We’re Making

I decided not to tackle too tough a shape as I wanted to show how to interact with the mouse. We’ll be making a plane that rotates the further you get from the center.

Download Example

Getting Started

If you haven’t seen how the 3D engine works I recommend visiting Making a 3D Engine in jQuery and getting caught up. The first thing we’re going to tackle is the plane. We’re going to create a JavaScript file that we’ll import into our HTML file. The code isn’t too complicated. We’re creating an array of 3d points.

Lets look at the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var Plane = function (size){

if (size === undefined){
size = 10;
}

this.pointsArray = [
this.make3DPoint(-size,size,0),
this.make3DPoint(size,size,0),
this.make3DPoint(size,-size,0),
this.make3DPoint(-size,-size,0)
];

};

Plane.prototype = new DisplayObject3D();

It’s pretty much the same as the Cube in the previous post. The only difference is it’s less points. This would be a good opportunity to walk you through how each point is placed. The Plane class has 1 argument. The size of the Plane. We’ll use this size to plot our points. Let’s look at the first point. (-size,size,0) So if we pass in a size of 100, then the 3d point would be (-100,100,0) Which puts a point 100 points to the left and 100 up. The z value is at zero because it’s a plane. All the points are going to sit line up along the z axis. The next point is (100,100,0). This is the top right point. (100,-100,0) is bottom left. Lastly (-100,-100,0) is bottom right.

Mouse Interaction

Now that we have our plane made, we’ll just import it into our html file. Just like our previous post we’ll have to create our Camera,Object holder, Object and Scene. Now we’ll tackle having it interact with the mouse.

Here is the new jQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

//Mouse x and y
var mouseX,mouseY = 0;

//x and y value of container
var offsetX = $("#item").offset().left;
var offsetY = $("#item").offset().top;

//rotation speed
var speed = 6000;

//when the mouse moves...
$().mousemove(function(e){

//Figure out how far it is from the center of the container
mouseX = e.clientX - offsetX - (container.width() / 2);
mouseY = e.clientY - offsetY - (container.height() / 2);
});

var animateIt = function(){

//Rotate along the y axis when the mouse is moved left and right
if (mouseX != undefined){
axisRotation.y += (mouseX) / speed
}

//Rotate along the x axis when the mouse moves up and down.
if (mouseY != undefined){
axisRotation.x -= mouseY / speed;
}

//Render the scene.
scene.renderCamera(camera);

};

//keep calling function every 20 milliseconds.
setInterval(animateIt, 20);

Anytime the mouse moved we would figure out how far the mouse is from the center of the object. Then we assign it to variables that will be used in a function that is called at set intervals. In that function we simply divide the mouse value by a speed variable and apply it to the axisRotation. You can adjust the sensitivity of the mouse by increasing or decreasing the speed value. You might be wondering why we’re applying the mouseX to the y value of axisRotation. This is because we want to control rotating on the y axis with our mouse moving left and right. Kind of like opening and closing a door.

Here is the code all together:

<html>
<head>
<title>3d engine</title>
<style type="text/css" media="screen">
#item{
width:100px;
height:100px;
margin:0 auto;
top:300px;
position: relative;

}
ul{
list-style-type: none;
}
body{
background-color: #111;
color: #69c;
font-family: Arial, "MS Trebuchet", sans-serif;
font-weight: bold;
font-size:2em;
}
</style>
</head>
<body>
<div id="item">
</div>
</body>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="3DEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="Plane.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//

$(document).ready(function() {

var camera = new Camera3D();
camera.init(0,0,0,300);

var container = $("#item")

var item = new Object3D(container);

item.addChild(new Plane(100));

var scene = new Scene3D();
scene.addToScene(item);

var mouseX,mouseY = 0;
var offsetX = $("#item").offset().left;
var offsetY = $("#item").offset().top;
var speed = 6000;

$().mousemove(function(e){
mouseX = e.clientX - offsetX - (container.width() / 2);
mouseY = e.clientY - offsetY - (container.height() / 2);
});

var animateIt = function(){
if (mouseX != undefined){
axisRotation.y += (mouseX) / speed
}

if (mouseY != undefined){
axisRotation.x -= mouseY / speed;
}

scene.renderCamera(camera);

};

setInterval(animateIt, 20);

});
//]]>
</script>
</html>

Next Step

Now that the mouse Interaction is taken care of. The next shape I’m going to take a stab at is the ring. Stay tuned for more 3D shapes.

Download Example

3D Engine

Making a 3D Engine in jQuery

Shawn — Mon, 14 Sep 2009 14:48:49 +0000

In the previous post “3D tag cloud” I received quite a few requests for different shapes besides the ring.
The problem is how the tag cloud was created it doesn’t lend itself to different shapes very well. So
this post will show how to create a 3D engine in jQuery / JavaScript for those more exciting shapes.

What We’re Building

We’re going to create a 3D engine that will allow us to create shapes simply by creating an array of points. This engine will have a Camera, a Scene and an Object. It’ll work pretty well the same as in real life. The closer the camera is to the object the larger it gets. This won’t be a complete rendering engine, as this won’t render multiple objects at this point.

Download Example

Display Object

The Display Object is more or less a way to give each object a set of properties and methods. Say I wanted to create a cube, it would first have to inherit the DisplayObject3D class for it to work. It gives the object the tools it needs to get the job done. Kind of like a tool box for a handy man.

Here is the JavaScript Class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

prototype

init

function

(

)

{

this

container

(

)

;

this

containerId

this

container

attr

(

"id"

)

;

//if there isn't a ul than it creates a list of +'s

(

":has(ul)"

)

length

===

)

{

for

(

;

this

pointsArray

length

;

)

{

this

container

append

(

i+'">+

)

;

}

;

If this seems a little foreign to you, you might want to check out the post Object Oriented Programming with JavaScript.

Make 3d/2d Points

These functions basically create objects, one meant for 3d (x,y,z) and one meant for 2d(x,y,depth). These will come in handy when the scene is rendered.

Initialization

The init function assigns a variable to the container passed in. The container is where ever you want the 3d object to display. There is also a part of this function that checks to see if the container has an unordered list. If it doesn’t it just creates a bunch of +’s Really these lines aren’t necessary, I just put it in so I don’t always have to create a unordered list to see if my object is rendering.

Camera

I’m guessing from the name you can probably figure out what this class does. It’s just like a real life camera. It basically creates a point of reference.

Here is the Camera Class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

The focal length basically determines how large the object is going to look in reference to how close it is from the camera. Think of it like a zoom lens. You can zoom in, or zoom out.

The scaleRatio does the magic. It figures out how large the item should be in reference to the camera.

Object 3D

This class isn’t overly important. I basically made this class so I can add more than one object in the future. Right now the engine can only deal with one object at a time. Object3D is a glorified array. Anytime you add an item to the array, it runs the init function on that item.

Here is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// class creates an array of objects to
// be rendered, and initializes them.
var Object3D = function (container){
this.container = $(container);
};

Object3D.prototype.objects = [];

//Add object to the list of objects.
Object3D.prototype.addChild = function (object3D){

this.objects.push(object3D);

object3D.init(this.container);

return object3D;
};

Scene

This is where all the complicated stuff happens. I won’t get into great detail with the mathematics. High school math was boring enough I will give you a high overview of what the code does though, so at least you have an understanding of what it does.

Here is the Scene Class:

Add To Scene

First thing you’ll see is the addToScene function. This basically populates the array that is used to render the scene. If you object is in this array it will get rendered, if it isn’t….it missed the bus.

Transform 3D point to 2D

Next is the Transform3DPointsTo2DPoints function. This is probably the most important part of the engine. What it does is it takes a 3D point in space (x,y,z) and through a little magic converts it into a 2D point that can be displayed on screen.

Render Camera

The renderCamera function doesn’t do anything too complicated. It’s sole purpose is to display the items on screen. It does this by looping through the objects in the scene, and passes each one into the Transform3DPointsTo2DPoints function. The function will return a 2D point that can be plotted using CSS. You might have noticed I’m using JavaScript for the CSS and selecting of the DOM instead of jQuery. Initially I used jQuery but found the browser was crawling, so I went back to the old fashion way.

The Cube

I’ve put the Cube class in a separate file so you can import objects as you need them instead of having to load ones you aren’t using.

The class isn’t overly complicated. It’s creating an array and placing all the points on the cube into that array. It uses the make3DPoint function from the DisplayObject3D class to create each point.

Here is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

var Cube = function (size){

//if the size is not set then give a default
if (size === undefined){
size = 10;
}

//Create a 3d point for every point on the cube.
this.pointsArray = [

//make3dpoint is a function inherited from
//DisplayObject3D

this.make3DPoint(-size,-size,-size),
this.make3DPoint(size,-size,-size),
this.make3DPoint(size,-size,size),
this.make3DPoint(-size,-size,size),
this.make3DPoint(-size,size,-size),
this.make3DPoint(size,size,-size),
this.make3DPoint(size,size,size),
this.make3DPoint(-size,size,size),
this.make3DPoint(0,size,-size),
this.make3DPoint(size,size,0),
this.make3DPoint(0,size,size),
this.make3DPoint(-size,size,0),
this.make3DPoint(0,-size,-size),
this.make3DPoint(size,-size,0),
this.make3DPoint(0,-size,size),
this.make3DPoint(-size,-size,0),
this.make3DPoint(-size,0,-size),
this.make3DPoint(size,0,-size),
this.make3DPoint(size,0,size),
this.make3DPoint(-size,0,size)
];

};

//Inherit DisplayObject3d methods and properties
Cube.prototype = new DisplayObject3D();

Using the 3D Engine

There are a few steps that need to be done in order for this to work. First we’ll need some HTML. I’ll just create a div with an id and place a

Here is the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

Next comes the jQuery. There are a couple of steps you need to do:

Create a camera and initialize it.
Create an Object Holder (Object3D)
Create an Object and put it in the holder.
Create a Scene and put the holder in it.

Here is the jQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

$(document).ready(function() {

//Create a camera
var camera = new Camera3D();

//initialize it.
camera.init(0,0,0,300);

//Create an object holder.
var item = new Object3D($("#item"));

//add a new cube.
item.addChild(new Cube(100));

//Create a scene
var scene = new Scene3D();

//Place the object Holder in the scene.
scene.addToScene(item);

//Animates the cube.
var animateIt = function(){
//rotates on the y and x axis.
axisRotation.y += .01
axisRotation.x -= .01

//Render the scene.
scene.renderCamera(camera);
};

setInterval(animateIt, 20);

});

I didn’t get a chance to make it interact with the mouse. You can do that just by adjusting the axisRotation x, y and z values when the mouse moves. Perhaps I’ll do this in my next post.

That’s All For Now

Stay tuned for the next couple of posts. I plan to make a couple different shapes for this. If you feel frisky by all means try and create your own shapes. Just create an array with a bunch of 3D Points.

There are still a couple of kinks to work out, but for now here is all the code together.

3DEngine.js

/*
* DisplayObject3D ----------------------------------------------
*/
var DisplayObject3D = function(){
return this;
};

DisplayObject3D.prototype._x = 0;
DisplayObject3D.prototype._y = 0;

//Create 3d Points
DisplayObject3D.prototype.make3DPoint = function(x,y,z) {
var point = {};
point.x = x;
point.y = y;
point.z = z;
return point;
};

//Create 2d Points
DisplayObject3D.prototype.make2DPoint = function(x,y, depth, scaleFactor){
var point = {};
point.x = x;
point.y = y;
point.depth = depth;
point.scaleFactor = scaleFactor;
return point;
};

DisplayObject3D.prototype.container = undefined;
DisplayObject3D.prototype.pointsArray = [];

DisplayObject3D.prototype.init = function (container){

this.container = $(container);
this.containerId = this.container.attr("id");

//if there isn't a ul than it creates a list of +'s
if ($(container+":has(ul)").length === 0){
for (i=0; i < this.pointsArray.length; i++){
this.container.append('+i+'">+');
}
}
};

/*
* DisplayObject3D End ----------------------------------------------
*/

/*
* Camera3D ----------------------------------------------
*/
var Camera3D = function (){};

Camera3D.prototype.x = 0;
Camera3D.prototype.y = 0;
Camera3D.prototype.z = 500;
Camera3D.prototype.focalLength = 1000;

Camera3D.prototype.scaleRatio = function(item){
return this.focalLength/(this.focalLength + item.z - this.z);
};

Camera3D.prototype.init = function (x,y,z,focalLength){
this.x = x;
this.y = y;
this.z = z;
this.focalLength = focalLength;
};

/*
* Camera3D End ----------------------------------------------
*/

/*
* Object3D ----------------------------------------------
*/
var Object3D = function (container){
this.container = $(container);
};

Object3D.prototype.objects = [];

Object3D.prototype.addChild = function (object3D){

this.objects.push(object3D);

object3D.init(this.container);

return object3D;
};

/*
* Object3D End ----------------------------------------------
*/

/*
* Scene3D ----------------------------------------------
*/

var Scene3D = function (){};

Scene3D.prototype.sceneItems = [];
Scene3D.prototype.addToScene = function (object){
this.sceneItems.push(object);
};

Scene3D.prototype.Transform3DPointsTo2DPoints = function(points, axisRotations,camera){
var TransformedPointsArray = [];
var sx = Math.sin(axisRotations.x);
var cx = Math.cos(axisRotations.x);
var sy = Math.sin(axisRotations.y);
var cy = Math.cos(axisRotations.y);
var sz = Math.sin(axisRotations.z);
var cz = Math.cos(axisRotations.z);
var x,y,z, xy,xz, yx,yz, zx,zy, scaleFactor;

var i = points.length;

while (i--){
x = points[i].x;
y = points[i].y;
z = points[i].z;

// rotation around x
xy = cx*y - sx*z;
xz = sx*y + cx*z;
// rotation around y
yz = cy*xz - sy*x;
yx = sy*xz + cy*x;
// rotation around z
zx = cz*yx - sz*xy;
zy = sz*yx + cz*xy;

scaleFactor = camera.focalLength/(camera.focalLength + yz);
x = zx*scaleFactor;
y = zy*scaleFactor;
z = yz;

var displayObject = new DisplayObject3D();
TransformedPointsArray[i] = displayObject.make2DPoint(x, y, -z, scaleFactor);
}

return TransformedPointsArray;
};

Scene3D.prototype.renderCamera = function (camera){

for(var i = 0 ; i< this.sceneItems.length; i++){

var obj = this.sceneItems[i].objects[0];

var screenPoints = this.Transform3DPointsTo2DPoints(obj.pointsArray, axisRotation, camera);

var hasList = (document.getElementById(obj.containerId).getElementsByTagName("ul").length > 0);

for (k=0; k < obj.pointsArray.length; k++){
var currItem = null;

if (hasList){
currItem = document.getElementById(obj.containerId).getElementsByTagName("ul")[0].getElementsByTagName("li")[k];
}else{

currItem = document.getElementById(obj.containerId).getElementsByTagName("*")[k];
}

if(currItem){
currItem._x = screenPoints[k].x;
currItem._y = screenPoints[k].y;
currItem.scale = screenPoints[k].scaleFactor;

currItem.style.position = "absolute";
currItem.style.top = currItem._y+'px';
currItem.style.left = currItem._x+'px';
currItem.style.fontSize = 100*currItem.scale+'%';

$(currItem).css({opacity:(currItem.scale-.5)});

}

}

}
};

/*
* Scene3D End ----------------------------------------------
*/

//Center for rotation
var axisRotation = new DisplayObject3D().make3DPoint(0,0,0);

Cube.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

var Cube = function (size){

if (size === undefined){
size = 10;
}

this.pointsArray = [
this.make3DPoint(-size,-size,-size),
this.make3DPoint(size,-size,-size),
this.make3DPoint(size,-size,size),
this.make3DPoint(-size,-size,size),
this.make3DPoint(-size,size,-size),
this.make3DPoint(size,size,-size),
this.make3DPoint(size,size,size),
this.make3DPoint(-size,size,size),
this.make3DPoint(0,size,-size),
this.make3DPoint(size,size,0),
this.make3DPoint(0,size,size),
this.make3DPoint(-size,size,0),
this.make3DPoint(0,-size,-size),
this.make3DPoint(size,-size,0),
this.make3DPoint(0,-size,size),
this.make3DPoint(-size,-size,0),
this.make3DPoint(-size,0,-size),
this.make3DPoint(size,0,-size),
this.make3DPoint(size,0,size),
this.make3DPoint(-size,0,size)
];

};

Cube.prototype = new DisplayObject3D();

index.html

<html>
<head>
<title>Untitled Page</title>
<style type="text/css" media="screen">
#item{
width:100px;
height:100px;
margin:0 auto;
top:300px;
position: relative;
}
ul{
list-style-type: none;
}
body{
background-color: #111;
color: #69c;
font-family: Arial, "MS Trebuchet", sans-serif;
font-weight: bold;
font-size:2em;
}
</style>
</head>
<body>
<div id="item">
<ul>
<li>☺</li>
<li>☺</li>
<li>☺</li>
<li>☺</li>
<li>☺</li>
<li>☺</li>
<li>☺</li>
<li>☺</li>
<li>☺</li>
<li>☺</li>
<li>☺</li>
<li>☺</li>
<li>☺</li>
<li>☺</li>
<li>☺</li>
<li>☺</li>
<li>☺</li>
<li>☺</li>
<li>☺</li>
<li>☺</li>
</ul>
</div>
</body>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="3DEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="Cube.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//

$(document).ready(function() {

var camera = new Camera3D();
camera.init(0,0,0,300);

var item = new Object3D($("#item"));

item.addChild(new Cube(100));

var scene = new Scene3D();
scene.addToScene(item);

var animateIt = function(){
axisRotation.y += .01
axisRotation.x -= .01

scene.renderCamera(camera);
};

setInterval(animateIt, 20);

});
//]]>
</script>
</html>

Download Example

3D Plane

Wobbling Carousel

3D Sphere

JavaScript Experiment – Browser Ball

Shawn — Sat, 12 Sep 2009 14:45:18 +0000

I killed about 20 minutes playing with this one. We’ve all seen physics experiments with balls in a browser window. This is the first one that I’ve seen that uses multiple windows.

Try it out

My hat goes off to Mark Mahoney for this one. It was done really well.

Fantastic work.

If you know of any other experimental developments that are worth a look, don’t hesitate to contact us.

Experimental JavaScript – Wavy Scrollbars

Shawn — Tue, 01 Sep 2009 01:33:11 +0000

This is by far the most creative use of scrollbars that I’ve seen. Who would have thought to create an interactive wave with scrollbars. Fantastic work.

The experiment can be viewed here : http://the389.com/experiment/

It requires that you have safari 4 or google chrome. In case you don’t have either one, here is a video of the experiment.

Scrollbars Experiment

Much respect goes out to the author. This is the kind of work that makes my day. I’m just sad I didn’t think of it first

Devirtuoso » Experimental

Canvas Image Manipulation Experiment

Canvas Experiment (Best viewed on Chrome / Safari)

Does not work locally! Image needs to be on server somewhere.

The Future of the Web is WebGL

Google Sphere

Google Sphere

3D Sphere Using jQuery

What We Are Building

Getting Started

The Sphere

The jQuery / Html

Disclaimer

Creating a Wobbling 3D Carousel

What We’re Building

Building the Ring

The HTML

The jQuery

Voila!

3D Plane for jQuery 3D Engine

What We’re Making

Getting Started

Mouse Interaction

Next Step

Related

Making a 3D Engine in jQuery

What We’re Building

Display Object

Make 3d/2d Points

Initialization

Camera

Object 3D

Scene

Add To Scene

Transform 3D point to 2D

Render Camera

The Cube

Using the 3D Engine

That’s All For Now

Related

JavaScript Experiment – Browser Ball

Try it out

Experimental JavaScript – Wavy Scrollbars