Daily Processing Code Sketch!

Hello You all,

I know this blog has been silent this last few months but i’m currently thinking of doing a redesign of it among other things such as change the “SWFGeek” (nickname, domain name, twitter, etc..) due to the fact that i’m not longer working on just Flash projects and will be making a lot of new post on different and more general programming subjects so theres not any sense in keeping the “Flash Only” look of the site. That said, on to what this post is about.

On the beginning of last month I started to play with Processing once again as some of you might know besides writing lines of code i also do illustration work and love to be doodling all the time, so i was writing this sketch and having a wonderful time and i thought to myself wouldn’t it be a great exercise to do at least one of this sketches everyday? So that’s what this daily sketch project will be about.

So heres an image showing this past month sketches:

March Daily Sketches
March Daily Sketches

I’m currently working on a small site for the project meanwhile you can keep track on the following links:

Pinterest: http://pinterest.com/davegamez/funscript/

Flickr: http://www.flickr.com/photos/davidgamez/

Instagram : http://instagram.com/davegamez

Twitter: https://twitter.com/funscript

Thanks for reading,

Dave

 

Away3D 4.0 “Broomstick” + JigLibFlash on “Molehill” example: CubeWall

CubeWall
So here’s a quick example (extending one of the examples of Away3D) using the latest versions of Away3D 4.0 Alpha (Broomstick) and JigLibFlash using the new APIs included in FlashPlayer 11 “Molehill”. In order to see the example You’ll need the FlashPlayer 11 Incubator installed in your browser. There is a lot of new stuff to test on “Molehill” and it’s new features but wanted to share this, once I get some more free time I’ll write a tutorial about it.

Instructions: Click the image to open the example, use Your arrow keys to make the pink box collide with the CubeWall (once the pink box leaves the scene another one will drop above the wall) use the spacebar to lift the pink cube.

To find more information visit one of the following links:
Away3D 4.0 Alpha release – “Broomstick”

3D Physics Engine Jiglibflash update for flash 11 incubator build with Away3D 4.0 Broomstick support

Flash Player Incubator

 


Flash Player 10.2 Beta (Native bitmap-based cursors)

One of the new features of the Adobe Flash Player 10.2 is the Native bitmap-based cursors this will let You get rid of the Mouse.hide(), onMouseMove() handler  or starDrag() to display a custom cursor in your Flash projects. You can now directly assign your own custom cursors. So here’s a sample extending Thibault Imbert’s

1.- First we embed the assets( the images that we will be using as our custom cursors) and  an int var that we will be using to switch our cursors.

[Embed (source="/assets/126.gif" )]
public static const NativeCursor:Class;
[Embed (source="/assets/cat1.png" )]
public static const CursorFrame1:Class;
[Embed (source="/assets/cat2.png" )]
public static const CursorFrame2:Class;
[Embed (source="/assets/cat3.png" )]
public static const CursorFrame3:Class;
[Embed (source="/assets/cat4.png" )]
public static const CursorFrame4:Class;
[Embed (source="/assets/cat5.png" )]
public static const CursorFrame5:Class
protected var _state : int = 0;

2.- Then on the class constructor we add the click mouse event listener so on each user click we toggle the cursor.

public function NativeCursorTest() {
  stage.addEventListener(MouseEvent.CLICK, _onClick);
  toggle();
}

3.- The methods that create our cursors this is exactly the same code that Thibault’s sample just divided in two methods so You can see the animated and static cursor working.

private function createNativeCursor() : void {
   // we create a MouseCursorData object
   var cursorData:MouseCursorData = new MouseCursorData();
   // we specify the hotspot
   cursorData.hotSpot = new Point(15,15);
   // we pass the cursor bitmap to a BitmapData Vector
   var bitmapDatas:Vector.<BitmapData> = new Vector.<BitmapData>(1, true);
   // we create the bitmap cursor (bitmaps should not be bigger than 32x32 pixels, this is an OS limitation)
   var bitmap:Bitmap = new NativeCursor();
   // we pass it to the bitmapDatas vector
   bitmapDatas[0] = bitmap.bitmapData;
   // we assign the bitmap to the MouseCursor object
   cursorData.data = bitmapDatas;
   // we register the MouseCursorData to the Mouse with an alias
   Mouse.registerCursor("myCursor", cursorData);
   // whenever we neeed to show it, we pass the alias to the existing cursor property
   Mouse.cursor = "myCursor";
}

private function createAnimatedCursor() : void	{
   // we create a MouseCursorData object
   var cursorData:MouseCursorData = new MouseCursorData();
   // we specify the hotspot
   cursorData.hotSpot = new Point(15,15);
   // we pass the cursors bitmap to a BitmapData Vector
   var bitmapDatas:Vector.<BitmapData> = new Vector.<BitmapData>(5, true);
   // we create the bitmap cursor frames (bitmaps should not be bigger than 32x32 pixels, this is an OS limitation)
   var frame1Bitmap:Bitmap = new CursorFrame1();
   var frame2Bitmap:Bitmap = new CursorFrame2();
   var frame3Bitmap:Bitmap = new CursorFrame3();
   var frame4Bitmap:Bitmap = new CursorFrame4();
   var frame5Bitmap:Bitmap = new CursorFrame5();
  // we pass it to the bitmapDatas vector
   bitmapDatas[0] = frame1Bitmap.bitmapData;
   bitmapDatas[1] = frame2Bitmap.bitmapData;
   bitmapDatas[2] = frame3Bitmap.bitmapData;
   bitmapDatas[3] = frame4Bitmap.bitmapData;
   bitmapDatas[4] = frame5Bitmap.bitmapData;
   // we assign the bitmap to the MouseCursor object
   cursorData.data = bitmapDatas;
   // we register the MouseCursorData to the Mouse
   Mouse.registerCursor("myAnimatedCursor", cursorData);
   // we just pass a frame rate
   cursorData.frameRate = 5;
   // whenever we neeed to show it, we pass the alias to the existing cursor property
   Mouse.cursor = "myAnimatedCursor";
}

4.- And finally our Mouse event listener and the toggle method that makes all that cursor magic switch happens.

private function _onClick(event : MouseEvent) : void {
	// we call the toggle function to switch between our mouse cursors
	toggle();
}

private function toggle() : void {
	switch (_state) {
	   case 0:
		// we set the static cursor
		createNativeCursor();
		_state = 1;
		break;
	   case 1:
		// we set the animated cursor
		createAnimatedCursor();
		trace(_state);
		_state = 0;
		break;
		default:
	}
}

Hope this helps You and in case you haven’t already go to adobe labs and download the Flash Player 10.2 beta.

Almost forgot here’s the example: ( You’ll need Flash Player 10.2 in your browser to see it).

Processing.js Experiment

Over the last few weeks when I wasn’t working or fighting hackers on my blog (If You follow me on Twitter you know what I mean), I had the chance to give Processing.js a try.

Over the last few weeks when I wasn’t working or fighting hackers on my blog (If You follow me on Twitter you know what I mean), I had the chance to give Processing.js a try, Processingjs is a port of the Processing programming language,and it lets You program images, interactions and animations for the web without using Flash or Java applets, it uses JavaScript to draw shapes and manipulate images on the HTML5 canvas element (You’ll need a browser that supports it …cough..IE…cough…ISSUE 15), so if you like building data visualizations, creating user-interfaces and developing web-based games Processing.js might be your thing.
So I decided to do a simple test and boy it was really simple to implement existing Processing sketches.
Here’s a little 3 steps explanation on how I did that experiment;

Step Number 1.-

First things first in order to play with Processing.js you’ll need to download and include it inside the tag of your html file.

?View Code HTML4STRICT
1
 <script src="script/js/processing-js/processing-0.9.6.min.js" type="text/javascript"><!--mce:0--></script>

Step Number 2.-

Now on the body tag You’ll need to open up a new canvas tag, and that’s where the processing.js will be running.

?View Code HTML4STRICT
1
You need a <a href="http://www.google.com/chrome" target="_blank">modern browser</a> to view this.

So what’s going on here ? You need to tell the canvas the location of the sketch that you’ll be running (in this case the worms.pjs file), in the datasrc attribute and a explaining text in case the user’s browser dont support HTML5 yet other way all they’ll see is a blank screen.

Step Number 3.-

The actual Processing.js that will display those playfull worms on Your HTML, if you’ve used Processing before you’ll notice that there’s actually nothing diffrent form what You do in a regular Processing sketch and if you copy and paste this in the Processing enviroment it will run as any other sketch.

?View Code 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
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
Mover[] movers = new Mover[30];
 
void setup() {
  size(viewportwidth,viewportheight);
  smooth();
  background(0);
  // Initializing all the elements of the array
  for (int i = 0; i < movers.length; i++) {
    movers[i] = new Mover(); 
  }
}
 
void draw() {
  noStroke();
  fill(10,0);
  rect(0,0,width,height);
 
  // Calling functions of all of the objects in the array.
  for (int i = 0; i < movers.length; i++) {
    movers[i].update();
    movers[i].checkEdges();
    movers[i].display(); 
  }
}
 
class Mover {
 
  PVector location;
  PVector velocity;
  PVector acceleration;
  float topspeed;
 
  Mover() {
    location = new PVector(random(width),random(height));
    velocity = new PVector(0,0);
    topspeed = 4;
  }
 
  void update() {
 
    // Our algorithm for calculating acceleration:
    PVector mouse = new PVector(mouseX,mouseY);
    PVector dir = PVector.sub(mouse,location);  // Find vector pointing towards mouse
    dir.normalize();     // Normalize
    dir.mult(0.5);       // Scale 
    acceleration = dir;  // Set to acceleration
 
    // Motion 101!  Velocity changes by acceleration.  Location changes by velocity.
    velocity.add(acceleration);
    velocity.limit(topspeed);
    location.add(velocity);
  }
 
  void display() {
    stroke(0);
    fill(175);
    ellipse(location.x,location.y,16,16);
  }
 
  void checkEdges() {
 
    if (location.x > width) {
      location.x = 0;
    } else if (location.x < 0) {
      location.x = width;
    }
 
    if (location.y > height) {
      location.y = 0;
    }  else if (location.y < 0) {
      location.y = height;
    }
 
  }
 
}

So that’s it You may open your html file in the browser and will see a nice animated wormy things chasing your mouse across the screen.

Hope this little explaings helps You get started with Processing.js, I’ll be doing a little more of experimentation with it myself and tell You how it goes.

Until next time See You.