Javascript Programming Basics

Before you start programming in Cinematic Sciences you need to learn the language that the computer speaks. In Cinematic Sciences the computer speaks JavaScript.

Comments

When you see two slashes // in front of a line the computer will treat the line as a comment and ignore it.
Programmers use comments to ignore lines of code and to help remind themselves how to understand the code.

//the first load function will not run because it is ignored as a comment.
//load("penguin","peng");
load("penguin","peng");

Variables:

Variables are like boxes that you store stuff in.

Example:

var mybox=5;

Here's a variable called mybox that I put the number 5 in it. The computer puts whatever is on the right side of the = into the variable.

We can also put text into variables. In computer science text is called a string. You can think of it like letters connected by a string like this: H-e-l-l-o--W-o-r-l-d. A string is is always in quotes.Here is an example of a string variable:

Example:

var mystring= 'Hello world!';

go to top

Outputs

To see what's in a variable you can use alert or log or console.log. Alert pops up a box on the screen, log writes the output to the debugger, console.log writes to the browser console. You can look up online how to open up the console.log for your browser.

Example:

alert(mybox);
//will output 5
log(mystring);
//will output 'Hello world!'

go to top

You can mix strings with variables in an alert statement using the '+' symbol

Example:

var mybox=5;
alert(mystring +' I have ' + mybox + ' cents');
//will output 'Hello World! I have 5 cents');

go to top

Arrays

You can store a list of things in a variable. In JavaScript a list is called an Array. Here are some arrays.

Example:

var mynumbers=new Array(1,2,3,4,5);
var myslangWords=new Array('cool','chill','hot doggy');
var myintroductions=new Array('Hi!','Wassup','Yo');

go to top

To get an item from an array you use a number in brackets like this [2].

Example:

var mynumbers=new Array(0,1,2,3,4,5);
alert(mynumbers[2]);
//will output: 2
//Note arrays count from 0 not from 1 [0] is the first item in the array [1] is the second item.
//if you are having problems with your arrays you may not be counting from 0.

go to top

To put an item in an array you just tell where to put it with a number in brackets like this [8].

Example:

var numbers=new Array(0,1,2,3,4,5);
numbers[8]=1000;
alert(numbers);
//will output: 0,1,2,3,4,5,,,1000;

go to top

An Array can be filled with objects strings,numbers, or even other arrays.You can add items to an array and remove items from the array. Or you can look through it using a which is discussed below

Objects

You can also store an Object in a variable. An Object is something that has properties. Wheverer the object goes the properties go with it. Each property is linked to the object with a '.'

Example:

mycar=new Object();
mycar.wheels=4;
mycar.color='blue';
mycar.model='Porsche';
mycar.owner='me';

go to top

To output the color of car you can use an Alert or send it to the log using log. Alert and log are used to see what's in a variable.

Example:

alert(mycar.color);
//will output 'blue'
log(mycar.owner);
//will output 'me'

go to top

if then else

An if then else statement tests whether or not something is true, called a condition, then does something if it is. For example if the condition is that it's a school day, then you go to school, else you go play. Here are some examples:

Example:

var mydice=6;
if(mydice>4){
	alert('You Win')
}
else{
	alert('You Lose');
}
//outputs 'You Win';
 

go to top

Example:

var name='fred';
if(name=='fred'){
	alert('Hi Fred');
}
else{
	alert('I don't know you');
}
}
//outputs 'Hi Fred'
 

go to top

Example:

var classmates=new Array('joe','moe','robert');
if(classmates[0]=='joe'){
	alert('Yo Joe!')
}
//outputs Yo Joe!
 

go to top

Example:

var car=new Object();
car.color=blue;
car.owner='rob';
}
if(car.owner=='rob'){
	alert(car.owner + ' owns the ' + car.color + ' car')
}
//output rob owns the blue car
 

go to top

Example:

var dice1=5;
var dice2=2;
if(dice1==5&&dice2==2){
	alert('You rolled a 7')
}
//output You rolled a 7
 

go to top

For loop

A for loop will run the code inside the loop brackets {} according to the 3 rules in the parantheses (). The rules include where to start, when to end, and how to count. For loops are often used to check every item in an array, or do something to every item in an array.

Example:

for(var i=0;i<10;i++){
	alert(i);
}

go to top

The for loop controls have 3 parts separated by a ';'

part 1: choose a counter variable name, in this case i, and set where it starts
part 2: end the loop when this part is false. In this case when the counter i is greater than or equal to 10
part 3: i++ means add 1 to i each time through the loop so the loop counter counts by 1.

The JavaScript for loop structure will run any code inside the loop brackets according to the for loop controls.

More Examples:

//load a stack of boxes using the global variable named objects
for(var i=1;i<10;i++){ load('box','box'+i);
objects[i].ontop(objects[i-1]);
}
//load a stack of boxes using the global variable cs
for(var i=1;i<10;i++){
load('box','box'+i);
n=i-1;
cs['box'+i].ontop(cs['box'+n]);
}

//load a stack of boxes using your own array named boxes
boxes=new Array();
for(var i=1;i<10;i++){
load('box','box'+i);//stored in objects
boxes[i]=objects[i];
boxes[i].ontop(boxes[i-1]);
}

go to top

A while will loop will run whatever is inside as long as the condition statement is true

Example:

while(cow.animation=='eat'){
	log('the cow is eating');
}

go to top

Functions

A function is like a set of instructions that you would give to someone to tell them how to do something. For Example: Brush your teeth. If you put it on paper it might look something like this: First get toothpaste, put it on the toothbrush,open your mouth, Put the toothbrush in your mouth, move the toothbrush around on your teeth, spit out the toothpaste, rinse your mouth with water. Put the toothbrush down. In JavaScript this would look like this

Example:

function brushTeeth(){
	getToothpaste
	PutToothpasteOnToothbrush
	OpenMouth
	etc...
}	

go to top

To call the function in JavaScript you would just write the name of the function and add () to the end.

Example:

brushTeeth();

go to top

Functions make it easy to tell the computer to do long lists of instructions. Here's a real JavaScript function that multiplies two numbers together

Example:

function multiply(){
	var a=5;
	var b=5;
	alert(a*b);
}
multiply();//you have to call the function to run it.

go to top

Functions can take in information and use it. The () in front of the function can be filled with variables separated by commas. You can send information into these variables when you call the function. The function can then do different things depending on the information that is sent into the variables. For example:

Example:

function multiply(a,b){
	alert(a*b);
}
multiply(3,5);//you have to call the function to run it.

go to top

A function with if else:

function givePromotion(name,age,rank){
	if(rank=='level0'&&age>20){
	alert(name + ' gets a promotion!');
	}
	else{
	alert('Sorry '+name + ' does not get a promotion.');
	}
}
givePromotion('Katherine',22,'level0');
//output Katherine gets a promotion!
givePromotion('David',18,'recruit');
//output David does not get a promotion.

go to top

A function with an array and a for loop

function inClass(studentname){
myClass=new Array('Jameel','Walter','Katherine');
//loop through all the students
for(var i=0;i< myClass.length;i++){
	//loop through the array to see if each students is in the class
if(myClass[i]==studentname){
alert(studentname+' is in the class!');
}
}
}
inClass('Katherine');//output: Katherine is in the class!

go to top

Functions can return values. A function with the word return in it will return whatever is after the return. For example:

Example:

function add(a,b){
return a+b;
}
var answer=add(3,5);//will return 8 and put it into the answer variable
alert(answer);
//output answer=8

go to top

Problems and Troubleshooting

When your script has code that the computer cannot understand the debugger will show the error. The Debugger is located below the editor.

The debugger will try to tell you what it thinks the error is and also what line it is on. The debugger is not perfect. Think of the debugger is giving you clues to solve the mystery of what's wrong with your code, but it may be slightly or majorly wrong about the location. If it says there is an error on line 20, also look around on line 19 and 21 also. If it says the error is on line 1 and you don't see an error on Line 1 Look for missing () {} and '' anywhere on the page. Then look for words that are not quite right like 'box' when it should be 'box1'. Sometimes the debugger will say something cryptic -- you can always look up that error on google or stack-overflow for a better explanation of the error.

The debugger is just one way to see what's wrong with your code. Another way is to open the console log on your browser. I do this by right clicking on anything on the screen then going to inspect element and then choosing 'console' This brings up a whole panel for developers. If you find the word console and click on it, it will have every error that the entire program is making not just your code. This may give you clues also. You are looking for syntax errors. At the bottom of the console is place where you can type. If you type in a variable name it will show you all the properties of that variable. You can also type in javascript. For advanced users you can see and change properties. Start typing top.webgliframe. For example if have an object named penguin it would be top.webgliframe.penguin. to see all the properties and variables that penguin has. If you have created a button named button1 you would use top.webgliframe.button1 to see all the properties.

A common error is An abnormal situation has occurred: the PlayerLoop internal function has been called recursively.
Restart the page using the restart button on the page across from the docs tab. If that doesn't work you'll have to refresh the page itself. If that doesn't work you'll have to quit the browser and start it up again.

For loops and while loops that never end can hang your browser. If your browser stops responding there is something in your code that is running and won't stop. Refresh the page and check the stop conditions on your for loops and while loops. Another thing that can cause an infinite loop is a function which calls another function which calls the original function, or a function that calls itself.

If your project seems to be choppy, remove unnecessary log() or console.log() calls. These can slow down the browser. Comment them out and see if the project runs more smoothly.

If your program is frozen or unresponsive see if one of these will fix the problem:

1. So you don't lose your work, copy your script by selecting it and going to edit-copy. Paste your script somewhere on your computer so you have a copy of it.
2. Hit the restart button to the right of the About tab.
3. Find the refresh button for the browser that will reload the page. Google if you're not sure where it is.
4. Close the browser window.
5. Quit the browser and start it up again.
6. Clear the history and cache of the browser. Google if you are not sure how to do this.
7. Force the Browser to Quit
8. Post your code and ask a question about why it doesn't work on StackOverflow.com

Tutorials

Tutorial Link Test

Here you go step1 of the Build a game tutorialtest

Here you go step2 of the Build a game tutorialtest

//hit run to start
//then hit instructions
//then hack the code

//load objects
load('penguin','penguin',-5,1,0);

//create tower
load('box','box0');//start box
box0.scale=vector(2,2,2);

//loop to add 9 more boxes 
for(var i=1;i<10;i++){
load('box','box'+i);
find('box'+i).scale=vector(2,2,2);
ontop('box'+i,'box'+(i-1));//calculation (i-1) must be in parenthesis
find('box'+i).rot.v=vector(0,0,0);
}

//cameras
setCamera('penguin','follow',50,0,1,20);
dynamicZoomOn('penguin','box9');

//user interface
createHelp("myhelp","instructions","Drag the penguin's hands legs or feet and try to land on top of the stack of blocks for 10 seconds.")
createHelp("myhelp","instructions 2","Can you knock out only the bottom block? 
You can change physics by typing code into the command line.
For example: penguin.mass=10;
box0.setFriction(1)
box0.mass=2
See the docs-->physics for more info.")
startTimer("yvel");//this should to be in place before we create the chart
createButton('myreset','reset','clearRun()');
//createChart to be last due to some mywidget bug
createChart("vel","velocity","getTimer('yvel')/500","penguin.vel.y",500,0,100,10,-20,20,5)

//functions
function reset(){
checkstacktimer=0;
createInterval('checkStack',1000);
box0.pos=vector(0,1,0);
box0.vel=vector(0,0,0);
box0.angvel=vector(0,0,0);

for(var i=1;i<10;i++){
    find('box'+i).rot=vector(0,0,0);
    find('box'+i).vel=vector(0,0,0);
    find('box'+(i-1)).rot=vector(0,0,0);
    ontop('box'+i,'box'+(i-1));
}

penguin.pos=vector(-5,1,0);
penguin.vel=vector(0,0,0);

}


createInterval('checkLanding',1000);

collisionWatch('penguin','box9','onEnter','onExit');
landedTimer=0;
landed=false;

function onEnter(){
landed=true;
//log('landed');
}

function onExit(){
landed=false;
landedTimer=0;
//log('left');
}


function checkLanding(){
if(landed==true){
landedTimer+=1;
}
if(landedTimer==10){
youWin(10,'goldcoin','penguin','You just earned 10 coins');//visual effect
showText("You Win",5,"bold");
}
//log('landedTimer='+landedTimer);
}

//extras
//to measure acceleration we don't use object.acc because that is what is applied
//to the object each frame.
//instead we have to actually measure the change in velocity over time.

//pVy=0;
//var measuredacc=0;
//createInterval("getAcc",250);
//function getAcc(){
//    vy1=penguin.vel.y;
//    measuredacc=vy1-pVy;
//  measuredacc=measuredacc*1000/250;//the denominator is the interval rate
//    pVy=vy1;
//    log(measuredacc);
//}
//startTimer("yvel");
//createChart("vel","acceleration","getTimer('yvel')/500","measuredacc",500,0,100,10,-20,20,5)

go to top