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!");
}
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:
- a Renderer
- a Camera
- a Scene
- a 3D Model inside the scene
- a Material for the Model
- 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.
Intro to programming LIVERPOOL GIRL GEEKS 16th August 2013 I'm Claudia Doppioslash @doppioslash - http://gplus.to/gattoclaudia http://blog.doppioslash.com
Intro to programming
By Claudia Doppioslash
Intro to programming
- 3,895
