Computational Thinking

Joel Gethin Lewis

Lecture 4

What I'm going to talk about today:

  1. Grids and Logos.
  2. Sort that post and be more hip.
  3. Conditionals and Loops in JavaScript.
  4. Introduction to images in p5.js
  5. Comments and code formatting.

Grids and Logos.

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!

Sort that post and be more hip.

Thanks again to Ali Almossawi for writing his book.

Read the Sort that post and Be more hip chapters of "Bad Choices" Joel!

Stop press!

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.

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...

https://p5js.org/reference/

Introduction to images in p5.js

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.

Comments and code formatting.

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 and code formatting.

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?

Comments and code formatting.

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...

Comments and code formatting.

Thanks!