Creative Coding

Overview

“How can we use the computer as a tool in the generation of art and design? What are the intrinsic aesthetics of computer-created art? This project explores using code as a creative partner. Students will be introduced to the fundamentals of code-based art and design, exploring loops, flow, randomness and different forms of imaging.

The Processing programming environment allows students to immediately engage with code and easily develop new ways of mark-making. Using this software, we can quickly and fully explore the possibilities of generative computer-based imaging while becoming familiar with key metaphors, structures and conventions used in all code-based contexts.”

Start date: 02/10/17

An introduction to creative coding and processing in the afternoon.

Tue 03/10

Morning, AV Room

First time using processing. Started with a simple point then created a line, made line interactive, changed colour i.e. stroke, strokeWidth-changes the thickness of line. Then used void setup and void draw to set the program. Learned about the random function. Also learned ADD/MULTIPLY add light and darkness. ‘If’ functions (very similar to other programming languages) let us add conditions i.e. ‘if mouse pressed do this or else do this’ or even ‘if key is pressed do this or else do this’. The ‘If’ functions tend to work on a true or false basis where if something is true then the program should do this and if it is not true or present then another option is set.

Examples of Work:

Afternoon

Later on in the day I tried to add negative coordinates to give the lines a different starting point not visible on the screen, also two different colours were set for if mouse was pressed meaning when they overlapped the magenta colour appeared.

I then decided to use the random function to add a rainbow light kind of effect.

After playing around with the coordinates for a while I managed to set a box in which the lines would appear coming from each side and creating a ‘hairy’ looking texture on the screen.

Evening

After successfully managing to create the box I wanted to understand what exactly all the numbers meant and if I changed some but not others what would appear on my screen? I kept changing things until I was more certain I understood what each one meant and then I decided to use the direction the lines can appear from to add another line and after that I added a line with a centre point so that the mouse could affect 2 things at once: moving the line in the middle like in the first examples from this morning as well as adding a different colour to ALL the lines when pressed and since the colour was set to ‘MULTIPLY’ it over layered the light the original lines created.

Wed 10.05am 04/10

I’ve just watched the processing beginner tutorial and made a program which uses shapes rather than just lines which I learned yesterday. I think I’m understanding everything quite well and the coding I have done in the past is definitely helping when it comes to understanding the structure. I started the program with a continued ellipse as the background was placed in setup instead of draw meaning it didn’t keep drawing over my circles and it’s easy to make out their trail.

I then wanted to add another shape. I used an if function and used ‘mousePressed’ to add a rectangle.

So now the program changes between the shapes depending on how the mouse is used.

This simple program doesn’t have one key feature yet. When it starts a shape appears on the top left, to change this ill have to set the background to clear with an if function so the drawing can start where I choose.

5/10/17 16:10

9/10/17 Mon 16:07

PACMAN!

Very difficult to make, first attempts looked like this:

I didn’t know how to work with the arc or the PIE functions so Paul helped me figure out radians using the sin(); function. This code still seems pretty complex to me however it was a good induction to the sin function and I’m definitely understanding the float function better than before. I changed the simple pacman to make something visual and interactive.

Next Step/Challenge: Make pacman rotate!

11/10/17 Wed 12:29

playing with the sin function and float variables including frameCount

17 October 2017 14:26

using the ‘noise’ function with my previous pacman code

I listened to Paul and removed the colour from this code to have a simpler image

Even though the Pacman code started out as something very comical I think it had a deeper visual impact and I could easily relate it to an idea or meaning.

In these sketches I used the sin and noise function to experiment.

Rectangles!!

I changed the black stroke to white and fill to black to see if the image would be more engaging

In the following sketches I tried to play with colour combinations I wouldn’t usually consider. I used to always just go for a rainbow effect however these sketches showed me that using less colours or even contrasting colours can be quite elegant.

23/10/17

These reminded me of a skeleton or a snake skin, still produced with the simple paceman shape.

This image reminded me of lace, the overlapping circles create a texture.

Interestingly this image gives a perception of movement because of it’s shape and transparency.

Quads

I really wanted to play around with the shape of a quad and its coordinates to create images which are very complicated and advanced just by using functions like sin, cos and noise.

I didn’t like this colour scheme the orange was too bright and the lines in the middle got covered very quickly

This was my favourite scheme as the contrast between the background and the lines was strong enough for the lines to be eye catching.

Seaweed!!

25/10/2017 23:01

Decisions. Picking final 3 sketches.

one of the new quad programs
one of the pacman programs
the animated circles

Sketch 1: QUADS

Various screenshots from different sketches:

Final Sketch:

Pacman

four_moving_circlesYellowBLue05_possible_final

SIN Retro

Sin_Black_and_White03_RETRO_

FINALS

Reflection

Overall I think these four weeks were a great introduction into coding and gave me a lot of time to experiment with a lot of different sketches. I enjoyed the whole process and I am very happy with my final sketches. The coding skills I have learned will help when adapting to a new coding language and will be transferable in the future. I had a chance to play with colour schemes I wouldn’t ever think of using and considering shapes in more complicated ways changing coordinates and sizes so the shapes leave marks behind creating an image and don’t even resemble their original shape. This was also my first insight into animation and movement in some of these sketches even though the finals were still images.