Processing 0.7 is out, 0.8 is on the way

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.

Advertisement

The first pieces of PImage

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

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

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

0.7 processing.js update

We are one week away from the deadline for 0.7 content for the next release.  I’m still crippled by a few issues holding back a lot of work on PImage but today I took a sidestep and got a little work done on a few other tickets i’ve had looming for a few weeks.

I completed a re-write of arrayCopy to support multidimensional arrays.  arrayCopy will only copy arrays with the basic primative types but it will handle arrays of arrays of those types recursivly.  supporting copying of custom class objects is something the user would have to write support in for in their sketches.

I also completed the long data type.  long was already supported by the library we just needed some tests to make sure it worked properly.  I wrote up a test to make sure it handled 64 bit numbers properly and didn’t cause any overflow issues.  You can properly cast a long to an int as well provided the long is within the range limit of an int (32 bit).

A couple of other misc fixes for bugs in some of my tests got fixed as well.

I’m hoping to get more progress done on PImage next week when school resumes and people get back from vacation that I need to work with.