Category Archives: PJS Releases

Processing.js 1.0 released!

0
Filed under Open Source, PJS Releases, Processing.js, Seneca College

It’s been a long time coming but the Processing.js team has finished up the last of the tickets for 1.0 and we are proud to release Processing.js 1.0.

You can download it here.

This release includes a ton of features which have spanned through the internal 0.9.8 release and the 1.0 release combined.  You can read the changelog here.  We closed over 100 tickets for this release and spent a considerable amount of time on documentation, tutorials, website updates, and other user and community support infrastructure to make it easier for the end user to experience Processing.js.

If you haven’t had a look at the Processing.js website lately you will see that the exhibition page has been updated with some new examples of Processing.js in use around the web.  The learning tab has been updated to show some new tutorials on how to use Processing.js and some new IDE’s that have popped up on the web over the last while.

Check out the new exhibition entries and the new interactive development environments.

The reference pages have also been updated by Anna over the past week or so for new users and old who want to look up information on the language.

Another major milestone for this release is to provide some initial support for the IE9 beta.  It’s got 1 or 2 issues which we have bugs filed on but for the most part it works very well.

In terms of speed this release has also improved significantly in some areas.

Try it out and show us your work around the web!

Preparing for the release of Processing.js 1.0

1
Filed under FSOSS, Game Programming, Open Source, PJS Releases, Processing.js, Seneca College

I haven’t written about Processing.js in a long time so I though it might be time to post something new with the release of 1.0 tentatively coming up in a few weeks.

We are hoping to finish up the remaining code related bugs and additions within a few days and get the 1.0 release up onto Corban’s test suite to begin testing before finally releasing 1.0.

If you are interested in helping out you can signup on the test suite site and help us test out the release of 1.0 on multiple browsers and platforms. Earn points on the leader-board and work your way up to the top by helping us test the latest release of Processing.js!

If your new to Processing.js and haven’t heard about it…

Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets.

Here are a few projects and tools around the web that use Processing.js that show what it can do.

We are also planning a game development in Processing.js workshop at FSOSS being delivered by Andor Salga on Oct 28 at 9AM in room T2109 at the Seneca @ York campus, TEL building

If your interested in the status of the upcoming release or want more info on Processing.js you can stop by the active IRC channel on irc.mozilla.org channel #processing.js

A monthly wrapup on processing.js progress

0
Filed under Open Source, PJS Releases, Processing.js, Seneca College
Tagged as , ,

A lot has happened in the last month and I haven’t had time to keep up with blogging.  Between work, work, conferences, processing.js release 0.9, and other things, I haven’t had much desire to sit down and write about it really.

So a few things to write about include the release of processing.js V0.9.  Our 0.9 release is one of our biggest yet with the most changes, bug fixes, and new features.  The processing.js test-suite is updated and by now most of the major platforms and browsers have been tested.  We can still use a few people to help us cover the browsers and platform combinations not yet tested. Sign up today and help us out and learn about processing in the process (parden the pun).

Yesterday marked the end of the OCE Discovery 2010 conference which we attended with Seneca to display some of the projects we are currently working on including processing.js.

I’ll be writing about that in a few days so check back for more info.

Processing.js 0.9 wrapup and reviews

0
Filed under PJS Releases, Processing.js

0.9 will be coming out in a few days and I’ve submitted my work for this release as of last night for review

Some big changes are going into this release related to PImage objects

I changed the way a PImage holds its pixel array internally to use an ImageData object instead of an array of ints.  This means a ton of expensive overhead math is eliminated when drawing frames in a loop and manipulating pixels

Initial tests on minefield and chrome showed sketch’s with animation or pixel by pixel manipulations in a loop were between double and triple there previous speeds. My resize loop test used to run in chrome at about 50-70fps it now runs at 200-240fps.

I did some reviews this release as well for Anna’s hue, saturation, and brightness fixes.  I also wrote a few new tests and rewrote some old ones to test the new color() implementation to make sure it worked ok with PImage stuff.

One more release to go !

Processing.js conference wraps up in Boston

0
Filed under Open Source, PJS Releases, Processing.js

Sitting in the Boston airport waiting for my flight so I decided to put up a post on this weekends get together in south Boston.

For the first time a group of about 20 individuals from the Processing.js development team got together in Boston with some professionals from all over to meet and discuss Processing/Processing.js.   I got a chance to meet a ton of really smart people behind the Processing project and the technologies that support it.

Friday evening I got to sit in on a talk with a panel of professionals from all different companies and organizations.  Al MacDonald led the discussion which included Ben Fry who was one of the original creators of the Processing project, John Resig who started the Processing.js project, Chris Blizzard from Mozilla who is chief evangelist, Dave Humphrey my professor of open source at Seneca College, and Corban Brook from University of Waterloo.

Saturday we held a group workshop to brainstorm ways to improve performance in everything from Processing.js to Mozilla’s canvas implementation to the community learning experience for newcomers.  The objective is to get sketches running in JS as fast as they run in java applets in the browser through native processing.  We made some major improvements and 0.9 and 1.0 is when those changes should start emerging.

Sunday we wrapped things up with more bug fixes and improvements.  I worked with Anna on an IDE for processing.js that is built in Bespin.  We implemented syntax highlighting and passed it on to Al to pretty it up for use on the PJS website.

Overall it was an awesome weekend and a huge thanks goes out to Bocoup for hosting it and for all who came to present and help out.

Starting towards 0.9

0
Filed under PJS Releases, Processing.js

0.8 is released and since I haven’t had time to blog much lately I’ll include a summary of the progress I made in 0.8 and what’s coming up in 0.9

In 0.8 I added misc fake-dom.js fixes for the parser test harness, I also added a few PImage bug fixes as well.

The biggest thing that came into 0.8 was copy() and blend() implementations and their PImage prototypes.

I ported over the code almost directly from processing’s implementation with the exception of the nearest neighbor code.

going to get some coding done tomorrow with some really awesome people here in Boston.  Hopefully some nice performance increases will be coming soon.

Processing 0.7 is out, 0.8 is on the way

0
Filed under Open Source, PJS Releases, Processing.js, Seneca College
Tagged as ,

We released processing 0.7 a few days ago which was an extra week in the making but it was worth it.

0.7 is packed with a huge list of changes and fixes. My first piece of PImage went in and got a few last minute bug fixes applied and now I am working towards 0.8 content.

Last night I pushed up the resize prototype for PImage objects for peer-review.  A few interesting things came out of that.  One being I almost missed the part in the specification about allowing 0 to be passed in for the width or height and interpret that as a sign to keep the images current aspect ratio and just adjust to the specified width or height on the other parameter.

I also ran the tests on a few of my changes and noticed we had to add a few more properties to the fake-dom.js file for the parser tests which was causing 60 of the tests to start failing.

As I’ve been putting PImage together and running some performance tests I’ve realized at some point we will have to abandon the JS pixel array that’s holding pixel data and move to using an ImageData object attached to the PImage.  This will make moving from a PImage object into a ImageData or canvas object for canvas functions a lot faster in the future.  Currently if you are displaying an image in a loop and changing it the performance is not very good.  Adding accessors, changing the object composition, and moving as many functions to drawImage() instead of putImageData() are things we plan to do to speed it up in the future.  Initial tests show storing the imagedata in a ImageData object to be about 10x faster alone.

More about 0.8 changes in a few days.

The first pieces of PImage

0
Filed under Open Source, PJS Releases, Processing.js, Seneca College
Tagged as ,

I pushed up the first piece of PImage code last night for review.

It looks like 0.7 will contain the following
PImage constructors including a 1 argument that accepts a HTMLImage object
createImage()
image()
p.get()
p.set()
PImage.get()
PImage.set()
loadImage()

A few example demos are available here and a simple slide show of images is here

more to come on 0.8 later in the weekend

PImage roadmap

0
Filed under Open Source, PJS Releases, Processing.js, Seneca College
Tagged as ,

With Processing.js’s 0.7 release coming late this week I’m preparing to get as much PImage content packed up, tested, and approved for this release.

Here is a complete list of everything that has to be done to bring the library in line with being able to handle and use a PImage object internally.

PImage upcoming changes to library

PImage constructors
PImage(<img>) accept a reference to a HTML img object and convert it to a PImage
PImage(w, h) create a PImage object with default mode RGB (alpha set to 255)
PImage(w, h, f) create a PImage object with format ARGB
PImage prototypes
.toImageData converts the PImage object to a canvas ImageData object
.fromImageData(ImageData) converts a canvas ImageData object to a PImage object
.get() PImage.get() returns a PImage object of itself
.get(x,y) returns color (int) of PImage coordinate x,y
.get(x,y,w,h) returns PImage object of width and height at coordinate x,y
.set(x,y,color) x,y coordinate, color is a color set the pixel that color
.copy(sx,sy,sw,sh,dx,dy,dw,dh) copy source area to destination area
.copy(srcimg,sx,sy,sw,sh,dx,dy,dw,dh) copy source area of srcimg to destination area
.mask(img) a source image to use as the alpha channel for this image
.mask(alphaArray) an int array to use as the alpha channel for this image
.blend(sx,sy,sw,sh,dx,dy,dw,dh,MODE) blend the source rect to the dest rect of MODE mode
.blend(srcimg,sx,sy,sw,sh,dx,dy,dw,dh,MODE) blend the source rect of srcimg to the dest rect of MODE mode
.filter(MODE) filter an image with mode MODE
.filter(MODE, l) filter an image with mode MODE and level l (int of range 0-1)
.save(filename) save the PImage to a file
.resize(w,h) resize PImage to width and height
.loadPixels() loadPixel data into PImage objects pixels[] array
.updatePixels() update the pixels in the PImage objects pixel array
Processing functions that need updating to handle PImage objects
p.createImage(w,h,f) create a PImage object of width height and format specified
p.loadImage(f) load an image of filename f
p.loadImage(f, e) load an image of filename f with extension e if no extension given in f
p.requestImage(f) asynchronously load an image f in a separate thread while continuing sketch execution
p.requestImage(f,e) asynchronously load an image f with extension e in a seperate thread while continuing sketch execution
p.image(img,x,y) place a PImage img at x,y coordinate
p.image(img,x,y,w,h) place a PImage img at x,y coordinate of width w height h
p.imageMode(MODE) set a flag to tell p.image() how to interpret w,h
p.get() return a PImage of the current canvas
p.get(x,y) return the color at coordinate x,y
p.get(x,y,w,h) return a PImage of width and height at x,y from main canvas
p.set(x,y,c) x,y coordinate, set this pixel color c
p.set(x,y,img) x,y coordinate, img is a PImage, draw the PImage there
p.loadPixels load a pixel array of the main canvas into pixels[]
p.updatePixels update a pixel array of the main canvas into pixels[]
p.blend(sx,sy,sw,sh,dx,dy,dw,dh,MODE) blend the source rect to the dest rect of MODE mode
p.blend(srcimg,sx,sy,sw,sh,dx,dy,dw,dh,MODE) blend the source rect of srcimg to the dest rect of MODE mode
p.copy(sx,sy,sw,sh,dx,dy,dw,dh) copy source area to destination area
p.copy(srcimg,sx,sy,sw,sh,dx,dy,dw,dh) copy source area of srcimg to destination area
p.filter(MODE) filter the canvas with mode MODE
p.filter(MODE, l) filter the canvas with mode MODE and level l (int of range 0-1)
p.pixels[] pixel array of the current canvas
p.background(b) draw the background PImage b to the background
Blend modes

BLEND, ADD, SUBTRACT, LIGHTEST, DARKEST, DIFFERENCE, EXCLUSION, MULTIPLY, SCREEN, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN

Filter modes

THRESHOLD, GRAY, INVERT, POSTERIZE, BLUR, OPAQUE, ERODE, or DILATE

Some of this is done, some is started, some is not yet started.  I’ll be adding tickets to lighthouse later today to keep track of it all and pushing some code this evening for 0.7 review and approval hopefully in time !

0.7 release is moving in a forward direction

0
Filed under Open Source, PJS Releases, Processing.js, Seneca College

After 3 weeks of working my way backwards down the rabbit hole I have finally started to make some progress forward with plans for PImage.

Heres a short list of what is going to have to be done and in what order for my 0.7 release

  • write PImage constructors
  • add toImageData and fromImageData prototypes to easily adapt between PImage and canvas ImageData types
  • re-write image()
  • re-write createImage()
  • re-write loadImage()
  • re-write get(x,y,w,h)
  • test copy(), blend(), pimage.get(), pimage.set(), createimage(), loadimage(), image()
  • write prototypes for PImage’s blend, copy, filter, mask, get, set, loadpixels, updatepixels
  • test the prototypes

So yea obviously its not ALL going to get finished by Monday but I think i’ll be able to get a good portion of it done since a first draft of PImage, blend, copy, the blending modes, get, set, toImageData and fromImageData are done now.

Almost ready to get a working test going

More to come over the weekend