Joel Gethin Lewis
RCA, Material Language, Visual Communication MA, Thursday 16th October 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.
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:
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.
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.
Next we'd like to get on with the work that we set for ourselves in lecture one - to make an Animated GIF maker.
So how do I load animated gifs in p5.js?
Google: "animated gif p5.js"
https://github.com/antiboredom/p5.gif.js/tree/master looks great!
So lets download it.
And try it, by opening the file in the browser.
It doesn't work. )-;
Don't panic! Lets look at the in JavaScript Console.
Hmmm. I don't know what that means, lets Google: "p5.js cross origin error"
Looks like I have to install a server for p5.js.
Lets follow the instructions to install node.js.
CAUTION: COMMAND LINE INTERFACE WARNING!
Let's go to the folder that contains the file we are trying to get working and run the webserver inside it, by dragging and dropping the folder onto the Terminal icon and running: "http-server -c-1".
Of course, we can use any gif we like with this program! Demo using giphy.gif instead.
Wouldn't it be great to be able to slide a slider instead of having to hold my mouse in one place?
Let's use a GUI library to let us do that via the p5.js libraries page.
p5.dom looks good. Let's download it and try it.
The DOM examples look good. So lets start with the old gif example from p5.gif.js and go from there.
OK, lets add the most basic p5.dom to it, just with both running together in the same sketch.js. First look at index.html and then sketch.js from the Slider p5.DOM example and then duplicate them over.
So now we have both running together, we can disable the mouse movement code, as we want it to be controlled by the GUI.
We cam get rid of both the G and B sliders too.
We can edit R to be called something better...
So lets set it to myFrame, and change to display the correct frame.
But how do I know the correct range?
That doesn't seem to be working, lets add console.log to see what is going on.
It's saying 0? I guess the gif hasn't loaded at that point.
So lets keep checking until it is loaded, THEN add the GUI
Use a boolean value! (I use this all the time in my code).
We can even display a loading message while we are waiting. How do we do that? Google "displaying text in p5.js".
Shifting colours is a simple kind of image processing, I've prepared two examples - one shifting red values and the other shifting all three of red, green and blue.
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."
Website:
www.joelgethinlewis.com
Slides:
presentations/ParameterWorkshop2017
Follow me!
@joelgethinlewis
