Setting up your Windows 8 environment

Play Setting up your Windows 8 environment
Sign in to queue


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;



Download this episode

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

  • User profile image

    Please explain this from the beginning!! I have learned how to create programs using this language on khan academy by completing the entire class and I have been trying for over a week to create and run a program is visual studio and have had absolutely NO LUCK WHATSOEVER!! I have searched the internet far and wide to try to find a source to help me get started and EVERY SINGLE PERSON already has everything set up and just automatically expects you to know how to do all of this stuff!! PLEASE HELP ME!!!!

Add Your 2 Cents