PImage… an update

Recently I wrote about revisions to my 0.2 Release. I wrote that I have to add image() because it wasn’t acting like it should. Well it turns out that it wasn’t image() it was my code and the way my PImage constructor worked. After researching canvas, I figured out that in order to get the pixels you have to use canvas functions. Check out the canvas reference. Im still figuring out all of the details but here are the basics:

//first you have to get the elements you are working with
var canvas = document.createElement( “canvas” );
var context = canvas.getContext( “2d” );
//draw image onto the canvas
context.drawImage(loadImage(“fish.jpg”), 0, 0 );
//now that you drew the image, you have to get the data of type ImageData
//ImageData is an object and is used to draw and get images from the canvas
//ImageData has width, height, and pixel[]
//PImage doesnt have this object in Java Processing but I added it to Processing.js
this.data = context.getImageData(0,0,this.width,this.height);
//the problem with getImageData is that it stores each rgba value into a separate array index
//we need to get it to pixels[i] = (12,25,25,0) or whatever the color is
this.data.pixels = buildImageObject(obj).pixels;

And after all of this the image() will display the image! So far, I completed the PImage constructor, and the get() function. Now the get function either gets the whole object(PImage), a pixel, or a portion of the image. Here is a screen-shot of the image, a rectangle filled with a color pixel using get, and a portion of the image also using get:

Right now I am working on the copy() function, which copies pixels in the image from one area to another. Its not really working and I am not sure why. One thing I learned however is that in JavaScript assigning a boolean or string to a variable makes a copy of that value, while assigning an array or an object to a variable makes a reference to the value. Which means that if you change an index in one array the second array will change as well!. Read this post for more info.


View all of my blogs on Processing.js
View all of my blogs

One thought on “PImage… an update

  1. Pingback: PImage Copy « Anna on Stuff (Processing.js/Open Source)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s