From 96125a1ded95035b4c42c680a358965dfb8cbf66 Mon Sep 17 00:00:00 2001 From: Joel Gethin Lewis Date: Fri, 10 Jan 2025 14:09:11 +0000 Subject: [PATCH] Correcting typos and updating links for Tuesday and Wednesday lectures --- docs/discussion_04.html | 4 ++-- docs/discussion_05.html | 2 +- docs/discussion_06.html | 6 +++--- docs/lecture_03.html | 12 ++++++------ docs/lecture_04.html | 33 +++++++++++++++++---------------- docs/lecture_05.html | 22 +++++++++++----------- docs/lecture_06.html | 17 +++++++++-------- 7 files changed, 49 insertions(+), 47 deletions(-) diff --git a/docs/discussion_04.html b/docs/discussion_04.html index c247ec4..f9c6ab1 100644 --- a/docs/discussion_04.html +++ b/docs/discussion_04.html @@ -39,11 +39,11 @@
  • "A 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.
  • Solving Sol, Javascript implementations of his works.
    • -
  • Generative Machines with Matt DesLauriers - great talk by a contemporary practitioner on their practice and inspirations
    • +
  • Generative Machines with Matt DesLauriers - great talk by a contemporary practitioner on their practice and inspirations.
    • - Finally, let's find out more about the Tetralemma, a precursor to the Boolean logic that we discovered today. Something that can be either true or false or both true and false or neither true or false. Aeon (another great website with lots of interesting articles) has an indepth article on the subject. + Finally, let's find out more about the Tetralemma, a precursor to the Boolean logic that we discovered today. Something that can be either true or false or both true and false or neither true or false. Aeon (another great website with lots of interesting articles) has an in depth article on the subject.
    What questions do you have for me? Have any of you seen any of LeWitt's work in person? What do you think of the Tetralemma?
    diff --git a/docs/discussion_05.html b/docs/discussion_05.html index f59930d..1ef5881 100644 --- a/docs/discussion_05.html +++ b/docs/discussion_05.html @@ -39,7 +39,7 @@
    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. +
    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.
    N.B. Object orientated ontology and object orientated programming are not the same thing. But they do use the same word. So there!
    diff --git a/docs/discussion_06.html b/docs/discussion_06.html index 0b153ac..4ed94dd 100644 --- a/docs/discussion_06.html +++ b/docs/discussion_06.html @@ -32,8 +32,8 @@
    UAL CCI: Introduction to Creative Computing 2025: 🪄: Discussion 6: Vera Molnar and Alan Moore
    Back to slide index.
    -
    Let's learn more about 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! +
    Let's learn more about Vera Molnár (RIP).
    +
    I was first drawn to her work by seeing her piece "(Des)Ordres" at the Victoria and Albert Museum, here in London. Go see her and lots of other amazing artist's work at the Electric Dreams exhibition at the Tate Modern! You can get in for £5 if you are under 25 and join the Tate Collective for FREE!
    @@ -41,7 +41,7 @@
    Alan Moore is a writer who wrote some of my comic books ever: Watchmen, V for Vendetta and Swamp Thing.
    Let's watch a short excerpt from the fantastic " The Mindscape of Alan Moore" where he talks about exploring possibility space.
    -
    What questions do you have for me about Vera Molnar, Alan Moore and exploring possibility space?
    +
    What questions do you have for me about Vera Molnár, Alan Moore and exploring possibility space?
    Thanks! See you tomorrow at 1000 sharp!
    diff --git a/docs/lecture_03.html b/docs/lecture_03.html index 018a63a..19e48d8 100644 --- a/docs/lecture_03.html +++ b/docs/lecture_03.html @@ -85,14 +85,14 @@
  • 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!
    • -
    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.
    +
    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(). + 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 Translate example for how to use translate() to do that. You can also rotate() and scale(). + N.B. you can use push() and pop() to remember different drawing states.
    -
    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!
    -
    Now let's go through the p5.js Get Started tutorial together, using the p5.js editor. Remember the Chicken and Egg problem for learning coding from the first lecture? We are going to encounter 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!
    +
    Now let's go through the p5.js Get Started tutorial together, using the p5.js editor. 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!
    Thanks! Time for a short break!
    diff --git a/docs/lecture_04.html b/docs/lecture_04.html index f9a0e2a..f6ea707 100644 --- a/docs/lecture_04.html +++ b/docs/lecture_04.html @@ -54,36 +54,37 @@
  • 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.
    +
    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.
      • +
    • You can use recursion to draw trees.
    -
    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().
    -
    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?
    -
    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!
    +
    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().
    +
    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?
    +
    Let's take a look at this p5.js example on 1 dimensional distance that makes a simple but pleasing mouse interaction.
    +
    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!
    Iteration or looping or repeating is one of the most powerful tools for getting things done in coding. Loops let you repeat the same recipe or set of instructions or commands or block of code as many times as you like. You can set loops to run a set number of times, or for a certain period of time, or to run for every piece of information in a certain place (like for every entry in an address book) or even to run an interactive number of times (until the user presses a certain key for example).
    -
    Let's look at the definition of Iteration - the obsfucatory term for repeating something several times.
    +
    Let's look at the definition of Iteration - the obfuscatory term for repeating something several times.
    Loops are just a part of the wider coding world of Control Flow. We've already encountered some control flow with if/else statements and switch statements. Another way of thinking about loops is doing things many times, but using logic to stop. Boolean logic in our case.
    The two most common kinds of loops are while loops and for loops.
    -
    Let's venture into the p5.js tutorial on program (or control) flow, specifically the section on four different kinds of loops in p5.js. BTW - the structure of for loops is going to take a bit of time to get used to - before you know it you'll be typing them out automatically!
    -
    Let's take a look at p5.js's control iteration example, remember - iteration is just another word for repeating, or doing the same thing several times.
    -
    Let's take a look at a p5.js example that combines loops and if statements. BTW: what does this % thing do? Where should we look? There is a whole universe of thinking about number systems that loop.
    -
    A slightly more complicated example of using loops and conditionals (aka if/else statements).
    -
    An example that makes extensive use of logical operators (like AND, OR and NOT - or &&, || and !).
    -
    An example that combines for loops with a custom function.
    -
    A beautiful example of using interactivity and a loop within a loop to generate a grid of ellipses (or circles).
    +
    Let's venture into the p5.js tutorial on program (or control) flow, specifically the section on four different kinds of loops in p5.js. BTW - the structure of for loops is going to take a bit of time to get used to - before you know it you'll be typing them out automatically!
    +
    Let's take a look at p5.js's control iteration example, remember - iteration is just another word for repeating, or doing the same thing several times.
    +
    Let's take a look at a p5.js example that combines loops and if statements. BTW: what does this % thing do? Where should we look? There is a great tutorial from Golan Levin all about this on The Coding Train YouTube channel. N.B. a whole universe of thinking about number systems that loop.
    +
    A slightly more complicated example of using loops and conditionals (aka if/else statements).
    +
    An example that makes extensive use of logical operators (like AND, OR and NOT - or &&, || and !).
    +
    An example that combines for loops with a custom function.
    +
    A beautiful example of using interactivity and a loop within a loop to generate a grid of ellipses (or circles).
    As always, Daniel Shiffman has some great videos all about loops.
    BTW: it took me ages to realise, but most games are just one big while loop - "while the user hasn't pressed the ESC key (or Apple Q), keep running the main game loop" - this is true even for operating systems!
    -
    Let's take a look at a common bug that comes up when you are writing loops - issues around the scope of variables. Let's take a look at a p5.js example about scope.
    -
    Remember we saw push() and pop() this morning? Now see what we can do with a for loop too: check out this advanced Kaleidoscope for some push() and pop() action.
    +
    Let's take a look at a common bug that comes up when you are writing loops - issues around the scope of variables. Let's take a look at a p5.js example about scope.
    +
    Remember we saw push() and pop() this morning? Now see what we can do with a for loop too: check out this advanced Kaleidoscope for some push() and pop() action.
    Thanks! Time for a short break!
    diff --git a/docs/lecture_05.html b/docs/lecture_05.html index f582149..087103e 100644 --- a/docs/lecture_05.html +++ b/docs/lecture_05.html @@ -89,7 +89,7 @@
  • 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 befores: 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.
    +
    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:
    How to do OOP using p5.js - time for lots of chickens and eggs to come together!
    -
    https://p5js.org/examples/objects-objects.html
    -
    https://p5js.org/examples/objects-multiple-objects.html
    -
    https://p5js.org/examples/objects-array-of-objects.html
    -
    https://p5js.org/examples/objects-objects-2.html
    -
    https://p5js.org/examples/objects-composite-objects.html
    +
    https://archive.p5js.org/examples/objects-objects.html
    +
    https://archive.p5js.org/examples/objects-multiple-objects.html
    +
    https://archive.p5js.org/examples/objects-array-of-objects.html
    +
    https://archive.p5js.org/examples/objects-objects-2.html
    +
    https://archive.p5js.org/examples/objects-composite-objects.html
    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! diff --git a/docs/lecture_06.html b/docs/lecture_06.html index c2d1c83..951f208 100644 --- a/docs/lecture_06.html +++ b/docs/lecture_06.html @@ -34,16 +34,17 @@
    The two things I want you keep in mind are that computers can generate both random numbers and noise, which is almost random, but not quite.
    The random() function
    -
    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 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.
    +
    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 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.
    +
    Let's take a look at brand new updated random example that randomises colour and position of a circle.
    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.
    +
    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. Ashort tutorial on noise in p5.js by Gene Kogan. A brand new example on Noise from the updated p5js.org website.
    Thanks! Time for a short break!