CCI Diploma 2020/2021: Unit 1: Lecture 2: Drawing and Colouring.
Back to slide index.

Hi!

I'm going to start every lecture with a promise and an artist to reference.

I promise that by the end of this lecture you'll be understand how everything your computer displays on its screen is an illusion and not really in motion at all.

The artist of the day is Lillian Schwarz.

Lillian Schwartz from Ben Rubin.

I think alot of Lillian's work is about digital drawing and colouring, which is why she's perfect for today's lecture - which is on exactly those things!

Today's lecture is titled: Drawing and Colouring.

By the end of this lecture, you'll know more about:

• Drawing on paper - with me being a drawing robot
• Going from 0 dimensions to 1 dimension to 2 dimensions
• Drawing shapes in p5.js
• The Voronoi Diagram
• Colour, Colour in the real world and Colour on digital computers
• Our first interactive p5.js code
• Bringing everything we've learnt today into a pair of examples that use two functions (Sine and Cosine) to make beautiful animations in p5.js

The two main things we are going to think about today are various different functions and thinking in different numbers of dimensions - both feed into how to draw and colour on computers. Functions are things in maths or coding that take an input and give an output - or things that you can ask a question of and you'll get an answer. Dimensions could also be thought of as independent variables - like when you are drawing you might think about how far left and right you need to be on a page and (independently) how far up and down you need to be to draw the picture you want to.

I'm going to start by talking about drawing on paper, before looking at how we can draw on a computer using p5.js.

Drawing in black and white (or greyscale) using p5.js needs two things: data types (either variables or constants) and commands (or functions or subroutines).

Colouring using p5.js needs the same two things: variables and functions, but the variables will need to be multi-dimensional in order to be able to describe all the colours that we humans can see. Can you think of a way of storing several different values in one thing? How would you remember all the things you'd like to buy at the arts shop? Another way to think about the idea of dimensions is just to think of how many different numbers (or any kind of data) we need to describe something - the most common you've encountered so far probably being space - or the spatial dimensions.

Let's start with drawing on paper. How many numbers do you need to describe where you are on a piece of paper?

To think about drawing on paper, let's try an exercise. One person is going to be the model, one person is going to be the blind drawing robot and one person is going to be the sighted drawing instruction robot - because of COVID-19, I'm going to have to play all the roles for you!

• Model - you have to make sure the blind drawing robot doesn't cheat, and pose your hand using a secret number of fingers.
• Blind drawing robot - listen for commands.
• Sighted drawing instruction robot - which command are you going to give first? You aren't allowed to say how many fingers the hand model is holding up, you can only say commands like "take off pen lid" or "move your hand down until I say stop".
• Let's pick the number 8 to draw.

What was hard (or funny) about that?

I had to be really precise with myself, right? I had to break up something simple like "Draw the number 8" into lots of smaller commands AND I had to have a way of saying where on the page the robot should draw. That's exactly what we are going to have do when we write drawing code in p5.js - a way of saying where we are on the screen and a way of drawing simple shapes that we can build up into more complicated ones.

• Starting with zero spatial (or physical space) dimensions - a point.
• Moving from zero spatial dimensions to one and on to two or going from a point to line to a square.
• Artwork: Flatland by Edwin Abbott Abbott.

• How do we describe points on a square or a flat piece of paper so that other people know where we are describing?
• Formally: (x,y) pairs are used to describe Cartesian co-ordinates in Euclidean space.
• X is for measuring how much left or right on the piece of paper, and Y is for measuring how much up or down on the piece of paper.
• Y on computers is the opposite way to the way you learnt in school - because old computers scanned from the top down using Cathode Ray Tubes.
• Area - if you double the width and the height of a rectangle, area scales x4 NOT x2. Why?
• Pythagoras' theorem is used to work out how big the longest side of a triangle with a right angle in it is - see proofs on Wikipedia page and Better Explained. P.S. Better Explained is AWESOME!

• What is a circle? It is "the set of all points in a (flat)plane that are at a given distance from a given point".
• A Gentle Introduction To Learning Calculus from Better Explained. Calculus is the formal name for thinking about graphs - the area under a curve (or the integral) or how steep a curve is (the differential).
• Sine waves are curves that go up and down in a regular way forever.Intuitive Understanding of Sine Waves.
• How to work out the size of angles in a triangle using the lengths of a triangle or other angles aka Sine and cosine and tangent functions aka Trigonometry again, from Better Explained.

Let's go through the p5.js shape primitives example together. You can use and edit any of the p5.js examples directly on their web pages, but I'm going to copy and paste them into the p5.js editor so you see how to use it.

Let's go through the p5.js data variables example together.

Let's go through this tutorial on Coordinate System and Shapes together. Remember, a Co-ordinate system is a system for describing position.

As well as commands that specify exact positions, you can use transformations to move your digital drawing tool around like I commanded myself earlier. See this Points and Lines example for how to use translate() to do that. You can also rotate(), scale().

N.B. you can use push() and pop() to remember different drawing states. Chicken and egg in terms of colour, but I wanted you to know about push and pop, before we get on to some INTERACTION! One more thing - check out this advanced Kaleidoscope for some push() and pop() action.

Now let's go through the p5.js Get Started tutorial together, using the p5.js editor. Remember the Chicken and Egg problem for teaching coding from the first lecture? We are going to encouter that here when you see an "if" statement. Don't worry about that for now, the most important thing is when we start using variables instead of constant (or fixed) values to draw with. This is the most important thing you are going to learn today and maybe for the whole course - that computers can have values that change over time, and that they'll do the work of changing them for you - allowing you to make INTERACTIVE animations or music or art or anything!

Bringing together drawing, transformations and push and pop to make a lovely follow interaction.

Before we move onto Colour, I'd like to show you one more reference of the power of drawing and interaction, one that's enabled by a technical (or obsfucatory) term: The Voronoi diagram:

• The Voronoi diagram is the diagram of boundaries between a set of points such that within the boundaries, one is closer to that point than any other.
• The Voronoi diagram interactively.
• Artwork: Boundary Functions by Scott Snibbe, who now works for Facebook.

OK, now onto colour and colour on computers:

• You can map any three variables into three dimensions to help you think about them spatially (i.e. in physical space).
• An example of this is 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?
• There are other ways of mixing variables to make colours - for example Hue, Saturation and Brightness (HSB).
• 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.
• Colour theory is a huge area of study, for graphic design and even psychology.

Rune Madsen's great series "Programming Design systems" has brilliant chapters on A short history of color(sic) theory, Color(sic) models and color(sic) spaces and Perceptually uniform color(sic) spaces. By the way, (sic) means I know it's spelt wrong!

Let's go through the p5.js color (sic) tutorial together.

Let's take a look at two ways of storing colour information in p5.js.

Finally, let's bring all the new things we've learnt today about drawing and colouring to make some animations using colour and sine and cosine:

In each of those last two examples, what if we used interactive variables (like mouse position) instead of just adding on to (or incrementing or the ++ symbol) the angle variable every frame? 🤯

Thanks!
Back to slide index.