Joel Gethin Lewis
Year Here, Friday 27th October 2017
Always wanted to see behind the curtain.
Credit: XKCD.
How can we stand on the shoulders of giants if they are secret? Portrait of Sir Isaac Newton, credit: Sir Godfrey Kneller (1689).
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
Credit: Jane Elliott, see also: "How Discrimination Feels".
We don't have much time, why not do something interesting? Source: Wait But Why.
George Mallory on climbing Everest:
"Because it's there".
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.
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.
Media Archaeology and reinventing old media systems for the digital age.
What makes something good? What if objects had opinions?
Always learning! Always reading! Currently: Computer Vision and Deep Learning.
Solving problems - asking people what they want!
Somantics: promoting self-awareness, confidence and independence.
As Michael Craig Martin says: supporting people. Portrait by Caroline True.
Story of teaching code to graphic designers at Central Saint Martins.
Sharing how I see things.
Cosmos: a random journey through the known universe. Walkouts, meditations and joy.
Not just nerding! Great way of breaking down any problem, and incidentally the structure of the Universe. Image from Stephen Wolfram's blog.
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.
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?
Adding audio interactivity to Massive Attack stage shows. The moment when 3D pointed the microphone at the crowd! Realtime makes interaction possible.
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.
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.
Just keep swimming! Don't give up. Be the last person standing.
Minimise psychic load - work with people that are better than you, be honest about your shortcomings.
Too lazy to lie.
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.
Not narratives - enabling people to make their own stories.
How to count
Four ideas
Writing some code with p5.js
N is the number of operations and n is the number of inputs. More explanation.
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.
“There are only 10 types of people in the world - those that understand binary and those that don't”
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.
The website for p5.js is: https://p5js.org
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!
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?
A million bytes! (Actually a bit more).
What is a byte?
A byte is 8 bits.
(I remember this by saying Beight in my head).
What is a bit?
A bit is a Binary digIT.
A 1 or a 0.
So everything stored on a computer is just a 1 or a 0.
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.
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!
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.
The following content is all from the JavaScript Basics section of the p5.js wiki.
How JavaScript gets added to webpages.
Types: Numbers, Strings and Booleans.
Assignment and operators.
The following content is all from the JavaScript Basics section of the p5.js wiki.
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..
Two of the most useful functions in p5.js are setup() and draw() - setup() runs once and draw() runs every frame.
https://p5js.org/reference/#/p5/draw. Don't forget you can edit any of the code!
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.
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
The following content is all from the JavaScript Basics section of the p5.js wiki.
Don't forget we can try everything in the JavaScript console without even having to add it to a p5.js program.
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?
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?
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?
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!
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
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...
Let's take a look at the createImage() function, and play with the examples provided:
https://p5js.org/reference/#/p5/createImage
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.
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 are a really useful way of writing notes to yourself (or others) to explain how your code works.
https://github.com/processing/p5.js/wiki/JavaScript-basics#comments.
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?
Finally, when you make new curly braces (either for a new function or a loop) you should indent your code.
https://github.com/processing/p5.js/wiki/JavaScript-basics#indentation.
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...
Website:
www.joelgethinlewis.com
Slides:
presentations/YHComputationalThinking2017
Follow me!
@joelgethinlewis