How to code live art – Beginners

For summer camp this year, children learnt how to live code art with world renowned digital music and art performer Antonio Roberts. We want to share this amazing skill with others and have devised this online step by step guide using free online platforms. With simple code and clear instructions, this is the best way to have fun and explore a new talent.

What is live code art?

Live coding is a performance of coding changes to digital sound and digital art. The performance is improvised and uses a series of simple algorithms to inform the live composition.

This is an example of Antonio Roberts live coding at NTC club for ‘Creative Coding aka Digital Foraging’.

During summer camp, the children learnt some simple algorithms and began to experiment with the visual to create their own expressions of live code art.


How to use Estuary

Estuary is a free website where you can use live coding to make generative music and visuals.

Estuary was designed and created by David Ogborn.

  • Once you are in the Solo Mode we will be changing a few settings to see our code better.

  • Step 1: type or copy this line into the TerminalChat: !presetview twocolumns
  • Step 2: click the arrow down on one of the 6 free boxes and choose Hydra in the dropdown options. This will be the coding language you will be using.
  • Step 3: Finally, changing the theme form ‘Classic’ to ‘Dark’ helps make the text easier to read once the visuals start changing with your code. By holding ‘ctrl’ and pressing ‘+’ on your keyboard you can also make the text bigger.

In the Hydra box copy and paste or type osc(1,0.01,100). Then press enter/return and add .out(o0). Click the play button to the right of Hydra each time you change your code to see the changes.

Change the values of your code osc(1,0.01,100) and click play each time.

  • Change the first number to set the frequency/number of colour bands, eg. 1 – try not to set too high. Next try 5
  • Change the second number to adjust the speed that the bands move, eg. 0.01 – try not to set too high. Next try 0.1
  • Change the third number to make the bands more or less saturated, eg. 100. Next try 300)

.out(o0) tells Hydra that this is the end of the code, so should always be last.

Copy and paste / type .color(1,1,1) above .out(o0). Click play (Colour here is spelled the American way)

  • the first number sets the red value (higher than 1 = more red)
  • the second sets the green value (higher than 1 = more green)
  • the third sets the blue value (higher than 1 = more blue)
  • Test new colour value, eg. .color(5,5,0) and click play.

Try adding .kaleid(4) and click play. This will add a kaleidoscope effect. The number defines how many mirror segments are created, in this case 4. Try different numbers and see what happens.

Now try adding .pixelate(10,10) and click play.

  • the first number sets the number of pixels on the x axis (left to right), eg. 10. Next try 30
  • the second number sets the number of pixels on the y axis (top to bottom), eg. 10. Next try 30

Try adding .colorama(1) and click play. This increases the colour and noise of the visuals.

Continue changing and experimenting with your settings. For example;

  • you can delete .Pixelate (30,30)
  • change .Kaleid(8) to .Kaleid(3)
  • Change .Colorama(1) to .Colorama (0.25)