CCI Diploma 2020/2021: Unit 1: Lecture 7: Classing.
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 understand how you can use objects in your code to scale from one interesting thing to whole ecologies of interesting things, reacting to each other.

The artist of the day is Timothy Morton, who isn't an artist at all.

I was first drawn to his work by this tweet and his book, Hyperobjects.

Hyperobjects are a "objects that are so massively distributed in time and space as to transcend spatiotemporal specificity, such as global warming, styrofoam, and radioactive plutonium". It really helped me start to think about why we aren't doing anything about global warming and what artists and designers can do about that.

I think alot of Timothy's work is about what objects are, how they work and what they do in the world - which is why he's perfect for today's lecture - which is on exactly those things! N.B. Object orientated ontology and object orientated programming are not the same thing. But they do use the same word. So there!

The main thing I want you keep in mind today is 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).

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

• 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
• How to add other libraries of JavaScript code to your p5.js projects, and some of the most interesting ones I've used in my work

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.

How to add other libraries of JavaScript code to your p5.js projects, and some of the most interesting ones I've used in my work.

p5.js has many libraries, some core and some contributed. Let's take a look at them. But first, what is a software library?

One thing to realise is that p5.js is a library itself!

Allison Parrish has posted a great tutorial on how to use external JavaScript libraries with p5.js, let's go through it together and get it going in the p5.js editor.

Do you remember that falling logo I showed you in a previous lecture? Let's take a look at how it includes other libraries apart from p5.js - p5.gui and matter.js. Making GUI's for your sketches is a great idea because you can use that GUI to quickly tweak settings and the like - to explore the "possibility space" of your code. I love using physics simulations to animate with because I'm too lazy to do keyframe animation.

Any programmer will tell you that dealing with date and time and timezones is a nightmare - I've used moment.js several times in my projects, particuarly to generate nice filenames.

Let's finish with a quick tour through some other JavaScript libraries that might be useful.

• Paper.js - vector graphics library.
• Two.js - another vector graphics library.
• LiquidFun - fluid simulation library.
• Zdog - round, flat, designer-friendly pseudo-3D engine.
• Pts - linear algebra libary.
• three.js - 3D graphics library.
• map and location library.
• hammer.js - touch gesture library.

Thanks!
Back to slide index.