Computational Thinking

Joel Gethin Lewis

Lecture 3

What I'm going to talk about today:

  1. Colour and Typography.
  2. Popping to the shops and finding your way home.
  3. Lists and arrays in JavaScript.
  4. Functions in JavaScript.
  5. Drawing and Colour in p5.js

Colour and Typography.

Thanks again to Rune Madsen for putting his course online:

http://printingcode.runemadsen.com/lecture-color/.

http://printingcode.runemadsen.com/lecture-typography/.

Don't forget to click to the slides and press 's' Joel!

Popping to the shops and finding your way home.

Thanks again to Ali Almossawi for writing his book.

Read the Popping to the shops and Finding your way home chapters of "Bad Choices" Joel!

Lists and Arrays in JavaScript.

The following content is all from the JavaScript Basics section of the p5.js wiki.

Lists and Arrays in JavaScript.

Functions in JavaScript.

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

Functions in JavaScript.

Functions in JavaScript.

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!

Drawing and Colour in p5.js.

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.

Drawing and Colour in p5.js.

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

Colour (and drawing) in p5.js.

Thanks!