CCI Diploma 2021/2022: Unit 1: Lecture 3: Deciding.
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 able to use digital logic to allow your software to make decisions.

The artist of the day is Sol LeWitt. Sol 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". See Solving Sol for JavaScript implementations of his works.

History of Design Systems by Rune Madsen has a series of references on Sol LeWitt and others.

Great recent article on Generative Art by Jason Bailey.

I think alot of Sol's work is about rules, which is why he's perfect for today's lecture - which is on exactly those things!

Today's lecture is titled: Deciding.

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

• Logic in humans and computers
• Some more about functions, namely recursion (a function that calls itself)
• The history of computing, and some of the people who were important along the way
• How to use logic and functions together in p5.js code
• How to move from two dimensions to three - or from squares to cubes
• How to use everything we've learnt so far to make real time interaction happen using p5.js

The main thing I want you keep in mind today is that computers use something called logic to decide what to do. Coding is all about refining sets of rules and consequences to tell a computer how to decide what to do and what do once the decision has been made.

• Boolean algebra, named after George Boole. The Boolean data type is common to most programming languages, it only has two values: True (or 1) or False (or 0). One is true, nothing is false is how I remember it. What does something with only two values remind you of?
• Control flow in programming is how you control the flow of which part of the program is executed next. Inside your control flow statements you'll use comparisons to decide how to compare things.
• Boolean operators allow you to combine or invert boolean data types - AND (or &&), OR (or ||) and NOT (or !).
• Conditional statements, such as if/else statements are very common. You might also see something called a switch statement - which is conceptually the same as lots of if statements in one place. BTW that new way of console.log()'ing variables uses something called Template literals - I use them all the time.

This example: demonstrates the use of an if statement. Let's try it cut and pasted into the p5.js editor. It's important to use { and } to enclose both functions AND if (or switch) statements. Those curly brackets help the computer decide something called scope, which is all about what values variables have.

• Remember from previous lecture - instead of writing long lists of commands, one after another, functions allow programmers to package up functionality into smaller mini programs, known as functions or subroutines.
• Functions take input(s) and return output(s) - an example might be a function that returns the square of an input number, or as complicated as the answer to everything.
• Recursion is when something is defined in terms of itself. Recursive humour is funny. Recursion is also found in graphic design, art and cooking. In computer science recursion is when a function calls itself repeatedly. The method of working out the Factorial of any number is a classic example.
• A fractal is a good example of something that is visually recursive.

• The Jacquard Loom was the worlds first programmable object.
• Charles Babbage is the inventor of the concept of a digital computer. Babbage was aware of the Jacquard Loom and expanded upon the punch card to invent both the Difference Engine and the Analytical Engine.
• Ada Lovelace was the worlds first computer programmer, even realising that the computer could be used to make music and art.

• Pāṇini pioneered a grammar that incorporated metarules and recursion - making the first formal language.
• Muhammad ibn Musa al-Khwarizmi formalised algebra, his name gave rise to the word algorithm and introduced the decimal system to the western world.
• Ismail al-Jazari invented programmable machines, including programmable humanoid robots and an astronomical clock considered the first programmable analogue computer.

• Alan Turing formalised the concept of the algorithm and computation in general. During the Second World War he led the team that broke German Naval codes. He went on to design one of the first stored program computers and did pioneering work in Morphogenesis, or how living things form themselves. He was prosecuted by the British Government for being gay, and committed suicide in 1954. If an system is capable of general computation it is said to be Turing complete. The Turing test is a test of machine intelligence in comparison to human intelligence.
• Tommy Flowers was the engineer who built Turing's machine.

• Grace Hopper invented the compiler for translating between human readable code and machine code.
• Margaret Hamilton led the development of on-board flight software for NASAs Apollo Moon missions.
• A further list of pioneers in Computer Science.
• Software bugs began with real insects!
• Hacker culture is about curiosity, not breaking into computer systems. You are all hackers now.

Let's look at a p5.js numbers example to refresh our memory on the use of if statements and logical comparisons to decide how a program should behave.

Let's take a look at a p5.js example that makes use of three new functions - noLoop(), mousePressed() and redraw().

Before moving on to thinking about three dimensions, let's take a look at a drawing continuous lines p5.js example - what does this new === thing mean? And what about pmouseX? If you ever see something unknown in p5.js, where do you look it up?

• Going from a square to a cube.
• The third dimension is usually described in terms of a new letter: z.
• The direction and orientation of the three dimensions varies in a similar way to the way the direction of y varies in two dimensions between high school graphs and digital screen co-ordinates, so always check which way is what.
• See how Pythagoras works in three dimensions in this Better Explained article.
• Also see this Immersive linear algebra course - what is Linear Algebra?

• One way of storing three dimensional information is using point clouds.
• The output of three dimensional scanners is often in point clouds - a grid of positions, each with a depth value - think of Pin Art toys from the 1980's.
• Another way of storing three dimensional data is to use Voxels (from the initial letters of volume and element, with the insertion of -x- for ease of pronunciation).
• Voxels can be a super efficient way of storing three dimension information - used for everything from MRI scanners to Minecraft.
• Creative uses of three dimensions: Motorstudio Design Room / Hermès × Tokujin Yoshioka / Shining360 by Claire Hentschker.

• Another way of storing three dimensional information is using a series of polygons.
• Polygons are geometric objects with at least three straight lines and angles.
• Polygons are plane figures - i.e. they are flat.
• Some examples: squares, triangles and pentagons.
• Triangles are often used in three dimensional software and games - for more information about why this is so see this Computerphile video about A Universe of Triangles.

• A Polyhedron is a three dimensional shape made of multiple polygons.
• The Platonic Solids are a set of three dimensional shapes that have been known about since Ancient Greece and possibly back to Neolithic times.
• Paul Bourke maintains an amazing list of algorithms and code for dealing with: Geometry, Surfaces, Curves, Polyhedra, Fractals, Chaos, Self similarity, Photographic reconstruction, Domes, Planetariums, Fisheye, Spherical mirror, Stereographics and 3D Projection. It's always my first place to check if I've got a geometric question.

Let's take a look at this p5.js example on 1 dimensional distance that makes a simple but pleasing mouse interaction.

To finish up with, let's work through the p5.js tutorial on interactivity - combining all we've learned about using variables and logic to make experiences that react to users in real time. As I always say, "real time or it didn't happen" - or if that was pre-rendered, it's not interactive, it's just a film!

Thanks!
Back to slide index.