Worcester Google Symposium 2013

deliriousattackInternet and Web Development

Dec 4, 2013 (3 years and 11 months ago)

115 views

Worcester Google Symposium

2013

Worksheet C
.

From JavaScript to Processing


[CBPrice
.

03
-
07
-
13
]


Color Coding

for this Worksheet






Information


Instructed Learning


Homework





Purpose

(a) To
learn
the Processing IDE and syntax

(b) To
change
your JavaS
cript code into Processing code (in an organised manner)



Resources


Processing Environment. Load from the Course web
-
site.








Activities



1



Differences between JavaScript and Processing Syntax




JavaScript



Processing


image declaration


var background;


PImage background;



decimal number

declaration



var xLocnFish;


float xLocnFish;


loading images



fish = document.getElementByID(“fish”);
=
=
fish = loadImage(“fish4.png”);
=

rendering images


gc.drawImage(
fish,xLoxnFish,yLocnFish);


image(xLocnFish,yLocnFish);



function declaration


function addTwo(a) {


var b;


b = a + 2;


return b;

}



float addTwo(float a) {


float b;


b = a + 2;


return b;

}



function compute() {


// do something, no value returned

}


void compute() {


// do something, no value returned

}









2

Differences between JavaScript and Processing
Simulation Engine
Code Structure








3

Converting your JavaScript Code to Processing
Code.

// variable declarations


// following function called once


window.onload = function() {



// variable assignment




// create and start a loop


window.setInterval(computeAndRender,dT);


}



function computeAndRender() {


compute();


render();

}


function compute() {


}


function render() {


}

//
variable declarations


// following function called once


void setup() {



}




// following loops automatically


void draw() {


compute();


render();

}


void compute() {


}


void render() {


}


Here you must proceed
systematically
. In other words you need to write an
algorithm

to help you convert your code. I suggest the following
,
though you may take an other approach


(a) Have a tea or a coffee.

(b) Find back your JavaScript fishtank cod
e and open this up in Notepad++

(c) Now open up the sketch “JavaScript_To_Processing” in Processing which provides a template to write your code.

(d) Take a deep breath.

(e) Look at all your JavaScript functions (header and curly brackets, no code in the b
ody) and convert these to Processing functions, making sure
you write them in the correct place in the Processing engine structure.

(f) Look at all your JavaScript variable declarations (at the top of the code) and convert these to Processing variable decl
arations.

(g) Find where you assigned values to these variables in JavaScript and now assign these in Processing.

(h) Now, look at each JavaScript function in turn

and focus on the function body. Convert this to Processing and write your code in the
appro
priate Processing function.

(i) Debug.







4.


Deploy on an Android Device


Ask for explanation here.





HW


Reflect on how the approach you took to porting the code. Also make sure you understand the differences between a language li
ke JavaScript
and Processing. Some on
-
line research may be useful here