Intro to programming


LIVERPOOL GIRL GEEKS
16th August 2013



I'm
Claudia Doppioslash
@doppioslash - http://gplus.to/gattoclaudia
http://blog.doppioslash.com

ABOUT ME

I come from Italy. I've been a programmer since 2009.
I started as an iPhone Developer, but I am a language geek and I like learning many strange and different programming languages: 
Objective-C, Clojure, Erlang, Lua, Python, Javascript, C, Boo...

My favourite language is Clojure and I attend the Liverpool Clojure Dojo at DoES every month.
( https://liverpoolclojuredojo.eventbrite.co.uk/ )

Currently at work I use Unity and develop in Boo, a rather interesting Python-like language.

ABOUT YOU


Why are you interested in programming?

Have you already programmed?

If yes, what is your favourite language?

What is your favourite game?

What is your of idea of yourself in the future?

TRENDS IN GAME PROGRAMMING


Unity 3d ( http://unity3d.com ) is a very popular game engine which has a free version and a lot of tutorials available.

C++ never gets old and is still very much in use, if your dream is to work in AAA games you would do good to learn it.

Server/web developers are becoming more and more important due to freemium games requiring big server infrastructures to handle millions of people buying things.


WHAT PROGRAMMING IS

It's telling the computer what to do in a completely unambiguous language.

Computers are very "stupid", your instructions must be extremely precise.

Programming languages are especially constructed languages built around computer's limitations.

The code once written is translated into 0s and 1s, which are the only two values really available, all other values are built piling a lot of 0s and 1s.

THE MOST IMPORTANT THING

if you want to learn to program is:

Learn how to set up a development environment then
look for tutorials online, and most importantly type all the code in the tutorial: don't copy and paste.

The muscle memory in the fingers helps a lot in making programming as natural as speaking.

LEARNING TO PROGRAM


By typing code your brain gets used to it, and things will start to make sense much sooner. 

You cannot skip this: a theoretical understanding of programming is not enough to actually code, much as expressing yourself in an human foreign language doesn't actually happen with any fluency unless you practice a lot.

unexpected code

A powerful programming language lurks in your browser:

JAVASCRIPT

To interact with it open Chrome's Javascript console:

It's a ready to use development environment that doesn't need complicated installations of software.

CODE CHATS


Chrome's console allows us to have a "chat" with the computer, in the Javascript language.
We write a line of code and then by pressing return we get immediately an answer from the computer.


STARTING FROM HELLO WORLD


Getting the syntax right is very important as the computer will understand your code only if it perfectly follows the syntax rules.

Much of the errors that will appear when you code are syntax errors, they're easily solved and you shouldn't fear them.

In general you should never expect to write everything correctly the first time, it's ok to write a slightly wrong thing and fix it when the console complains.

SYNTAX - DOT NOTATION

We haven't talked about objects yet, but it's not important to understand everything at once.  Every little bit of familiarity helps and piles up. It's common while learning programming to do more than one pass at something. 

PROGRAMMING BASICS

VARIABLES

Variables are named bits of memory in which you store a value. They are of many different types.

var aString = "some text";    //a string
var aNumber = 110;            //a number
var aBoolean = true;          //a boolean

Some common types. You may have heard of float and double numbers, they're just numbers like this:

var aFloat = 0.5

In javascript all numbers are double numbers, actually.


PROGRAMMING BASICS

BOOLEANS

A boolean is a type of variable that can only be either 
true

or

false



PROGRAMMING BASICS

FUNCTIONS

Functions are named groups of instructions you can call to execute them in your program.

Defining it:
function printToConsole(aString){
    console.log(aString);
}
Calling it:
printToConsole("some string");
> "some string"

PROGRAMMING BASICS

IF

Decides whether to execute a bit of code based on a condition:
var aNumber = 101;
if (aNumber > 100){
    console.log(aNumber);
}
> 101

PROGRAMMING BASICS

LOOPS

Are useful for making the computer do the same thing however many times you want.

for (var i = 0; i <= 4; i++) {
    console.log("Hello again!");
}
Has the same result of:
console.log("Hello again!");
console.log("Hello again!");
console.log("Hello again!");
console.log("Hello again!");

PROGRAMMING BASICS

ARRAYS

An array is a type of variable that can contain other variables, in an ordered sequence.

var anArray = [5,7,3,2,8,9];

The sequence numbering starts from 0:

anArray[0];
> 5
anArray[1];
> 7

PROGRAMMING BASICS

DICTIONARIES (AKA HASHES)

An array is a type of variable that can contain other variables, by giving each a unique key.

var aDictionary = {"key": "value",
                   "username": "admin",
                   "password": "1234"};

to get your value back you use brackets notation:

aDictionary["key"];
> "value"

PROGRAMMING BASICS

ENUMERATION

You can go through an array or a dictionary in a for loop, without knowing how many items are in there.


for (var anObject in anArray){
    console.log(anObject);
}
INCORRECT
Javascript has no enumeration ^^;;
Enumeration is found in many other languages: C#, Python, Lua and more. 

OBJECTS

BRACKET NOTATION AND DOT NOTATION

They're two different syntaxes for the same thing. Both work, but you can do more things with bracket notation.

PROGRAMMING BASICS

OBJECTS

Since Javascript is an "Hash" language, objects are just hashes (aka dictionaries).

var anObject = {};
anObject.aProperty = "some string";
anObject.aMethod = function(){
    console.log(this.aProperty);
}
anObject.aMethod();
> "some string"
(note that dot notation is preferred)

JSBIN

A quick way to write javascript.

(You'll find all the code for this workshop on JSBIN:

http://jsbin.com/icoziq/1/edit )

JSBIN

Easy to try out javascript libraries, just by using the add library button. A library is code to do some specific thing that someone else has written. There are many free libraries online.

THREE.JS

The most popular WebGL library. It lets you show 3d objects in a web page. We can try it out quickly with JSBIN.

USING WHAT WE LEARNED


THREE.JS

Use this JSBIN page:
http://jsbin.com/ihikug/4/edit

THREE.js

To make a 3d image with Three.js you need 6 things:
  1. a Renderer
  2. a Camera
  3. a Scene
  4. a 3D Model inside the scene
  5. a Material for the Model
  6. a Light

The code is pretty long, so it's more than we can do today, but one quick thing we can do is modify values and see instantly how the rendered image changes, since JSBIN runs the code automatically when we change it.

THREE.JS SCENE QUICK MOD

We can change the radius of the sphere:
var radius = 60

The color of the light:
var pointLight = new THREE.PointLight(0x00FF00);

THREE.JS SCENE QUICK MOD

We can add a for loop so that we have a few more spheres:

I had to change the position of the spheres depending on the variable i otherwise each one would have the same position and they would hide each other.
( http://jsbin.com/ihikug/3/edit )

Q&A

Any questions?









Hope you had fun.

Made with Slides.com