Joel Gethin Lewis
Lecture 4
Thanks again to Rune Madsen for putting his course online:
http://printingcode.runemadsen.com/lecture-grid/
http://printingcode.runemadsen.com/lecture-logo/
Don't forget to click to the slides and press 's' Joel!
Thanks again to Ali Almossawi for writing his book.
Read the Sort that post and Be more hip chapters of "Bad Choices" Joel!
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.
To finish up today, 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...