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.
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.
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).
There are other ways of running p5.js - on your own computer or on your own website - you can find out how to do on the Get Started page of the p5.js website.
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.
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.
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
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).
I often use HSB in digital work to make it easy to blend between colours - much easier than RGB. You can visualise colour using a colour wheel or a colour solid. Complementary colours are on opposite sides of the colour wheel.
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.
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).
Finally, when you make new curly braces (either for a new function or a loop) you should indent your code.
The brand new p5.js Web Editor has this functionality too - just go to the Edit menu, and then select the Tidy Code menu item.
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.
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.
In your pairs, what do you want to explore about a grid of pixels?
You live in a visual culture, what do you want to question about it?
Sol LeWitt was a pioneer in minimalist and conceptual art, drawing up rules or algorithms that then could be carried out by anyone - "The system is the work of art; the visual work of art is the proof of the system"
Solving Sol, Javascript implementations of his works.