CCI Diploma 2021/2022: Unit 1: Lecture 5: Listing and Randomising.
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 harness lists and randomness to create infinite variety on which to use your human intuition on.

The artist of the day is Vera Molnár.

I was first drawn to her work by seeing her piece "(Des)Ordres" at the Victoria and Albert Museum, here in London. Go see it!

A video of Vera talking about Randomness.

I think alot of Vera's work is about listing and randomising, which is why she's perfect for today's lecture - which is on exactly those things!

The three things I want you keep in mind today are that the computer science word for a list is an array and that computers can generate both random numbers and noise, which is almost random, but not quite.

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

• JavaScript objects and how they can store lots of different types of information in one place
• Lists or one dimensional arrays
• Two dimensional arrays or lists that have a list for each of their entries
• N (or any) dimensional arrays
• Random functions
• Noise functions

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

We encountered JavaScript objects in the last lecture 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.

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!

Artwork: Every Icon (1997) John F. Simon, Jr. New York Times article about the work.

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://p5js.org/examples/interaction-follow-3.html - this example combines one dimensional arrays, trigonometry, and push() and pop() drawing.

https://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.

Random functions

Let's take a look at the p5.js reference page for the random() function.

It's important to realise that the random() function only produces pseudo-random numbers. This is demonstrated through the randomSeed() p5.js function. Using the same seed produces the same sequence of random numbers every time. If you really need really random numbers, you need to sample nature, as random.org does.

Let's take a look at the p5.js Random example to see how the random() function can be used to generate random greyscale patterns.

Let's take a look at the p5.js Double Random example to see how two calls to the random() function can produce an irregular line.

Let's take a look at the p5.js lerp colour example to see how the random() function can be used for infinite graphical output.

Let's take a look at the p5.js tickle example to see how the random() function can be used for interaction.

Let's take a look at the p5.js Weight Line example to see how the random() function can be used for interaction that gives random colours and other attributes of a line.

Noise functions.

In 1983, Ken Perlin invented Perlin Noise, for which he recieved an Oscar in 1997. Perlin Noise can be used to generate realistic looking clouds, landscapes or many other natural features. Since then other noise generators have been invented - including Simplex Noise and Worley Noise. As an aside, there are many colours of noise found in audio engineering and physics. Be careful when generating sound using noise - make sure not to accidentally hit the Brown note.

Let's take a look at the p5.js reference for noise(), which uses Perlin Noise. You can the noiseDetail() function to control the resolution of the noise that you generate.

Finally, let's look at a pair of examples that use Perlin noise to generate movement - in one dimension or in two dimensions. Stop press: short tutorial on noise in p5.js by Gene Kogan.

Thanks!
Back to slide index.