Computational Thinking

Joel Gethin Lewis

Year Here, Friday 27th October 2017

What I am going to talk about:

  1. Motivations - why do I do things?
  2. Positions - who am I?
  3. Approaches - how do I do things?
  4. Methods - how to do things yourself.

Motivations: why do I do things?

  1. Beauty
  2. Curiosity
  3. Openness
  4. Duty
  5. Death

Motivations: Beauty

Credit: The Feynman Series - "Beauty" by Reid Gower.

Motivations: Curiosity One

Always wanted to see behind the curtain.

Motivations: Curiosity Two

Credit: XKCD.

Motivations: Openness

Portrait of man in black with shoulder-length, wavy brown hair, a large sharp nose, and a distracted gaze

How can we stand on the shoulders of giants if they are secret? Portrait of Sir Isaac Newton, credit: Sir Godfrey Kneller (1689).

Motivations: Duty: Rich and Male

Rich: Top 0.26% / 15,358,481st richest person in the world. Source: Global Rich List

Male: I will earn between 18% and 34% more than a woman with the same qualifications and experience. Source: Gender Pay Gap

Motivations: Duty: White

Credit: Jane Elliott, see also: "How Discrimination Feels".

Motivations: Death One

We don't have much time, why not do something interesting? Source: Wait But Why.

Motivations: Death Two

George Mallory on climbing Everest:
"Because it's there".

Positions: who am I?

  1. Student
  2. Designer
  3. Teacher
  4. Artist

Position: Student: School

Remembering the story of Gauss being challenged to add the numbers 1-100. Maths was a way of being lazy like a fox. Explanation of method.

Position: Student: Undergraduate

There are 10 kinds of people in the world. Those that understand binary and those that don't.

Realising there could be different numeral systems blew my mind.

Position: Student: Postgraduate One

Media Archaeology and reinventing old media systems for the digital age.

Position: Student: Postgraduate Two

What makes something good? What if objects had opinions?

Position: Student: Life Long Learning

Always learning! Always reading! Currently: Computer Vision and Deep Learning.

Position: Designer

Solving problems - asking people what they want!

Somantics: promoting self-awareness, confidence and independence.

Position: Teacher

As Michael Craig Martin says: supporting people. Portrait by Caroline True.

Story of teaching code to graphic designers at Central Saint Martins.

Position: Artist

Sharing how I see things.

Cosmos: a random journey through the known universe. Walkouts, meditations and joy.

Approaches: how?

  1. Computational thinking
  2. The Force
  3. Be honest with yourself
  4. Realtime
  5. Open source
  6. Presentation skills
  7. Persistence
  8. Collaborate
  9. Honesty
  10. True names
  11. Making systems

Approach: Computational Thinking

Not just nerding! Great way of breaking down any problem, and incidentally the structure of the Universe. Image from Stephen Wolfram's blog.

Approach: The Force

Have reasons for things. They don't have to satisfy anyone else but yourself, but have reasons. Imperial tour given by someone in a Star Wars t-shirt. I found out Ridley Scott went to Royal College of Art.

Approach: be honest with yourself

Temet Nosce: Know Thyself. The most difficult thing of all. What is the thing you find yourself doing when you are supposed to be doing something else?

Approach: Realtime

Adding audio interactivity to Massive Attack stage shows. The moment when 3D pointed the microphone at the crowd! Realtime makes interaction possible.

Approach: Open Source

Many reasons: selling software seems to me to be ethically wrong. Sell support by all means. In addition, you must own the means of production otherwise you are at the mercy of other peoples greed, stupidity and ignorance.

Approach: Presentation skills

Learning how to present technical information without understanding it. No one wants to see a bad presentation. Three minute presentations on unknown subjects. At its most basic, effective communication.

Approach: Persistence

Just keep swimming! Don't give up. Be the last person standing.

Approach: Collaborate

Minimise psychic load - work with people that are better than you, be honest about your shortcomings.

Approach: Honesty

Too lazy to lie.

Approach: True names

Getting the correct name can enable a project to happen. Conversely knowing the true origin of a name can be inspirational. See: A piece of Art as big as India.

Approach: Making systems

Not narratives - enabling people to make their own stories.

Methods: How to do things yourself.

How to count

Four ideas

Writing some code with p5.js

Computational Thinking is a way to optimise your interactions with the world.

Comparison computational complexity.svg

N is the number of operations and n is the number of inputs. More explanation.

Computational Thinking is also about building your own tools.

Instead of just using everyone else's tools, wouldn't be able to great to make your own?

That way you could make unique things, share them with others and build around it.

How to count.

  • Binary is a numeral system, that is a writing system for expressing numbers. Decimal is the numeral system that you are probably most familiar with - but you also already know Unary too!
  • Unary just uses the same number of things as the thing you are counting. Tally marks are unary.
  • Another way of thinking about Unary is that it's a numeral system with only one graphical symbol. Decimal has 10 graphical symbols: 0,1,2,3,4,5,6,7,8,9.

How to count in Binary.

  • Binary uses two graphical symbols to count with - lets pick the first two used in Decimal: 0 and 1.
  • Another way of thinking about 0 and 1 is Nothing and Something.
  • Let's make up Binary together.
  • What symbol shall we use to represent zero?

What symbol shall we use to represent zero?

  • 0. Or Nothing.
  • What symbol shall we use to represent one?
  • 1. Or Something.
  • How should we represent two?

How should we represent two?

  • We can't use 0 or 1 because we've already used those. We don't have any symbols left! We need to use two symbols. We have four options: 00 or 01 or 10 or 11.
  • Reading from the left (which is not always the way!) 00 is Nothing Nothing, or just Nothing, or 0 - which we've already used. 01 is Nothing Something, or just Something, or 1 which we've already used. We have two options left: 10 or 11. Which symbols should we use to represent two?

Should two be represented by 10 or 11?

  • Which is simpler? Which is smaller?
  • 11 aka Something Something, or 10 aka Something Nothing.
  • 10 is simpler! So what about three?
  • We only have 11 left, so that should be three. What about four?

How should we represent four?

  • We need another symbol!
  • We need three symbols in a row, that we haven't used already.
  • What options to we have? 000, 001, 010, 011, 100, 101, 110, 111.
  • We've used 000, 010 and 011 already. Which is the next simplest?
  • 100 is simpler than 101, 110 and 111.

Things to think about.

  • This is how all digital information in the world is represented. Using binary numbers. Something or nothing.
  • You now know the programmer joke - “There are only 10 types of people in the world - those that understand binary and those that don't”
  • Can you count to 10 using binary?
  • Using your fingers as binary digits, how high can you count with the fingers of one hand? With both hands? With hands and toes?

Four ideas.

This section is based around John Fass's and Yuri Suzuki's work on the RCA IED course, which was inspired by Google for Education's course on Computational Thinking.

Four ideas.

  1. Abstraction - identifying and extracting relevant information to define main idea(s).
  2. Decomposition - breaking down data, processes, or problems into smaller, manageable parts.
  3. Pattern Recognition - observing patterns, trends, and regularities in data.
  4. Construction - building new systems to simulate or model what we have observed.

Introduction to p5.js.

The website for p5.js is:

The following content is all from the "Learn" section of the p5.js website.

Hello p5.js and Get Started and finally some Examples.

Don't forget you can right click or CTRL click any time to save a png!

Variables and Data Types in JavaScript.

Before we get on to how JavaScript stores information in Variables and Data Types, I want to go back to the previous lecture. Remember how we learnt to count in binary?

Does anyone know what a Megabyte is?

Variables and Data Types in JavaScript.

A million bytes! (Actually a bit more).

What is a byte?

Variables and Data Types in JavaScript.

A byte is 8 bits.

(I remember this by saying Beight in my head).

What is a bit?

Variables and Data Types in JavaScript.

A bit is a Binary digIT.

A 1 or a 0.

So everything stored on a computer is just a 1 or a 0.

Variables and Data Types in JavaScript.

Turns out it's much easier to encode binary numbers as hexadecimal numbers to make them a bit more readable.

Hexadecimal means base 16! So: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

Variables and Data Types in JavaScript.

Each byte (eight bits) can be encoded as two base 16 numbers.

11010100 in binary would be D4 in hex.

FFFF3 in hex would be 11111111111111110011 in binary!

Variables and Data Types in JavaScript.

Lets open a JPEG in a Hex Editor to see what it looks like.

Open BobDylanSelfPortraitSigned.jpg.

We can see when the photo was taken and with which camera!

Lots of files have this kind of information encoded in them. Usually in ASCII encoding.

Demonstrate looking up A in the editor in a ASCII table.

Variables and Data Types in JavaScript.

The following content is all from the JavaScript Basics section of the p5.js wiki.

How JavaScript gets added to webpages.

The JavaScript console.


Types: Numbers, Strings and Booleans.

Assignment and operators.

Lists and Arrays in JavaScript.

The following content is all from the JavaScript Basics section of the p5.js wiki.

Lists and Arrays in JavaScript.

Functions in JavaScript.

The following content is all from the JavaScript Basics section of the p5.js wiki.

We've encountered a function before - console.log() - to output things to the JavaScript console..

Functions in JavaScript.

Functions in JavaScript.

Two of the most useful functions in p5.js are setup() and draw() - setup() runs once and draw() runs every frame. Don't forget you can edit any of the code!

Drawing and Colour in p5.js.

The following content is all from the Learning section of the p5.js website.

One thing to realise is that positions on computers go from the top down and from left to right - you measure vertically from the top of the screen rather than from the bottom.

Drawing and Colour in p5.js.

A bit different from drawing graphs in school - so (3,5) means go three left and 5 down, rather than three left and 5 up

Colour (and drawing) in p5.js.

Conditionals and Loops in JavaScript.

The following content is all from the JavaScript Basics section of the p5.js wiki.

Conditionals in JavaScript.

Loops in JavaScript.

Don't forget we can try everything in the JavaScript console without even having to add it to a p5.js program.

Introduction to images in p5.js

Now that we know about colour in p5.js and we know about arrays, we are ready to tackle images in p5.js

An image is a grid of pixel colour values - R, G, B and an optional Alpha value.

Each pixel colour value stored as an 8 bit number

How many different values can you store in 8 bits?

Introduction to images in p5.js

How many different values can you store in 8 bits?

2*2*2*2*2*2*2*2 or 2^8 or 256

So we have a range from 0-255 for each pixel colour value - 0 is a number too!

How do we make a grid of values using arrays?

Introduction to images in p5.js

How do we make a grid of values using arrays?

We could make one massive list or array with all the pixel values

How big would that list have to be?

Introduction to images in p5.js

How big would that list have to be?

We'd need width*height*4 slots in our big list

But that would make things a bit difficult to change or edit...

So lets make a list of lists or an array of arrays!

Introduction to images in p5.js

So lets make a list of lists or an array of arrays!

Make one list with width elements, and for every element in that list, store another list of height elements

You can then address the pixel at (x,y) by accessing the element pixels[x][y] - use two array operators

Introduction to images in p5.js

Don't forget that you measure from the top of the screen rather than from the bottom!

Let's start by looking at the p5.js reference, the place where all the functions you can use in p5.js are listed.

Let's see if they have anything about images...

Introduction to images in p5.js

Let's take a look at the createImage() function, and play with the examples provided:

The last example is a bit strange, let's correct it (not everything on the internet is correct )-;). Pixel density is still a bit of a problem on the web.

I find the p5.js reference super useful - I usually have it open in a browser whenever I'm coding - it's not a memory test so use all the help you can find.

Comments and code formatting.

I'm going to talk about two really important parts of coding that don't have anything to do with how the computer reads your code - rather how other humans can read your code.

Comments and code formatting.

Comments are a really useful way of writing notes to yourself (or others) to explain how your code works.

You don't have to add a comment for every line, but I find it really helps me when I haven't looked at code for a while. It also helps others! It would have been really useful to have comments on the previous createImage example, wouldn't it?

Comments and code formatting.

Finally, when you make new curly braces (either for a new function or a loop) you should indent your code.

Most good editors (like Sublime Text 3) will do indentation for you automatically, and tidy your code for you too. See Edit > Line > Reindent in ST3.

I always use tabs rather than spaces. This is another long standing programming joke/argument/destroyer of relationships...

Comments and code formatting.




Follow me!