Joel Gethin Lewis
Camberwell 4th December 2017
“There are only 10 types of people in the world - those that understand binary and those that don't”
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 section. 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 but recently in Unicode.
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
This got posted last week and I just had to share. A bit more on the modulo operator and why it is useful from Golan Levin, who has helped me hugely over the past 20 years.
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:
Next, 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...
A Class is just a way of storing both variables and functions in one place - instead of having loads of variables and functions everywhere you can put them all into a Class - from there you can make multiple instances of a Class - Objects. Functions that are inside Classes are called Methods.
Object Orientated Programming is a whole programming paradigm or way of coding.
The following content is all from the JavaScript Basics section of the p5.js wiki.
Classes and Objects in JavaScript. Don't forget to try it all out using the JavaScript console!
A library is just a set of useful Classes that help you do something.
The p5.js team maintains a list of libraries that work with p5.js:
https://p5js.org/libraries/
Let's try speech! Or make an interface!
Not only that but you can add ANY JavaScript library to p5.js, but sometimes it can be a bit complicated.
RiTa is: "Designed to support the creation of new works of computational literature, the RiTa† library provides tools for artists and writers working with natural language in programmable media."
The lerp method: "calculates a number between two numbers at a specific increment".
The lerpColor method: "blends two colors to find a third color somewhere between them".
Website:
www.joelgethinlewis.com
Slides:
presentations/Interpolate2017
Follow me!
@joelgethinlewis