UAL CCI: Introduction to Creative Computing 2025: Lecture 5: 📝 & 🚗: Arrays and Classes.
Back to slide index.

The two things I want you keep in mind today are that the computer science word for a list is an array and that you can use objects in your code to scale from one interesting thing to whole ecologies of interesting things, all reacting to each other.

By the end of this lecture, we'll have learnt about:

• Going from a square to a cube
• Going from a cube to a hypercube
• Colour, Colour in the real world and Colour on digital computers
• Lists or one dimensional arrays
• Two dimensional arrays or lists that have a list for each of their entries
• N (or any) dimensional arrays
• JavaScript objects and how they can store lots of different types of information in one place
• Two pioneers in computing, Seymour Papert and Alan Kay, and how they helped contribute to the creation of Graphical User Interfaces (GUI's) and a new way of programming that was invented to make that happen - Object Orientated Programming (OOP)
• What OOP is, and how the idea of abstraction plays into it
• How to do OOP using p5.js

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

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

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

• Going from Cube to Hypercube.
• You can also go from the Sphere to the Hypersphere.
• You can also think of Time as the fourth dimension.
• You can use any variable as a new dimension, and measure distance between them using Pythagoras, as we saw in the previously.
• Perfect Shapes in Higher Dimensions from Numberphile, which is a great channel to get lost in.

Colouring using p5.js needs the same two thing as before: 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.

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.

Lists or one dimensional arrays.

You are all familiar with shopping or todo lists. The coding terms for those things would be one dimensional arrays. Let's take a look at what The Modern JavaScript Tutorial says about arrays. Remember - Strings are just arrays of Chars or characters.

Two dimensional arrays or lists that have a list for each of their entries.

Instead of a char, an integer, a float in each position in an array, what if you stored an array there? Then you'd have a list of lists, or a two dimensional arrays. Can you think of a type of information that you look at every day that might be well suited to storing in a two dimensional array? Something with a width and a height perhaps?

An image!

Question, how might you store a two dimensional array within a one dimensional one?

Just make a big one dimensional array and put each row of the two dimensional array side by side!

N (or any) dimensional arrays.

You can use arrays to hold other arrays that might hold other arrays, and on and on and on and on. Multi-dimensional data is something that Machine Learning makes use of and generates alot of. Being able to relate multiple dimensions to each other is a key activity in all science and one that you should develop. See this great paper - "The Prehistory of Dynamic & Interactive Graphics: Visualizing Time and Motion", as well as this documentary about an early multi-dimensional data visualisation system - Prim~9.

Let's take a look at some p5.js examples that use arrays.

https://archive.p5js.org/examples/interaction-follow-3.html - this example combines one dimensional arrays, trigonometry, and push() and pop() drawing.

https://archive.p5js.org/examples/arrays-array-2d.html - this example combines a two dimensional array with use of the dist() function. Let's try changing the spacer value.

JavaScript objects and how they can store lots of different types of information in one place.

We encountered JavaScript objects before when we found out about the for..in loop via the p5.js "Program Flow" tutorial. Let's take a look at what The Modern JavaScript Tutorial says about objects.

The power of object orientated programming (OOP) is that we can combine data and logic together - this makes it much easier to build really large scale software systems, and to share those systems with others - often known as libraries of code. Libraries of code can be abstracted into Application Programming Interfaces (API's) - which is a way of abstracting a load of complexity behind a series of commands and formats of data. For example, Google, Amazon, Microsoft and Apple all provide API's to their operating systems (either locally or on the cloud).

Two pioneers in computing, Seymour Papert and Alan Kay, and how they helped contribute to the creation of Graphical User Interfaces (GUI's) and a new way of programming that was invented to make that happen - Object Orientated Programming (OOP).

• Seymour Papert was interested in learning theories - especially in how computers could make a difference in how children learn. Logo was the first computer language that I encountered as a child - all based around drawing with a Turtle.
• Papert pioneered the idea of Microworlds - places where you could safely experiment to think about how to change the future, rather than train children for the jobs of today.
• Alan Kay was inspired by Papert and others and went on to pioneer thinking around Object Orientated programming and Overlapping Window Graphical User Interfaces both at Xerox Parc.
• Three great talks by Kay: The Future Doesn't Have to Be Incremental, Normal Considered Harmful and Education That Takes Us To The 22nd Century.

What OOP is, and how the idea of abstraction plays into it.

• Abstraction is a concept that has been applied to many fields, including art and computer science.
• Abstraction is a key feature of object orientated programming. OOP allows you to combine logic and data into one place.
• C++ is an example of an object orientated language. C was one of its predecessors and functional. The ++ means increment, hence C++ being one better than C. (-;
• Some language in OOP - a class is the word for the code that combines data and methods (method is the word for a function in OOP) in to one place for one object. To make a variable (or object) out of a class you need to instantiate it with the new command. An object is an instance of a class.
• There are many different ways of programming, also known as paradigms.
• Two amusing languages are Brainfuck and Whitespace, there are many other Esoteric languages. (-;

How to do OOP using p5.js - time for lots of chickens and eggs to come together!

As well as Abstraction, Encapsulation is an important concept in OOP. A way of thinking about it is sealing away data from other bits of code - only the methods of an object should be able to get at it's data - i.e. no direct access to data - only via methods. Please see Daniel Shiffman's Coding Train playlist on "Topics of JavaScript/ES6-ES8", especially the videos on Classes in JavaScript with ES6 and Inheritance in JavaScript. FYI ES6 and ES8 are just acronyms for new versions of JavaScript. All the numberings are confusing, don't worry.

Thanks! Time for a short break!
Back to slide index.