How to grow a Super Power

@StonlyBaptiste

Start with Turtle steps

Step 1.

The turtle that taught me to fly

Once upon a time I built a box with the help of a turtle.

Look ma' no turtles

TurtleWax (Javascript) https://github.com/davebalmer/turtlewax

  <script>
  $(function() {
    var canvas = $('#mycanvas1');
    var p = new Pen("mycanvas1");
    p.penstyle("lightgreen");
    p.jump(30, 30)
     .right(140)
     .down(140)
     .left(140)
     .up(140)
     .fillstyle("transparent")
     .draw();

    p.jump(100,100).draw();
    for(var i=0; i<=360; i++){
      var x = 100 + 100 * Math.cos(i);
      var y = 100 + 100 * Math.sin(i);
      p.jump(x,y)
       .right(1)
       .draw();
    }
  });
</script>

<canvas id="mycanvas1" height="300" width="450">

Learn the Basics

Step 2.

Basic was not so basic

http://www.calormen.com/applesoft/

Meet my Super Pet snake

The 'Basic' of today is a programming language called Python.
A programming language is a computer program that translates what you tell it into instructions that the computer can understand.
A programming language like Python can help you make the computer do basic things (like math) or complex things (like games).

The force is with you.

Read Google's Free Python Course

Sharpen the pencil, practice your power

Step 3.

Learn Python in Y minutes


# Single line comments start with a hash.
""" Multiline strings can be written
    using three "'s, and are often used
    as comments
"""

####################################################
## 1. Primitive Datatypes and Operators
####################################################

# You have numbers
3 #=> 3

# Math is what you would expect
1 + 1 #=> 2
8 - 1 #=> 7
10 * 2 #=> 20
35 / 5 #=> 7

# Division is a bit tricky. It is integer division and floors the results
# automatically.
5 / 2 #=> 2

# To fix division we need to learn about floats.
2.0     # This is a float
11.0 / 4.0 #=> 2.75 ahhh...much better

# Enforce precedence with parentheses
(1 + 3) * 2 #=> 8

# Boolean values are primitives
True
False

# negate with not
not True #=> False
not False #=> True

# Equality is ==
1 == 1 #=> True
2 == 1 #=> False

# Inequality is !=
1 != 1 #=> False
2 != 1 #=> True

# More comparisons
1 < 10 #=> True
1 > 10 #=> False
2 <= 2 #=> True
2 >= 2 #=> True

# Comparisons can be chained  !
1 < 2 < 3 #=> True
2 < 3 < 2 #=> False

# Strings are created with " or '
"This is a string."
'This is also a string.'

# Strings can be added too!
"Hello " + "world!" #=> "Hello world!"

# A string can be treated like a list of characters
"This is a string"[0] #=> 'T'

# % can be used to format strings, like this:
"%s can be %s" % ("strings", "interpolated")

# A newer way to format strings is the format method.
# This method is the preferred way
"{0} can be {1}".format("strings", "formatted")
# You can use keywords if you don't want to count.
"{name} wants to eat {food}".format(name="Bob", food="lasagna")

# None is an object
None #=> None

# Don't use the equality `==` symbol to compare objects to None
# Use `is` instead
"etc" is None #=> False
None is None  #=> True

# The 'is' operator tests for object identity. This isn't
# very useful when dealing with primitive values, but is
# very useful when dealing with objects.

# None, 0, and empty strings/lists all evaluate to False.
# All other values are True
0 == False  #=> True
"" == False #=> True


####################################################
## 2. Variables and Collections
####################################################

# Printing is pretty easy
print "I'm Python. Nice to meet you!"


# No need to declare variables before assigning to them.
some_var = 5    # Convention is to use lower_case_with_underscores
some_var #=> 5

# Accessing a previously unassigned variable is an exception.
# See Control Flow to learn more about exception handling.
some_other_var  # Raises a name error

# if can be used as an expression
"yahoo!" if 3 > 2 else 2 #=> "yahoo!"

# Lists store sequences
li = []
# You can start with a prefilled list
other_li = [4, 5, 6]

# Add stuff to the end of a list with append
li.append(1)    #li is now [1]
li.append(2)    #li is now [1, 2]
li.append(4)    #li is now [1, 2, 4]
li.append(3)    #li is now [1, 2, 4, 3]
# Remove from the end with pop
li.pop()        #=> 3 and li is now [1, 2, 4]
# Let's put it back
li.append(3)    # li is now [1, 2, 4, 3] again.

# Access a list like you would any array
li[0] #=> 1
# Look at the last element
li[-1] #=> 3

# Looking out of bounds is an IndexError
li[4] # Raises an IndexError

# You can look at ranges with slice syntax.
# (It's a closed/open range for you mathy types.)
li[1:3] #=> [2, 4]
# Omit the beginning
li[2:] #=> [4, 3]
# Omit the end
li[:3] #=> [1, 2, 4]

# Remove arbitrary elements from a list with del
del li[2] # li is now [1, 2, 3]

# You can add lists
li + other_li #=> [1, 2, 3, 4, 5, 6] - Note: li and other_li is left alone

# Concatenate lists with extend
li.extend(other_li) # Now li is [1, 2, 3, 4, 5, 6]

# Check for existence in a list with in
1 in li #=> True

# Examine the length with len
len(li) #=> 6


# Tuples are like lists but are immutable.
tup = (1, 2, 3)
tup[0] #=> 1
tup[0] = 3  # Raises a TypeError

# You can do all those list thingies on tuples too
len(tup) #=> 3
tup + (4, 5, 6) #=> (1, 2, 3, 4, 5, 6)
tup[:2] #=> (1, 2)
2 in tup #=> True

# You can unpack tuples (or lists) into variables
a, b, c = (1, 2, 3)     # a is now 1, b is now 2 and c is now 3
# Tuples are created by default if you leave out the parentheses
d, e, f = 4, 5, 6
# Now look how easy it is to swap two values
e, d = d, e     # d is now 5 and e is now 4


# Dictionaries store mappings
empty_dict = {}
# Here is a prefilled dictionary
filled_dict = {"one": 1, "two": 2, "three": 3}

# Look up values with []
filled_dict["one"] #=> 1

# Get all keys as a list
filled_dict.keys() #=> ["three", "two", "one"]
# Note - Dictionary key ordering is not guaranteed.
# Your results might not match this exactly.

# Get all values as a list
filled_dict.values() #=> [3, 2, 1]
# Note - Same as above regarding key ordering.

# Check for existence of keys in a dictionary with in
"one" in filled_dict #=> True
1 in filled_dict #=> False

 # Looking up a non-existing key is a KeyError
filled_dict["four"] # KeyError

# Use get method to avoid the KeyError
filled_dict.get("one") #=> 1
filled_dict.get("four") #=> None
# The get method supports a default argument when the value is missing
filled_dict.get("one", 4) #=> 1
filled_dict.get("four", 4) #=> 4

# Setdefault method is a safe way to add new key-value pair into dictionary
filled_dict.setdefault("five", 5) #filled_dict["five"] is set to 5
filled_dict.setdefault("five", 6) #filled_dict["five"] is still 5


# Sets store ... well sets
empty_set = set()
# Initialize a set with a bunch of values
some_set = set([1,2,2,3,4]) # filled_set is now set([1, 2, 3, 4])

# Since Python 2.7, {} can be used to declare a set
filled_set = {1, 2, 2, 3, 4} # => {1 2 3 4}

# Add more items to a set
filled_set.add(5) # filled_set is now {1, 2, 3, 4, 5}

# Do set intersection with &
other_set = {3, 4, 5, 6}
filled_set & other_set #=> {3, 4, 5}

# Do set union with |
filled_set | other_set #=> {1, 2, 3, 4, 5, 6}

# Do set difference with -
{1,2,3,4} - {2,3,5} #=> {1, 4}

# Check for existence in a set with in
2 in filled_set #=> True
10 in filled_set #=> False


####################################################
## 3. Control Flow
####################################################

# Let's just make a variable
some_var = 5

# Here is an if statement. Indentation is significant in python!
# prints "some var is smaller than 10"
if some_var > 10:
    print "some_var is totally bigger than 10."
elif some_var < 10:    # This elif clause is optional.
    print "some_var is smaller than 10."
else:           # This is optional too.
    print "some_var is indeed 10."


"""
For loops iterate over lists
prints:
    dog is a mammal
    cat is a mammal
    mouse is a mammal
"""
for animal in ["dog", "cat", "mouse"]:
    # You can use % to interpolate formatted strings
    print "%s is a mammal" % animal
    
"""
`range(number)` returns a list of numbers 
from zero to the given number
prints:
    0
    1
    2
    3
"""
for i in range(4):
    print i

"""
While loops go until a condition is no longer met.
prints:
    0
    1
    2
    3
"""
x = 0
while x < 4:
    print x
    x += 1  # Shorthand for x = x + 1

# Handle exceptions with a try/except block

# Works on Python 2.6 and up:
try:
    # Use raise to raise an error
    raise IndexError("This is an index error")
except IndexError as e:
    pass    # Pass is just a no-op. Usually you would do recovery here.


####################################################
## 4. Functions
####################################################

# Use def to create new functions
def add(x, y):
    print "x is %s and y is %s" % (x, y)
    return x + y    # Return values with a return statement

# Calling functions with parameters
add(5, 6) #=> prints out "x is 5 and y is 6" and returns 11

# Another way to call functions is with keyword arguments
add(y=6, x=5)   # Keyword arguments can arrive in any order.

# You can define functions that take a variable number of
# positional arguments
def varargs(*args):
    return args

varargs(1, 2, 3) #=> (1,2,3)


# You can define functions that take a variable number of
# keyword arguments, as well
def keyword_args(**kwargs):
    return kwargs

# Let's call it to see what happens
keyword_args(big="foot", loch="ness") #=> {"big": "foot", "loch": "ness"}

# You can do both at once, if you like
def all_the_args(*args, **kwargs):
    print args
    print kwargs
"""
all_the_args(1, 2, a=3, b=4) prints:
    (1, 2)
    {"a": 3, "b": 4}
"""

# When calling functions, you can do the opposite of varargs/kwargs!
# Use * to expand tuples and use ** to expand kwargs.
args = (1, 2, 3, 4)
kwargs = {"a": 3, "b": 4}
all_the_args(*args) # equivalent to foo(1, 2, 3, 4)
all_the_args(**kwargs) # equivalent to foo(a=3, b=4)
all_the_args(*args, **kwargs) # equivalent to foo(1, 2, 3, 4, a=3, b=4)

# Python has first class functions
def create_adder(x):
    def adder(y):
        return x + y
    return adder

add_10 = create_adder(10)
add_10(3) #=> 13

# There are also anonymous functions
(lambda x: x > 2)(3) #=> True

# There are built-in higher order functions
map(add_10, [1,2,3]) #=> [11, 12, 13]
filter(lambda x: x > 5, [3, 4, 5, 6, 7]) #=> [6, 7]

# We can use list comprehensions for nice maps and filters
[add_10(i) for i in [1, 2, 3]]  #=> [11, 12, 13]
[x for x in [3, 4, 5, 6, 7] if x > 5] #=> [6, 7]

####################################################
## 5. Classes
####################################################

# We subclass from object to get a class.
class Human(object):

     # A class attribute. It is shared by all instances of this class
    species = "H. sapiens"

    # Basic initializer
    def __init__(self, name):
        # Assign the argument to the instance's name attribute
        self.name = name

    # An instance method. All methods take self as the first argument
    def say(self, msg):
       return "%s: %s" % (self.name, msg)

    # A class method is shared among all instances
    # They are called with the calling class as the first argument
    @classmethod
    def get_species(cls):
        return cls.species

    # A static method is called without a class or instance reference
    @staticmethod
    def grunt():
        return "*grunt*"


# Instantiate a class
i = Human(name="Ian")
print i.say("hi")     # prints out "Ian: hi"

j = Human("Joel")
print j.say("hello")  #prints out "Joel: hello"

# Call our class method
i.get_species() #=> "H. sapiens"

# Change the shared attribute
Human.species = "H. neanderthalensis"
i.get_species() #=> "H. neanderthalensis"
j.get_species() #=> "H. neanderthalensis"

# Call the static method
Human.grunt() #=> "*grunt*"


####################################################
## 6. Modules
####################################################

# You can import modules
import math
print math.sqrt(16) #=> 4

# You can get specific functions from a module
from math import ceil, floor
print ceil(3.7)  #=> 4.0
print floor(3.7) #=> 3.0

# You can import all functions from a module.
# Warning: this is not recommended
from math import *

# You can shorten module names
import math as m
math.sqrt(16) == m.sqrt(16) #=> True

# Python modules are just ordinary python files. You
# can write your own, and import them. The name of the 
# module is the same as the name of the file.

# You can find out which functions and attributes
# defines a module.
import math
dir(math)

Get more powers!

Step 4.

Our Power Trip

These are also refered to as "programming languages" and "markup languages"

Logo Turtle Power
Basic Power
Python Power
HTML & CSS Power
Javascript Power

HTML (Hypter Text Markup Language)

HTML tells the browser how to draw and layout your application.
Press run, then modify some code and press "run" again

<header>
  <h1>My Site!</h1>
  <nav><ul>
    <li><a href='#'>Link 1</a></li>
    <li><a href='#'>Link 2</a></li>
  </ul></nav>
</header>

<section id='content'>
  <article class='blog-post'>
    <h1>Blog Post 1</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Sed ac elit at nisl sagittis ...</p>
  </article>
</section>
<footer>
  <a href='#'>Link 1</a> | <a href='#'>Link 2</a>
</footer>

CSS (Cascade Style Sheet)

CSS is what makes your application look nice.

body { background-color:white; }
h1 { color:blue; }
h2 { color:red;}
p  { color:pink;}
.stuff  { color:purple;}
#my-div { color:teal;}

Javascript/jQuery

Javascript is what makes the web dance.

<script>
  $(function() {
    $(".box").animate({ 
        'top':"33%", 
        'left':"33%" });
    $(".box").animate({ 
        'left':"25%",
        'width':"350px",
        'height':"100px"
      }, function(){
          $(".box").html('<h1>     You Are Awesome! ☺<h1>')
        });
    
  });
</script>
<style>
  .box { 
    top:0px; left:0px;
    width:50px; height:50px; 
    position:absolute; 
    background-color:red;
  }
</style>
<div class='box'></div>

Keep practicing!

Step 5.

Learn Javascript in Y minutes

// Comments are like C. Single-line comments start with two slashes,
/* and multiline comments start with slash-star
   and end with star-slash */

// Statements can be terminated by ;
doStuff();

// ... but they don't have to be, as semicolons are automatically inserted
// wherever there's a newline, except in certain cases.
doStuff()

// We'll leave semicolons off here; whether you do or not will depend on your
// personal preference or your project's style guide.

///////////////////////////////////
// 1. Numbers, Strings and Operators

// Javascript has one number type (which is a 64-bit IEEE 754 double).
3 // = 3
1.5 // = 1.5

// All the basic arithmetic works as you'd expect.
1 + 1 // = 2
8 - 1 // = 7
10 * 2 // = 20
35 / 5 // = 7

// Including uneven division.
5 / 2 // = 2.5

// Bitwise operations also work; when you perform a bitwise operation your float
// is converted to a signed int *up to* 32 bits.
1 << 2 // = 4

// Precedence is enforced with parentheses.
(1 + 3) * 2 // = 8

// There are three special not-a-real-number values:
Infinity // result of e.g. 1/0
-Infinity // result of e.g. -1/0
NaN // result of e.g. 0/0

// There's also a boolean type.
true
false

// Strings are created with ' or ".
'abc'
"Hello, world"

// Negation uses the ! symbol
!true // = false
!false // = true

// Equality is ==
1 == 1 // = true
2 == 1 // = false

// Inequality is !=
1 != 1 // = false
2 != 1 // = true

// More comparisons
1 < 10 // = true
1 > 10 // = false
2 <= 2 // = true
2 >= 2 // = true

// Strings are concatenated with +
"Hello " + "world!" // = "Hello world!"

// and are compared with < and >
"a" < "b" // = true

// Type coercion is performed for comparisons...
"5" == 5 // = true

// ...unless you use ===
"5" === 5 // = false

// You can access characters in a string with charAt
"This is a string".charAt(0)

// There's also null and undefined
null // used to indicate a deliberate non-value
undefined // used to indicate a value that hasn't been set yet

// null, undefined, NaN, 0 and "" are falsy, and everything else is truthy.
// Note that 0 is falsy and "0" is truthy, even though 0 == "0".

///////////////////////////////////
// 2. Variables, Arrays and Objects

// Variables are declared with the var keyword. Javascript is dynamically typed,
// so you don't need to specify type. Assignment uses a single = character.
var someVar = 5

// if you leave the var keyword off, you won't get an error...
someOtherVar = 10

// ...but your variable will be created in the global scope, not in the scope
// you defined it in.

// Variables declared without being assigned to are set to undefined.
var someThirdVar // = undefined

// There's shorthand for performing math operations on variables:
someVar += 5 // equivalent to someVar = someVar + 5; someVar is 10 now
someVar *= 10 // now someVar is 100

// and an even-shorter-hand for adding or subtracting 1
someVar++ // now someVar is 101
someVar-- // back to 100

// Arrays are ordered lists of values, of any type.
var myArray = ["Hello", 45, true]

// Their members can be accessed using the square-brackets subscript syntax.
// Array indices start at zero.
myArray[1] // = 45

// JavaScript's objects are equivalent to 'dictionaries' or 'maps' in other
// languages: an unordered collection of key-value pairs.
{key1: "Hello", key2: "World"}

// Keys are strings, but quotes aren't required if they're a valid
// JavaScript identifier. Values can be any type.
var myObj = {myKey: "myValue", "my other key": 4}

// Object attributes can also be accessed using the subscript syntax,
myObj["my other key"] // = 4

// ... or using the dot syntax, provided the key is a valid identifier.
myObj.myKey // = "myValue"

// Objects are mutable; values can be changed and new keys added.
myObj.myThirdKey = true

// If you try to access a value that's not yet set, you'll get undefined.
myObj.myFourthKey // = undefined

///////////////////////////////////
// 3. Logic and Control Structures

// The if structure works as you'd expect.
var count = 1
if (count == 3){
    // evaluated if count is 3
} else if (count == 4) {
    // evaluated if count is 4
} else {
    // evaluated if it's not either 3 or 4
}

// As does while.
while (true) {
    // An infinite loop!
}

// Do-while loops are like while loops, except they always run at least once.
var input
do {
    input = getInput()
} while (!isValid(input))

// the for loop is the same as C and Java: 
// initialisation; continue condition; iteration.
for (var i = 0; i < 5; i++){
    // will run 5 times
}

// && is logical and, || is logical or
if (house.size == "big" && house.colour == "blue"){
    house.contains = "bear"
}
if (colour == "red" || colour == "blue"){
    // colour is either red or blue
}

// && and || "short circuit", which is useful for setting default values.
var name = otherName || "default"

///////////////////////////////////
// 4. Functions, Scope and Closures

// JavaScript functions are declared with the function keyword.
function myFunction(thing){
    return thing.toUpperCase()
}
myFunction("foo") // = "FOO"

// Functions can also be defined "anonymously" - without a name:
function(thing){
    return thing.toLowerCase()
}
// (we can't call our function, since we don't have a name to refer to it with)

// JavaScript functions are first class objects, so they can be reassigned to
// different variable names and passed to other functions as arguments - for
// example, when supplying an event handler:
function myFunction(){
    // this code will be called in 5 seconds' time
}
setTimeout(myFunction, 5000)

// You can even write the function statement directly in the call to the other
// function.

setTimeout(function myFunction(){
    // this code will be called in 5 seconds' time
}, 5000)

// JavaScript has function scope; functions get their own scope but other blocks
// do not.
if (true){
    var i = 5
}
i // = 5 - not undefined as you'd expect in a block-scoped language

// This has led to a common pattern of "immediately-executing anonymous
// functions", which prevent temporary variables from leaking into the global
// scope.
function(){
    var temporary = 5
    // We can access the global scope by assiging to the 'global object', which
    // in a web browser is always 'window'. The global object may have a
    // different name in non-browser environments such as Node.js.
    window.permanent = 10
    // Or, as previously mentioned, we can just leave the var keyword off.
    permanent2 = 15
}()
temporary // raises ReferenceError
permanent // = 10
permanent2 // = 15

// One of JavaScript's most powerful features is closures. If a function is
// defined inside another function, the inner function has access to all the
// outer function's variables.
function sayHelloInFiveSeconds(name){
    var prompt = "Hello, " + name + "!"
    function inner(){
        alert(prompt)
    }
    setTimeout(inner, 5000)
    // setTimeout is asynchronous, so this function will finish without waiting
    // 5 seconds. However, once the 5 seconds is up, inner will still have
    // access to the value of prompt.
}
sayHelloInFiveSeconds("Adam") // will open a popup with "Hello, Adam!" in 5s

///////////////////////////////////
// 5. More about Objects; Constructors and Prototypes

// Objects can contain functions.
var myObj = {
    myFunc: function(){
        return "Hello world!"
    }
}
myObj.myFunc() // = "Hello world!"

// When functions attached to an object are called, they can access the object
// they're attached to using the this keyword.
myObj = {
    myString: "Hello world!",
    myFunc: function(){
        return this.myString
    }
}
myObj.myFunc() // = "Hello world!"

// What this is set to has to do with how the function is called, not where
// it's defined. So, our function doesn't work if it isn't called in the
// context of the object.
var myFunc = myObj.myFunc
myFunc() // = undefined

// Inversely, a function can be assigned to the object and gain access to it
// through this, even if it wasn't attached when it was defined.
var myOtherFunc = function(){
    return this.myString.toUpperCase()
}
myObj.myOtherFunc = myOtherFunc
myObj.myOtherFunc() // = "HELLO WORLD!"

// When you call a function with the new keyword, a new object is created, and
// made available to the function via this. Functions designed to be called
// like this are called constructors.

var MyConstructor = function(){
    this.myNumber = 5
}
myNewObj = new MyConstructor() // = {myNumber: 5}
myNewObj.myNumber // = 5

// Every JavaScript object has a 'prototype'. When you go to access a property
// on an object that doesn't exist on the actual object, the interpreter will
// look at its prototype.

// Some JS implementations let you access an object's prototype on the magic
// property __proto__. While this is useful for explaining prototypes it's not
// part of the standard; we'll get to standard ways of using prototypes later.
var myObj = {
    myString: "Hello world!",
}
var myPrototype = {
    meaningOfLife: 42,
    myFunc: function(){
        return this.myString.toLowerCase()
    }
}
myObj.__proto__ = myPrototype
myObj.meaningOfLife // = 42

// This works for functions, too.
myObj.myFunc() // = "hello world!"

// Of course, if your property isn't on your prototype, the prototype's
// prototype is searched, and so on.
myPrototype.__proto__ = {
    myBoolean: true
}
myObj.myBoolean // = true

// There's no copying involved here; each object stores a reference to its
// prototype. This means we can alter the prototype and our changes will be
// reflected everywhere.
myPrototype.meaningOfLife = 43
myObj.meaningOfLife // = 43

// We mentioned that __proto__ was non-standard, and there's no standard way to
// change the prototype of an existing object. However, there's two ways to
// create a new object with a given prototype.

// The first is Object.create, which is a recent addition to JS, and therefore
// not available in all implementations yet.
var myObj = Object.create(myPrototype)
myObj.meaningOfLife // = 43

// The second way, which works anywhere, has to do with constructors.
// Constructors have a property called prototype. This is *not* the prototype of
// the constructor function itself; instead, it's the prototype that new objects
// are given when they're created with that constructor and the new keyword.
myConstructor.prototype = {
    getMyNumber: function(){
        return this.myNumber
    }
}
var myNewObj2 = new myConstructor()
myNewObj2.getMyNumber() // = 5

// Built-in types like strings and numbers also have constructors that create
// equivalent wrapper objects.
var myNumber = 12
var myNumberObj = new Number(12)
myNumber == myNumberObj // = true

// Except, they aren't exactly equivalent.
typeof(myNumber) // = 'number'
typeof(myNumberObj) // = 'object'
myNumber === myNumberObj // = false
if (0){
    // This code won't execute, because 0 is falsy.
}
if (Number(0)){
    // This code *will* execute, because Number(0) is truthy.
}

// However, the wrapper objects and the regular builtins share a prototype, so
// you can actually add functionality to a string, for instance.
String.prototype.firstCharacter = function(){
    return this.charAt(0)
}
"abc".firstCharacter() // = "a"

// This fact is often used in "polyfilling", which is implementing newer
// features of JavaScript in an older subset of JavaScript, so that they can be
// used in older environments such as outdated browsers.

// For instance, we mentioned that Object.create isn't yet available in all
// implementations, but we can still use it with this polyfill:
if (Object.create === undefined){ // don't overwrite it if it exists
    Object.create = function(proto){
        // make a temporary constructor with the right prototype
        var Constructor = function(){}
        Constructor.prototype = proto
        // then use it to create a new, appropriately-prototyped object
        return new Constructor()
    }
}

//
//
// Use console.log() to see your output.
// ex. console.log('Hello, World!')
//

Exercise the Power of Awesome!

Step 6.

You don't HAVE to know programming to be awesome

... but it helps

Solve small problems
#The multiplication table for 7 up to 50 [i*7 for i in range(1,8) if i*7 <= 50]
Solve BIG problems

<script>
    var camera, scene, renderer;
    var controls;
    var root;
    var objects = [];
    var tmpVec1 = new THREE.Vector3();
    var tmpVec2 = new THREE.Vector3();
    var tmpVec3 = new THREE.Vector3();
    var tmpVec4 = new THREE.Vector3();
    var visualizationType = 2;
    var MOLECULES = {
      "Ethanol": "ethanol.pdb",
      "Aspirin": "aspirin.pdb",
      "Caffeine": "caffeine.pdb",
      "Nicotine": "nicotine.pdb",
      "LSD": "lsd.pdb",
      "Cocaine": "cocaine.pdb",
      "Cholesterol": "cholesterol.pdb",
      "Lycopene": "lycopene.pdb",
      "Glucose": "glucose.pdb",
      "Aluminium oxide": "Al2O3.pdb",
      "Cubane": "cubane.pdb",
      "Copper": "cu.pdb",
      "Fluorite": "caf2.pdb",
      "Salt": "nacl.pdb",
      "YBCO superconductor": "ybco.pdb",
      "Buckyball": "buckyball.pdb",
      //"Diamond": "diamond.pdb",
      "Graphite": "graphite.pdb"
    };
    var loader = new THREE.PDBLoader();
    var colorSpriteMap = {};
    var baseSprite = document.createElement( 'img' );

      init();
      animate();

      function init() {

        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
        camera.position.z = 500;

        scene = new THREE.Scene();

        root = new THREE.Object3D();
        scene.add( root );

        //

        renderer = new THREE.CSS3DRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.getElementById( 'container' ).appendChild( renderer.domElement );

        //

        controls = new THREE.TrackballControls( camera, renderer.domElement );
        controls.rotateSpeed = 0.5;
        controls.addEventListener( 'change', render );

        //

        baseSprite.onload = function () {

          loadMolecule( "../extensions/models/molecules/caffeine.pdb" );

        };

        baseSprite.src = '../extensions/textures/sprites/ball.png';

        //

        window.addEventListener( 'resize', onWindowResize, false );

      }

      //

      function generateButtonCallback( url ) {

        return function ( event ) {

          loadMolecule( url );

        }

      }

      //

      function showAtoms() {

        for ( var i = 0; i < objects.length; i ++ ) {

          var object = objects[ i ];

          if ( object instanceof THREE.CSS3DSprite ) {

            object.element.style.display = "";
            object.visible = true;

          } else {

            object.element.style.display = "none";
            object.visible = false;

          }

        }

      }

      function showBonds() {

        for ( var i = 0; i < objects.length; i ++ ) {

          var object = objects[ i ];

          if ( object instanceof THREE.CSS3DSprite ) {

            object.element.style.display = "none";
            object.visible = false;

          } else {

            object.element.style.display = "";
            object.element.style.height = object.userData.bondLengthFull;
            object.visible = true;

          }

        }

      }

      function showAtomsBonds() {

        for ( var i = 0; i < objects.length; i ++ ) {

          var object = objects[ i ];

          object.element.style.display = "";
          object.visible = true;

          if ( ! ( object instanceof THREE.CSS3DSprite ) ) {

            object.element.style.height = object.userData.bondLengthShort;

          }

        }

      }

      //

      function colorify( ctx, width, height, color, a ) {

        var r = color.r;
        var g = color.g;
        var b = color.b;
        console.log(width,height)
        width = 50;
        height = 50;
        var imageData = ctx.getImageData( 0, 0, width, height );
        var data = imageData.data;

        for ( var y = 0; y < height; y ++ ) {

          for ( var x = 0; x < width; x ++ ) {

            var index = ( y * width + x ) * 4;

            data[ index ]     *= r;
            data[ index + 1 ] *= g;
            data[ index + 2 ] *= b;
            data[ index + 3 ] *= a;

          }

        }

        ctx.putImageData( imageData, 0, 0 );

      }

      function imageToCanvas( image ) {

        var width = image.width;
        var height = image.height;

        var canvas = document.createElement( 'canvas' );

        canvas.width = width;
        canvas.height = height;

        var context = canvas.getContext( '2d' );
        context.drawImage( image, 0, 0, width, height );

        return canvas;

      }

      //

      function loadMolecule( url ) {

        for ( var i = 0; i < objects.length; i ++ ) {

          var object = objects[ i ];
          object.parent.remove( object );

        }

        objects = [];

        loader.load( url, function ( geometry, geometryBonds ) {

          var offset = THREE.GeometryUtils.center( geometry );
          geometryBonds.applyMatrix( new THREE.Matrix4().makeTranslation( offset.x, offset.y, offset.z ) );

          for ( var i = 0; i < geometry.vertices.length; i ++ ) {

            var position = geometry.vertices[ i ];
            var color = geometry.colors[ i ];
            var element = geometry.elements[ i ];
            if ( ! colorSpriteMap[ element ] ) {

              var canvas = imageToCanvas( baseSprite );
              var context = canvas.getContext( '2d' );
              console.log(canvas.width)
              colorify( context, canvas.width, canvas.height, color, 1 );

              var dataUrl = canvas.toDataURL();

              colorSpriteMap[ element ] = dataUrl;

            }

            colorSprite = colorSpriteMap[ element ];

            var atom = document.createElement( 'img' );
            atom.src = colorSprite;

            var object = new THREE.CSS3DSprite( atom );
            object.position.copy( position );
            object.position.multiplyScalar( 75 );

            object.matrixAutoUpdate = false;
            object.updateMatrix();

            root.add( object );

            objects.push( object );

          }

          for ( var i = 0; i < geometryBonds.vertices.length; i += 2 ) {

            var start = geometryBonds.vertices[ i ];
            var end = geometryBonds.vertices[ i + 1 ];

            start.multiplyScalar( 75 );
            end.multiplyScalar( 75 );

            tmpVec1.subVectors( end, start );
            var bondLength = tmpVec1.length() - 50;


            //

            var bond = document.createElement( 'div' );
            bond.className = "bond";
            bond.style.height = bondLength + "px";

            var object = new THREE.CSS3DObject( bond );
            object.position.copy( start );
            object.position.lerp( end, 0.5 );

            object.userData.bondLengthShort = bondLength + "px";
            object.userData.bondLengthFull = ( bondLength + 55 ) + "px";

            //

            var axis = tmpVec2.set( 0, 1, 0 ).cross( tmpVec1 );
            var radians = Math.acos( tmpVec3.set( 0, 1, 0 ).dot( tmpVec4.copy( tmpVec1 ).normalize() ) );

            var objMatrix = new THREE.Matrix4().makeRotationAxis( axis.normalize(), radians );
            object.matrix = objMatrix;
            object.rotation.setFromRotationMatrix( object.matrix, object.rotation.order );

            object.matrixAutoUpdate = false;
            object.updateMatrix();

            root.add( object );

            objects.push( object );

            //

            var bond = document.createElement( 'div' );
            bond.className = "bond";
            bond.style.height = bondLength + "px";

            var joint = new THREE.Object3D( bond );
            joint.position.copy( start );
            joint.position.lerp( end, 0.5 );

            joint.matrix.copy( objMatrix );
            joint.rotation.setFromRotationMatrix( joint.matrix, joint.rotation.order );

            joint.matrixAutoUpdate = false;
            joint.updateMatrix();

            var object = new THREE.CSS3DObject( bond );
            object.rotation.y = Math.PI/2;

            object.matrixAutoUpdate = false;
            object.updateMatrix();

            object.userData.bondLengthShort = bondLength + "px";
            object.userData.bondLengthFull = ( bondLength + 55 ) + "px";

            object.userData.joint = joint;

            joint.add( object );
            root.add( joint );

            objects.push( object );

          }

          //console.log( "CSS3DObjects:", objects.length );

          switch ( visualizationType ) {

            case 0: showAtoms(); break;
            case 1: showBonds(); break;
            case 2: showAtomsBonds(); break;

          }

          render();

        } );


      }

      //

      function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

        render();

      }

      function animate() {

        requestAnimationFrame( animate );
        controls.update();

        var time = Date.now() * 0.0004;

        root.rotation.x = time;
        root.rotation.y = time * 0.7;

        render();

      }

      function render() {

        renderer.render( scene, camera );

      }

    </script>

This kid is awesome (9 years old)

This kid is awesome too (12 years old)

This kid isn't doing too bad as programmer either (17 years old)

You can be even more awesome than them!