Embedding a Processing.js sketch in a WordPress page

ByGaël April 14, 2013April 14, 2013

Processing.js is very handy, and it is very cool to run your sketches in your browser. I was looking around for one easy way to embed a sketch into a WordPress page or post, and found a good option.

I used the Processing JS plugin, written by Keyvan Minoukadeh. You can get it from this location : http://www.keyvan.net/code/processing-js/

I just faced a small issue while trying to use this plugin and the preview mode in WordPress. Sketch was not running, but reloading the page is solving the issue. And there is no problem if the post is really published, only issue is in preview mode. I am using Chrome on MacOS.

Below one example I made in few code lines :

Image Processing

Y’CbCr (“YUV”) conversion – part 2
ByGaël March 13, 2013March 14, 2013

Now the fun part : the implementation using Processing.js We will load the original picture as in the previous example: img = loadImage(“Yosemite.jpg”); Then we will go through all the pixels by 2 loops: for (int y = 0; y < img.height; y++) { //we loop through every line for (int x = 0; x…

Read More Y’CbCr (“YUV”) conversion – part 2
Image Processing

First image processing try with Processing.js
ByGaël March 3, 2013March 4, 2013

Processing is a famous language for Digital Artists and Makers. It is based on Java, but now Javascript is also supported by the regular Processing IDE. It is using the canvas element from HTML5, and most of the Java code was ported to run in Javascript only. I tried a quick example. In this example…

Read More First image processing try with Processing.js
Image Processing

Luma histogram
ByGaël March 14, 2013April 2, 2013

In the previous post we created 3 channels from the RGB original picture : Y’, Cb, and Cr. We will now look that the luma histogram, so using the Y’ channel computed in previous post. What is an histogram ? It is a graphical representation of the pixel value distribution in a picture. It could…

Read More Luma histogram
Image Processing

Contrast enhancement – part 2/2
ByGaël April 20, 2013December 2, 2013

All right, now that we added some missing bricks, like Y’CbCr to RGB , we can finish our contrast enhancement started in the post Contrast enhancement – part 1/2. The goal is to tweak poor contrast images, like this one: And to make these pictures automatically and reasonably contrasted: So let’s summarize, the idea is…

Read More Contrast enhancement – part 2/2
Image Processing

Color saturation enhancement and Y’CbCr to RGB conversion
ByGaël April 14, 2013December 2, 2013

Before finishing the contrast enhancement started in previous post, we need to add a Y’CbCr to RGB function. It will allow us to close the loop : RGB=>Y’CbCr=>contrast enhancement on Y’=>RGB. One easy modification we can do while in Y’CbCr domain is modifying color saturation by multiplying Cb and Cr by a common gain. Finally,…

Read More Color saturation enhancement and Y’CbCr to RGB conversion
Image Processing

Y’CbCr (“YUV”) conversion – part 1
ByGaël March 11, 2013March 13, 2013

Ok this week let’s try something a little bit more useful than random manipulation of one picture. Starting from the same beautiful Yosemite picture, we will convert it from RGB color space to Y’CbCr color space. Many websites can help you to get more background on Y’CbCr color spaces, and commonly called “YUV”. I am…

Read More Y’CbCr (“YUV”) conversion – part 1

One Comment

Keyvan says:

April 15, 2013 at 7:17 am

Hi Gael, glad you found it useful. And thanks for the report about preview mode not displaying your sketch. I’ve noticed this too. I think the reason is due to a security feature built into Chrome. See http://stackoverflow.com/questions/1547884/refused-to-execute-a-javascript-script-source-code-of-script-found-within-reque

I’ll have to see what I can do to prevent this. As you say, reloading the page after hitting preview should work.

Comments are closed.

Similar Posts

One Comment