WebGL demo with ThreeJS

November 24, 2011 11:43 pm

I’ve been playing with ThreeJS library for a while now and I am super impressed by the simplicity and the performance of it. Also, being mainly an actionscript developer it was really intuitive for me to jump right on it..
[make sure you are running WebGL enabled browser!!]
Vanja Jelic WebGL demo using ThreeJS

YAYOI KUSAMA exhibition at the Center Pompidou, Paris

October 16, 2011 3:53 pm

This fall I had a chance to check out Yayoi Kusama exhibition at Center Pompidou and being someone who often finds a lot of interest in particle systems of any form, I found it to be amazing!

Vanja Jelic in Pompidou museum
Vanja Jelic in Pompidou museum
Vanja Jelic in Pompidou museum

Her obsession with perception of depth and simple dots and lines that create something very complex, almost hallucinogenic, but essentially simple, is extraordinary.

More about Yayoi Kusama

Breaking bitmap into grid and putting it back together

March 23, 2010 3:53 pm

Get Adobe Flash player

And here is the mighty code that makes it done:

import com.greensock.*;
import com.greensock.easing.*;

var stageW:int = stage.stageWidth;
var stageH:int = stage.stageHeight;

var NUM_COLUMN:int = 10;
var NUM_ROW:int = 10;
var bitmap:Bitmap;
var bitmapData:BitmapData;
var myArray:Array = [];
var myArrayX:Array = [];
var myArrayY:Array = [];
var IMAGE_WIDTH:int;

// Load the image
var request:URLRequest = new URLRequest(“Koala.jpg”);
var loader:Loader = new Loader();

var _gridPieces:Array;
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

function loadComplete(event:Event):void
IMAGE_WIDTH = loader.width;
IMAGE_HEIGHT = loader.height;
bitmap = Bitmap(loader.content);


// Break down an images into a smaller pieces
function _createGrid():void
bitmapData = bitmap.bitmapData;

var _gridWidth:Number = IMAGE_WIDTH / NUM_COLUMN;
var _gridHeight:Number = IMAGE_HEIGHT / NUM_ROW;
for (var i:int = 0; i < NUM_COLUMN; i++) { for (var j:int = 0; j < NUM_ROW; j++) { var offsetX:Number = i * _gridWidth; var offsetY:Number = j * _gridHeight; // create new bitmap by copy pixels var bd:BitmapData = new BitmapData(_gridWidth, _gridHeight); var rectangle : Rectangle = new Rectangle(offsetX, offsetY, _gridWidth, _gridHeight); bd.copyPixels(bitmapData, rectangle, new Point(0, 0)); var gridImage : Bitmap = new Bitmap(bd); myArrayX.push(offsetX); myArrayY.push(offsetY); gridImage.x = randRange(0, stageW); gridImage.y = randRange(0, stageH); gridImage.rotationX = randRange(0, 90); gridImage.rotationY = randRange(0, 90); gridImage.rotationZ = randRange(0, 90); myArray.push(gridImage); addChild(gridImage); } } TweenLite.delayedCall(3, reset); function reset():void { for (var i:int = 0; i < myArray.length; i++) {[i], 1, {rotationX:0, rotationY:0, rotationZ:0, x:myArrayX[i], y:myArrayY[i], ease:Elastic.easeOut}); } } } function randRange(minNum:Number, maxNum:Number):Number { return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum); } [/as]

3D web site/photo gallery using Flash native 3D

January 20, 2010 11:07 pm

There is a lot of fuss about 3D in Flash these days. I love it! I love! I love it! A whole bunch of web sites on FWA and Moluv are done in 3D (some in Papervision3D but some in Flash’s native 3D). Nevertheless, it is a powerful way to convey a message! Thinking of that, I took some time (surprisingly little) to make this:
3D Photo Gallery

Sound Visualization Using Mask and SoundChannel

January 18, 2010 1:31 am

Simple but nice effect using SoundMixer and ByteArray class to load sound’s data and manipulate a mask sitting in front of a playing movie.

Get Adobe Flash player

Papervision3D 101

January 16, 2010 6:26 pm
Get Adobe Flash player

Papervision3D scene used to be a real pain to setup. You had to think about declare and instantiate camera, scene, viewpoint, render engine.. All of that would take patience and time and it would look something like this:

  1. public var scene:Scene3D;
  2. public var camera:Camera3D;
  3. public var viewport:Viewport3D;
  4. public var renderer:BasicRenderEngine;
  5. public function setup():void
  6. {
  7. scene = new Scene3D();
  8. camera = new Camera3D();
  9. renderer = new BasicRenderEngine();
  10. viewport = new Viewport3D(stage.stageWidth, stage.stageHeight,false, false, false, false);
  11. addChild(viewport);
  12. addEventListener(Event.ENTER_FRAME, loop);
  13. }

But today all our suffers are finished! Well, not all of them, but at least those with setting up basic PV3D.
Now, using BasicView class that comes with PV3D, all that looks like this:

  1. package com.vanjajelic
  2. {
  3. import org.papervision3d.view.BasicView;
  4. //extending BasicView class we use inheritance to borrow all the candies it has
  5. public class Model extends BasicView
  6. {
  7. public function Model()
  8. {
  9. /**
  10. * Call the BasicView constructor and pass viewportWidth:Number = 640, viewportHeight:Number = 480, *scaleToStage:Boolean = true, interactive:Boolean = false, cameraType:String = "Target"
  11. */
  12. super(1, 1, true, true);
  13. //Create the materials and primitives.
  14. initSetup();
  15. //Call the native startRendering function that fires every frame.
  16. startRendering();
  17. }
  18. /**
  19. * initSetup creates the 3D model.
  20. */
  21. protected function initSetup():void
  22. {
  23. /*
  24. *do your collada instantiation here
  25. *position you camera
  26. * yada yada..
  27. */
  28. }
  29. }
  30. }
  31. }

Pretty sneaky, right?
I call it efficient..


Minimalist Interface Design using Bezier Drawer

January 2, 2010 5:09 pm

I was thinking about the ways I could use Bezier Drawer to generate graphics that could be utilized somewhere and somehow. I created a shape that had complexity and a form I liked, cut it, and used it as a pattern for the background. Then, I open Flash, created a mock-up, dropped some buttons and text and there you go! I got something, I think I could use one day, somewhere…

Vanja Jelic UI Design_Bezier and Patterns


Bezier Curve Drawing Tool

December 16, 2009 5:00 pm

Another ActionScript experiment… I called it Bezier Curve drawer cause that’s exactly what it does…



1. click on point 1 and set it on the stage
2. do the same thing for point 2
3. press SPACE when ready to draw and CTRL to stop drawing…

After making some shapes I was satisfied with, I made a PDF and JPG out of it and did some printing. I have to say that I’m very happy how it looks, and again PDF is scalable so I’ll probably do some super large prints with this…

The Oven Reinvented – design, design design…

December 11, 2009 7:13 pm

I just saw this web site and decided to write about it.

The site was made for marketing purposes of a product. In this case the product is the Turbo Chef Oven, and I am not going to write about how great the oven is, nor if turkey comes out as good as they say it does, but I’ll write a few words about the way this web site talks to visitors.

At the first sight and looking at it from designer’s point of view, this is a very rich and powerful website. It almost seems that medium it uses was not internet, but television. Armed with heavy Flash animations it really made me open my eyes wide and in a couple of moments I really wished I was right there, grilling asparagus and roasting apple cranberry pie. On the other hand I think the creators of this website never lost touch and went too far with “throwing stuff at you”. Everything is very intuitive, navigation is always right there where you feel it should be. Buttons and sound effects are very minimalistic, and it seems like they perfectly fit surrounding embedded video materials. This definitely talks about a nice way to combine two different media together, and make everything look beautiful and compact.

Everything together, this web site conveys simple information using very rich and persuading way.

Fluid Balls

December 8, 2009 2:01 am

I just finished working on an effect I saw sometime ago, and pretty happy how it came out!
Pretty fluid…

Get Adobe Flash player