Sam Scaife - Digital Media Design BA

I've never done any JS before for I decided a good way to start was to do some of the examples from the website Codecademy so that I could see how the structure of things such as arrays and variables where in JS. In total I did a little over 100 exercises on the site covering the basics and object oriented programming.

Alongside this I also downloaded some example projects from CreativeJS by Paul Lewis and Seb Lee-Delisle. I thought it would be a good idea to look at Seb's coding as he taught me everything I know about programming so far so it might have similarities in the structure and approach to it. I looked thought these projects and tried to look for the various section that appear in processing such as the draw loop and the setup, by doing this I was able to understand the structure of JS. Through doing this I was introduced to some new concepts such as DOM, Document Object Model, and a better understanding of API, application programming interface.

I wanted to start off really simple, so instead of building twitter counter straight away I build a simple bouncing ball in js. I made sure that I hand wrote everything so that I would be able to spot when I made mistakes and would actually be learning. I also made sure to comment my code so that I would understand what every section was doing.

//load up my bounce class
var Bounce = (function() {

var canvas = null,
context = null,
SCREEN_WIDTH = 0,
SCREEN_HEIGHT = 0,

//ball variables
xPos = 500,
yPos = 500,
xVel = 10,
yVel = 9,
radi = 50;

// init the code
function init() {

measureScreen();

//creates DOM elements
canvas = document.createElement('canvas');
context = canvas.getContext('2d');
setCanvasSize();
document.body.appendChild(canvas);

//StartsLoop
update();


}

function measureScreen() {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
}

function setCanvasSize() {
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
}

function clearContext() {
context.fillStyle = "rgba(255,255,255,1)";
context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
}
// draws bouncing ball
function draw() {

xPos += xVel;
yPos += yVel;

// x cordinate bounce
if (xPos > SCREEN_WIDTH - radi) {
xVel *= -1;
xPos = SCREEN_WIDTH - radi;
}
if (xPos < radi) {
xVel *= -1;
xPos = radi;
}
// y cordinate bounce
if (yPos > SCREEN_HEIGHT - radi) {
yVel *= -1;
yPos = SCREEN_HEIGHT - radi;
}
if (yPos < radi) {
yVel *= -1;
yPos = radi;
}

context.fillStyle = 'rgb(200,255,200)';
context.beginPath();
context.arc( xPos, yPos, radi*2, 0, Math.PI * 2, true );
context.closePath();
context.fill();

}

//Loop
function update() {
clearContext();
requestAnimFrame(update);
draw();

}

//api
return {init: init};



})();

//start my code when window opens
window.onload = function() {
Bounce.init();
};

I have put a live version on my site. As you can see its a little buggy but I'm pretty happy with how it turned out and learn a lot writing it. The project runs in html5 using the jS to put the canvas element in the html when the page loads, this is so it will be full screen regardless of screen size.