Setting up your Windows 8 environment | Creative Coding with Processing.js for Windows 8 JavaScript

[EDN Admin]

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);
fill(fillColor);
};

void draw(){
// draw is called repeatedly
// clear out the background
background(0);
// 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;
}
};

View the full article