First Meetup in Cornwall - Beginner's Intro To Creative Coding

With my move to Cornwall, Algorithmic Art will meet in both London and Cornwall on alternating months.

This month was the first meetup in Cornwall, hosted by the Royal Cornwall Museum.

Slides with examples of algorithmic art are here: https://goo.gl/RyjnVb

Algorithmic Art?

We started with a brief overview of algorithmic art, looking at examples as broad as genetic algorithms creating music, to machine learning text to create verse performed by a robot, from infinitely detailed fractal forms to objects created in code and 3D printed.

We discussed the central element of algorithmic art being a mathematical or logical recipe rtha is central to the design of the work. For some, the appreciation of algorithmic art is purely the result. For others, it is the, often surprising, beauty and intricacy, hidden in mathematics that's revealed by the artist.

For some of us, we can't appreciate algorithmic art without appreciating the algorithm!

https://twitter.com/tylhobbs/status/1043961878282739712

Gentle Introduction to Creative Coding

This first session was intended for artists who may never have coded before.

It was also a chance to meet local artist fir the first time and start to understand what people are interested in.

We've previously run beginner's introductions to creative coding with P5js / Processing.

• https://algorithmicartmeetup.blogspot.com/2017/05/a-gentle-introduction-to-processing.html
• https://algorithmicartmeetup.blogspot.com/2017/12/a-gentle-intro-to-processing-coding-for.html

This time we didn't use a set of slides to work through. Instead we set out a broad set of concepts we wanted to work through, and decided to work more closely with the group and only go as fast or slow as needed.

OpenProcessing Makes Coding Really Easy

A question arose early about why we weren't using the locally installed Processing software.

It became clear through the session that openprocess.org makes coding really easy for both beginners and non-beginners alike:

• there is no need to install any software - we can create code and see the resulting drawings all in a browser, any modern browser
• we avoid the hassle of software conflicts and versions - all that's taken care of by openprocessing
• we don't need to worry about source code files, or html code to contain our p5js code .. we just type code into the web page and click run
• sketches can be saved, and then shared by sharing the link, and anyone with a web browser on their computer, laptop, tablet or smartphone can see your work, including your code - that's powerful!

Structure of a Sketch

We started by looking briefly at the structure of all p5js sketches.

We talked about how the setup() section contains instructions (code) which set up the drawing environment. That would be things like canvas background colour, canvas size, and so on.

The other section draw() is where we write code that actually does the drawing.

Making Things Even Simpler With Simple.JS

As easy as p5js is, and as easy as openprocessing makes working with it .. my experience is that there are still some barriers to newcomers because the language itself isn't designed for young or new learners, and also some of the defaults aren't that friendly.

So I wrote a library called simple.js which tries to smooth off these hard edges. For example, it provides instructions like circle() and square() which are missing from p5js. It also provides a much much simpler way of doing loops using a repeat() command. Sensible defaults include a visible stroke, background colour, and a yellow fill, as well as turning of he automatic looping of draw() which is only useful for animation.

We use openprocessing to "switch on" the library, and invoke it in setup() like this.

This minimal code above, is a good starting point for many projects.

Shapes, Colours

We started by asking what the computer code for drawing a circle would be if it was an intuitive language. Most people guessed circle() .. and we tried it. We didn't spend long going over the coordinate system other than to say it starts at the top left, not bottom left.

Everyone write code to draw a circle, and then experimented with different locations and sizes.

This is the point at which everyone in the room was a coder!

We then took on the challenge of drawing two different circles. Again the group successfully worked out how to use two circle() instructions.

Someone asked why the circle was yellow. Rather a answering we progressed to using the fill() instruction to define which colour to use for filling subsequent shapes. We used the named colours, such as 'red', 'green', 'pink', which is a great way to start using colours compared to the RGB method.

The valid named colours are actually CSS colours used by web developers:

• https://www.w3schools.com/cssref/css_colors.asp

I did explain that I had chosen yellow as a sane default in simple.js because the p5js default is a transparent no-colour.

We also tried using a square() instruction just to practise and start to see the comparative similarities between code - a useful skill even for advanced coders.

Variables, Randomness

Having used numbers for location and size, we introduced the idea of using variable.

The picture above illustrates a good way of thinking about variables. Instead of using the number 10, we put it inside a box called x, and then use x instead of the number.

This might not be useful for very simple code, but for more interesting code, we can generalise a problem by using variables instead of specific numbers. You can imagine a complex drawing of many parts, all of which depending on a size variable. We only need to change the size variable once and the while drawing is correctly rescaled. We could have used the name banana but size is more descriptive.

We created variables x and y and used these in the circle instruction instead of actual numbers for location.

We then introduced a big idea - randomness. Instead of setting x and y to specific numbers, we used randomNumber() to get our computers to randomly choose a number from a range. For example var x = randomNumber(0, 800) will choose a number between 0 and 800 and put that inside the variable x.

We ran our code and found the circle was drawn at different place to someone else's code. Running the code again results in a different location again. The code is choosing a random number every time the code is run.

As an exercise, the group tried to make the size of the circles random. Everyone got that working to great satisfaction!

Functions, Repetition

We the moved onto a more advanced topic - that of packaging useful code to it can be reused. These are called functions.

We decided our code which draws a circle of random size at a random location was pretty neat. So we looked at how to package it so it could be used again and again. A fun part of doing that is giving the packaged code a name. I called mine blob()!

We saw how we can call our code simply by using its name, in my case blob(). More importantly we saw how calling blob() twice, or even four times, calls the code four times. We started to see the benefits of functions - we didn't need to write the all the code that randomly chooses a location and size and draws the circle four times - we just called blob four times.

I then set the challenge of drawing 400 circles!

We talked about not writing all the code 400 times, and we also said it wouldn't be good to write blob() 400 times either!

We know computers are good at repeating things, and they are fast, and don't get bored. And this is why many coding languages make it easy to repeat instructions.

We used the repeat() instruction to repeatedly run code In my case it was repeat(400, blob) which calls blob() 400 times.

The simplicity and power of repetition started to become very apparent! And the resulting 400 circles on the canvas were pretty cool too!

Finally we introduced the ability to randomly pick a colour from a list, a colour palette, and use that to fill each circle.

The results were impressive and a great conclusion to the session!

Here's one example:

And another:

Conclusion

The class was quite full and everyone seem to enjoy the session. I was concerned that the already-coders might be bored but they said they weren't.

Most importantly, the first time coders all seemed enthused and weren't daunted by the idea of coding.

And best of all, some said they were inspired to continue!

I did let the group know that even in this short session they had actually covered quite a few computer science and programming concepts - the idea of code structure, variables, functions, repetition, and generalisation.

Resources

• Creative Coding for Kids - https://sites.google.com/view/creative-coding-for-kids/
• P5js Reference - https://p5js.org/reference/