Setting up your Windows 8 environment

Download this episode

Download Video


We look at how a Windows 8 store application built in JavaScript can take advantage of the Processing.JS library for creative coding. We also provide an overview of what a basic Processing.JS sketch looks like while setting up the draw() and update() functions for our first sketch.

To follow along in Visual Studio, please download the Processing Sketchbook projection.

The finished sketch can be found below:

int width;
int height;
int diameter = 100;
color fillColor;
float x, y, vx, vy;
void setup() {    
     // setup is called once at start up.    
     width = 500;
     height = 550;
     size(width, height);    
     x = width / 2;    
     y = height / 2;    
     vx = random(20.0) - 10.0;    
     vy = random(20.0) - 10.0;    
     fillColor = color(255, 0, 0);    
void draw(){    
     // draw is called repeatedly    
     // clear out the background    
     // draw the circle at the correct position    
     ellipse(x, y, diameter, diameter);    
     // add velocity to the position    
     x += vx;
     y += vy;    
     // bounce off the walls    
     if (x > width) {
          x = width;
          vx *= -1.0;
     if (x < 0) {
          x = 0;
          vx *= -1.0;
     if (y > height) {
          y = height;         
          vy *= -1.0;
     if (y < 0) {
          y = 0;
          vy *= -1.0;



Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image

      Sorry to be dense, but how do I actually setup VS to work with the processingjs file and the templates on CodePlex? Where do I put the viewer, processingjs.js file, sketch files, etc.? The video jumps right in assuming everything is already setup.

    • User profile image

      Hey Tony - Sorry about that. It looks like they combined the phone and C# viewer projects into one download, so the sketchbook solution lost a bit of its original simplicity. Here's how to do it.

      Download the full solution here :

      The DEFAULT project in the solution should be the original Sketchbook project I used in all the training ( ProcessingJSViewerWinJS ). The file and folder structure looks exactly the same as it would if you created a fresh project in Visual Studio using a Windows 8 JavaScript store app template (empty).

      Inside the JS folder ( where you find default.js ), you will find a modified version of processing.js ( called processing_rt.js ). If you were starting this from scratch, you could have just downloaded processing.js from the official site and dropped it in too. However, this version has some tweaks for handling the MSPointer touch event for Surface, Phone, etc.

      Off the main directory, you'll see a file called sketch.pde. "PDE" is the common extension for standard ( as in more Java than JavaScript based ) Processing sketches. We decided to give a simple particle sketch as default, so you can see how the update, setup, draw function work. Feel free to tweak, gut or just wholesale replace that sketch.pde with whatever Processing code you want.

      If you want to start with a fresh sketch, just create your own PDE file ( say tonysketch.pde ) in the same place.

      Inside default.html, you'll only find a full screen Canvas called "canvasRoot". Like all JavaScript template projects from VS2012, default.html automatically calls default.js ( found in the JS folder ).

      Inside default.js, on its app.onactivated handler ( which also comes automatically from all JS templates ), you'll see how we create a reference to the canvas, load up the sketch.pde file from the directory, and then pass it to the Processing object we've created.

      If you make your own sketch, just swap out the names to the .pde file and you'll be good to go. Have fun! Let me know if you end up making something awesome.

      Thanks for testing it out!



    • User profile image

      Love the series Rick. It would be awesome if when you finally wrap it you could cook up a single PDF containing all the posts accompanying the videos.

    • User profile image

      @Tony: Checked in new SLN files and updated the zip

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.