Interpolate

Joel Gethin Lewis

Camberwell 4th December 2017

Interpolate:

  1. How to count
  2. Introduction to p5.js.
  3. Variables and Data Types in JavaScript.
  4. Lists and arrays in JavaScript.
  5. Functions in JavaScript.
  6. Drawing and Colour in p5.js.
  7. Conditionals and Loops in JavaScript.
  8. Introduction to images in p5.js.

Interpolate: (continued):

  1. Comments and code formatting.
  2. Classes and Objects in JavaScript.
  3. Introduction to p5.js libraries.
  4. How to use RiTa to play with text.
  5. Two examples of interpolation in p5.js.

How to count.

  • Binary is a numeral system, that is a writing system for expressing numbers. Decimal is the numeral system that you are probably most familiar with - but you also already know Unary too!
  • Unary just uses the same number of things as the thing you are counting. Tally marks are unary.
  • Another way of thinking about Unary is that it's a numeral system with only one graphical symbol. Decimal has 10 graphical symbols: 0,1,2,3,4,5,6,7,8,9.

How to count in Binary.

  • Binary uses two graphical symbols to count with - lets pick the first two used in Decimal: 0 and 1.
  • Another way of thinking about 0 and 1 is Nothing and Something.
  • Let's make up Binary together.
  • What symbol shall we use to represent zero?

What symbol shall we use to represent zero?

  • 0. Or Nothing.
  • What symbol shall we use to represent one?
  • 1. Or Something.
  • How should we represent two?

How should we represent two?

  • We can't use 0 or 1 because we've already used those. We don't have any symbols left! We need to use two symbols. We have four options: 00 or 01 or 10 or 11.
  • Reading from the left (which is not always the way!) 00 is Nothing Nothing, or just Nothing, or 0 - which we've already used. 01 is Nothing Something, or just Something, or 1 which we've already used. We have two options left: 10 or 11. Which symbols should we use to represent two?

Should two be represented by 10 or 11?

  • Which is simpler? Which is smaller?
  • 11 aka Something Something, or 10 aka Something Nothing.
  • 10 is simpler! So what about three?
  • We only have 11 left, so that should be three. What about four?

How should we represent four?

  • We need another symbol!
  • We need three symbols in a row, that we haven't used already.
  • What options to we have? 000, 001, 010, 011, 100, 101, 110, 111.
  • We've used 000, 010 and 011 already. Which is the next simplest?
  • 100 is simpler than 101, 110 and 111.

Things to think about.

  • This is how all digital information in the world is represented. Using binary numbers. Something or nothing.
  • You now know the programmer joke - “There are only 10 types of people in the world - those that understand binary and those that don't”
  • Can you count to 10 using binary?
  • Using your fingers as binary digits, how high can you count with the fingers of one hand? With both hands? With hands and toes?

Introduction to p5.js.

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!

Variables and Data Types in JavaScript.

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?

Variables and Data Types in JavaScript.

A million bytes! (Actually a bit more).

What is a byte?

Variables and Data Types in JavaScript.

A byte is 8 bits.

(I remember this by saying Beight in my head).

What is a bit?

Variables and Data Types in JavaScript.

A bit is a Binary digIT.

A 1 or a 0.

So everything stored on a computer is just a 1 or a 0.

Variables and Data Types in JavaScript.

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.

Variables and Data Types in JavaScript.

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!

Variables and Data Types in JavaScript.

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.

Variables and Data Types in JavaScript.

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

How JavaScript gets added to webpages.

The JavaScript console.

Variables.

Types: Numbers, Strings and Booleans.

Assignment and operators.

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.

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

Comments and code formatting.

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

Classes and Objects in JavaScript.

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.

Classes and Objects in JavaScript.

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!

Introduction to p5.js libraries.

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.

How to use RiTa to play with text.

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

Try some of the examples.

Two examples of interpolation in p5.js..

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

Thanks!

Website:
www.joelgethinlewis.com

Slides:
presentations/Interpolate2017

Follow me!
@joelgethinlewis