Processing JS

Well on occasion I like to play around with Processing.  Processing is an awesome language for generating generative art and data visualizations etc..  Processing has been around for several years and it was originally created by Ben Fry and Casey Reas at MIT.  Processing has traditionally depended on java to run.  When you create sketches you write them in the simple Processing editor.  You create sketches and then use the language to create your art.  The language is relatively easy to use and powerful.  It is really neat to see this language be ported to JavaScript!  John Resig who created the wonderful jQuery JavaScript framework also ported the Processing language over to JavaScript.  So as a result with minimal effort you can port most processing projects over and simply use JavaScript.  This works in most cases and I believe in the future it will only improve!  So I decided to pick it up again and play with some of the examples.  I noticed one in particular that I wanted to play with Casey Reas and Ben Fry example following the mouse.  I decided to alter it so the ellipses that followed the mouse would be random colors and have random amounts of transparency and this was easy to do. It is geeky fun to play with the color() method and combine it with random() method because it is easy to set color variations that are pleasant and will all have random colors with the same tonal value or monochromatic with variations on the tonal value. It is easy to create a decent color pallet to work with.  I am looking forward to seeing this project progress and I am amazed of the speed it is ridiculously wicked fast in JavaScript.  It is definitely interesting to see JavaScript evolve this far in such a short period of time.  With the new frameworks like jQuery it has never been easier to create interactive content with JavaScript.  I was upset though when trying to use it with Internet Explorer because that worthless browser doesn’t support the canvas tag.  I could go on about how much I hate internet explorer but that would take up probably 100 to 200 pages so I guess I won’t I will just say it sucks and leave it at that.  I tried to use Explorer Canvas, but I believe it fails when you use the mouse following techniques as a result I placed in code that allows the IE version to use the Java version instead of the JavaScript version.  I have to use jQuery a great deal at work now and enjoy it because it makes a more approachable language to work in and I can get things done quickly.  So any way here is a example of what you can do quickly with Processing. I will look forward to playing with processing more and am simply amazed at how fast it is with JavaScript.  The only frustration I have with JavaScript as a developer is the fact that different browsers interpret JavaScript differently and sometimes it can take hours to solve these odd quirks. This is really true at work lately we have been doing some really complicated stuff with JavaScript and I am looking forward to becoming much more efficient with jQuery it takes a considerable time to become efficient with it and I am not talking about simply using plugins I am talking specifically about creating reusable widgets that are custom created for extremely unique circumstances. Things sometimes look easy and then you dig in to them and start looking at all the gotchas. I just need an extra few days thats probably why tomorrow I will be messing around with it on my off time. I have also been trying to balance out my time more. I have been working on my new portfolio and I can’t wait until it is finished! I have been writing a lot actionscipt on my time off(thats not work though its a hobby). I am making more progress but still have a long way to go. Once I am finished with my portfolio I will move on to creating a few games I have a few ideas and I would like to use actionscript to implement them and I will also look at Andriod because I think the Andriod market is on the verge of taking off and I want to be a part of that. I installed the SDK and have a book again its just finding the time!

Processing Experiment

Processing Code:

void setup()
  size(800, 600);

void draw() 
   variableEllipse(mouseX, mouseY, pmouseX, pmouseY); 
void variableEllipse(int x, int y, int px, int py) 
  float speed = abs(x-px) + abs(y-py);
  ellipse(x, y, speed, speed);
int myFillColor(){
int alpha = random(0,255);
return alpha;

Download Example

This weekend I also sketched out an image of Lisa and have been playing around with it in Illustrator. I love it when I have time to mess around and sketch or paint but again I never seem to have enough time and I haven’t been working on my traditional art skills. I would like to find more time for those skills so I can improve I wouldn’t mind having my own show one of these days would be fun. I have really been concentrating most of my efforts to improve my programming skills.

Useful Links:
Processing JS
Tweener Style Animation with JS
Recompile your .net assembly to javascript, actionscript, php or java

← Previous post

Next post →


  1. I love this! You have really captured her.You have a fantastic eye!

  2. morganae23

    You're the man. You should start a webcast show, sort of like the art guy who used to be on PBS, and go through some “simple” programming stuff for the people in the know. I know a lawyer that could help you with it. 😉

Leave a Reply