The Parallax View

Joel Gethin Lewis

Lecture 1: Digital Pixel 1

What I'm going to talk about today:

  1. Introduce myself.
  2. The aim of this course.
  3. What binary numbers are.
  4. Introduction to p5.js.
  5. How images are made using arrays of pixels.
  6. Changing pixel values to animate a static image.
  7. Brief: the materiality of pixels.

1. Introduce myself.

2. The aim of this course.

  • The digital image helps us to think about visual culture in a different way. Digital technologies allow us to probe how images can be made, including elements (such as style) that were previously thought to be exclusively the domain of humans.
  • The Parallax View will be an investigation into three different aspects of the digital image, each lasting for two weeks. For each aspect the first week will be an introduction to a brief, with a tutorial about the concepts involved. In the second week pair responses to the brief will be presented and constructively criticised by the group and invited guests.

2. The aim of this course (continued)

  • No programming experience is required, but you should bring a computer to all sessions. Programming and projects will occur in pairs.
  • Course website: https://jgl.github.io/TheParallaxView/

3. What binary numbers are.

  • Counting is using groups of symbols to represent quantities or amounts.
  • Let's count to 100 in Decimal. When do we need a extra digits?
  • Let's count to 10 in Unary.
  • Let's count to 20 in Binary. When do we need an extra digit?

3. What binary numbers are (continued).

  • What's the biggest number you can count to on your fingers? On your fingers and toes?
  • Now you know the old programmer joke: "There are only 10 kinds of people, those that understand binary, and those that don't.
  • Computers use binary to represent everything in memory.
  • A bit is a Binary digIT.
  • A byte is eight bits. (BEight).
  • A kilobyte is 1,024 (2^10) bytes, mostly.
  • A megabyte is 1,048,576 (2^20) bytes, mostly.

3. What binary numbers are (continued).

  • One megabyte is approximately one minute of 128 kbit/s MP3 compressed music.
  • One megabyte is six seconds of uncompressed CD audio.
  • One megabyte is a typical English book volume in plain text format (500 pages × 2000 characters per page).
  • The human genome consists of DNA representing 800 MB of data. The parts that differentiate one person from another can be compressed to 4 MB!

3. What binary numbers are (continued).

  • There are different ways of storing numbers and words in computers, as whole these values are known as Data types.
  • Whole numbers or Integers are stored as ints. E.g. 0, 5, -567.
  • Numbers which are in between whole numbers are stored as Floating Points or floats. E.g. 3.142 or -5.66343.
  • As these numbers are stored in certain amounts of memory, if they get too big (or negative, or precise) the computer can run out of memory to store them, or overflow. This is bad. See the Y2K bug.

3. What binary numbers are (continued).

  • You can also store individual characters of the alphabet as chars.
  • However, there are different encodings of characters - ASCII and Unicode for example - which allow different character sets to be displayed.
  • You can store words (multiple characters) in strings - which are actually just lists of chars.
  • Another name for lists are arrays.
  • Strings are one dimensional arrays. We'll be discussing two dimensional arrays later today!
  • Data can be stored as fixed values (constants) or values that can change (variables).

4. Introduction to p5.js.

  • I'm going to teach you all the programming knowledge you need to complete this course.
  • We are going to use p5.js during this course, which is a library of code that aims to make coding accessible for artists, designers, educators and beginners. It's written in a language called JavaScript (JS), which is widely used on today's web.
  • We are going to be writing all the code for this course using the brand new p5.js Web Editor - it's a really great way of seeing your code live and also makes it easy to share your work with others, for free!

4. Introduction to p5.js (continued).

4. Introduction to p5.js (continued).

  • Now that you've made an account on the brand new p5.js Web Editor, let's explore, notice you can click the arrow next to the sketch.js text to display the project-folder, where you can see the separate files that make up your p5.js sketch currently.
  • p5.js is designed to be a sketchbook, where you can quickly try out ideas and build on examples that are provided to you.
  • Also notice that you can press the auto-refresh tickbox - try changing some numbers in the text editor area (the part of the screen with with the line numbers on the left hand side).

4. Introduction to p5.js (continued).

  • You can change the name of your project, add files to it and load your older sketches. You can also customise the appearance of the editor by clicking the cog icon in the top right hand corner.
  • You can load in any of the examples from the p5.js website by using the File / Examples menu item. Try running some of them - feel free to experiment - you can't damage anything!
  • You can send messages to the console window by using the console.log() JavaScript command, try adding console.log("hello"); to the start of any p5.js sketch.

4. Introduction to p5.js (continued).

4. Introduction to p5.js (continued).

5. How images are made using arrays of pixels.

  • Two dimensional lists (or arrays) for can be used for remembering the pixels of an image, another way of thinking about this is that for every entry in an array, there is another array - or arrays of arrays.
  • Artwork: Every Icon (1997) John F. Simon, Jr.
  • Question, how might you store a two dimensional array within a one dimensional one?

5. How images are made using arrays of pixels (continued).

  • 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
  • Colour (and drawing) in p5.js.

5. How images are made using arrays of pixels (continued).

  • We've just mixing together Red, Green and Blue (RGB) colours to make any other colour.
  • Digital colour mixing is additive while analogue paint mixing is subtractive. How does projected light mix?
  • As we just saw, there are other ways of mixing variables to make colours - for example Hue, Saturation and Brightness (HSB).

5. How images are made using arrays of pixels (continued).

5. How images are made using arrays of pixels (continued).

5. How images are made using arrays of pixels (continued).

  • 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?

5. How images are made using arrays of pixels (continued).

  • 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?
  • We could make one massive list or array with all the pixel values
  • How big would that list have to be?

5. How images are made using arrays of pixels (continued).

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

5. How images are made using arrays of pixels (continued).

  • 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/

5. How images are made using arrays of pixels (continued).

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

5. How images are made using arrays of pixels (continued).

  • Now, 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?

5. How images are made using arrays of pixels (continued).

5. How images are made using arrays of pixels (continued).

  • I always use tabs rather than spaces. This is another long standing programming joke/argument/destroyer of relationships...

6. Changing pixel values to animate a static image.

  • 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!

6. Changing pixel values to animate a static image.

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

6. Changing pixel values to animate a static image.

  • So let's make a sketch that loads in an image and then changes the red colour component value for every pixel, every frame.
  • Make a new sketch in the brand new p5.js Web Editor.
  • Find an image that you want to change, and upload it to the web editor using the Sketch > Add File menu item.
  • Load the image in via the preload() and loadImage() commands and then display it via the image() command.

6. Changing pixel values to animate a static image.

  • Now let's work out how to increase the value of every red component of every pixel in the image, every frame.
  • Take a look at the Colour/Brightness example, for a way of going through every pixel in an image.
  • Let's add 1 to every red value of every pixel in the image.
  • What's the problem with this sketch? How do we correct it?

6. Changing pixel values to animate a static image.

  • Now that we've got the value of the red pixel "clamping" correctly between 0-255, let's add some interaction, so that the user can alter the amount added to every red value.
  • Take a look at the DOM slider example for how to add a slider to your code.
  • Add the slider to your code - what values should it have? Minimum? Maximum? Default?
  • Finally, add the capability of the same interaction for Green and Blue values too.

7. Brief: the materiality of pixels.

7. Brief: the materiality of pixels (continued).

Thanks!