ProcessingJS and issue changing platforms - Array of books Challenge

ProcessingJS and issue changing platforms - Array of books Challenge


Hello Code Campers:)

I need help understand an issue with JS…
I wrote this program on Khan Academy, building an array of books and using JS to sort the books on a shelf. this is the link

I’m trying to run this program I wrote, in a different environment using jsbin/jsfiddle/codepen
And I can’t get it to work.
Can anyone please help?? THANKS!!:slight_smile::smiley:


It looks like you’re mixing JS and Java?

void setup(){
	size(400, 400);

void draw() {


I just did a small test to see if drawing something basic would work.

I tried to follow the steps on

at any case, I took it off now, I just want to make the JS program I wrote to work on another platform, without using Khan’s Academy simulation and with whatever goes on in the background of their coding and challenges environment


The tutorial uses processing.js which has its own syntax. This program was originally written for Java, hence the Java like syntax. The program takes its syntax called sketches and converts it to javascript. From the processing site:

Any Processing code or concepts should map to Processing.js (the exceptions are listed below). You can also use pure JavaScript to work with the Processing drawing API, skipping the Java syntax of Processing in favour of JavaScript.

Processing.js was originally created in order to allow existing Processing developers and existing Processing code (often referred to as sketches) to work unmodified on the web. As a result, the recommend way to use Processing.js is to write Processing code, and have Processing.js convert it to JavaScript before running it.

I would suggest reading more up on Processing, or just try to draw with a different Javascript library.


Thank you so much for the help @P1xt!!
There are a few things in the solution that are not clear to me…
first, why would you use “with” there?

I’ve googled it, and looks like it’s been used to extend the scope of a variable.
is it because the processingInstance variable is only defined at the bottom?


another thing, in this line , it’s doing an instantiation of a “processing” object. I search the documentation about it but I didn’t understand it that much, just wondering if you could offer a bit of clarification on those two things.

Thanks again for taking the time to help me out!
also thanks guys @IsaacAbrahamson and @ArielLeslie for your quick response and answers


I had similar problems when I first started trying to develop outside of KA. I would highly suggest that you move away from using Processing.js until you are a lot more comfortable with web development. As PI points out it is possible to get it working on your site but its a really big hassle and not worth it if your just using it for graphics. Take a look at this tutorial for canvas. It will allow you to do almost everything you are using Processing.js for but without all the complication. Besides Processing.js really just uses Canvas for all of it drawing functions anyways.