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.

mouseLines-004726

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

mouseLines-002384

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.

mouseLines-003453

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.

basics-006048

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

basics-008561.png

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

basics-014787.png

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

Screen Shot 2017-10-09 at 16.27.28

mouseLines-001058

mouseLines-006055

 

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.

Screen Shot 2017-10-09 at 16.06.18

mouseLines-001490

Next Step/Challenge: Make pacman rotate!

11/10/17 Wed 12:29

playing with the sin function and float variables including frameCount

mouseLines-000122

mouseLines-000068

mouseLines-000329mouseLines-000401mouseLines-000480

mouseLines-000948

mouseLines-000330mouseLines-000327

17 October 2017 14:26

using the ‘noise’ function with my previous pacman code

mouseLines-000257mouseLines-000894

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

mouseLines-000324mouseLines-004406

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.

mouseLines-000007mouseLines-000018mouseLines-000120

mouseLines-000289mouseLines-000318

mouseLines-000670mouseLines-004081mouseLines-000733

Rectangles!!

mouseLines-000310mouseLines-000524mouseLines-000905

mouseLines-001319.png

mouseLines-000828mouseLines-003050mouseLines-003760mouseLines-004830

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

mouseLines-000600mouseLines-000828mouseLines-000980mouseLines-001680mouseLines-002234mouseLines-002986

mouseLines-000769mouseLines-000492

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.

mouseLines-000815

mouseLines-000809

mouseLines-001296mouseLines-001151

mouseLines-000292mouseLines-000498

mouseLines-000021mouseLines-000465mouseLines-000051mouseLines-000166mouseLines-000111mouseLines-000572mouseLines-000180mouseLines-000242mouseLines-000311

mouseLines-000150mouseLines-000310mouseLines-000350mouseLines-000028

mouseLines-000369

mouseLines-000229mouseLines-000208mouseLines-000698mouseLines-001109mouseLines-002067

23/10/17

mouseLines-000008.png

mouseLines-001096mouseLines-003583mouseLines-006586

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

mouseLines-000033mouseLines-000037mouseLines-000041

mouseLines-000093

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

mouseLines-000122mouseLines-000128

mouseLines-000184

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

mouseLines-000018mouseLines-000088mouseLines-000161mouseLines-000195mouseLines-000382mouseLines-000522

mouseLines-000304mouseLines-000475mouseLines-000814mouseLines-001175mouseLines-001316

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.

mouseLines-000310mouseLines-000379mouseLines-001042mouseLines-002147mouseLines-006070

mouseLines-001062mouseLines-001886

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

mouseLines-000493mouseLines-000624mouseLines-000894

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

mouseLines-000138

mouseLines-000354mouseLines-000627

mouseLines-000122mouseLines-000243mouseLines-000511mouseLines-000514mouseLines-000933mouseLines-001389

mouseLines-000854Seaweed!!mouseLines-000983mouseLines-002370mouseLines-002809mouseLines-000496

25/10/2017 23:01

Decisions. Picking final 3 sketches.

  1. one of the new quad programs
  2. one of the pacman programs
  3. the animated circles

Sketch 1: QUADS

Various screenshots from different sketches:

mouseLines-000005mouseLines-000009mouseLines-000016mouseLines-000019mouseLines-000041mouseLines-000053mouseLines-000054mouseLines-000117mouseLines-000144mouseLines-000156mouseLines-000178mouseLines-000200mouseLines-000238mouseLines-000303mouseLines-000336

Final Sketch:

f-000206f-000627f-001348f-002403

Pacman

four_moving_circlesYellowBLue05_possible_final

mouseLines-001950mouseLines-005241mouseLines-011707

SIN Retro

Sin_Black_and_White03_RETRO_

mouseLines-000682mouseLines-000745mouseLines-000795

mouseLines-000477

mouseLines-000022mouseLines-000054mouseLines-001110mouseLines-000571


FINALS

Screen Shot 2017-10-27 at 13.15.54

MOVING_CIRCLE-013671

Screen Shot 2017-10-27 at 13.15.19Screen Shot 2017-10-27 at 13.15.31QUAD-002593

Screen Shot 2017-10-27 at 13.14.07

RETRO-001035

RETRO-001735

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.

1 Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s