Complexity – Experimentation


I have created an account on open processing so that I am able to show my coding work on there and it is easy to follow.

Need to reminder some code is different on open processing to processing.

processing v open processing

Int – Var

Float – Var

Void – Function

Size – createCanvas

Website to view regarding the above information ,

Here are some of my experiment work, allowing me to have a better understanding of the program and what I can achieve.

My work can be viewed on the below link.

This Image below shows my first piece of work on processing.

Screen Shot 2017-03-30 at 14.34.58

Create a large circle.

squares and a cross

Large cross and white squares.

Setup and Draw


I wanted to create two static shapes and see how they work on one page and also how I would code them to have the square shape with a fill and the circle with out a fill.



With is work I have coded the square so that it follow the mouse around the screen. This could work well with images I want to create in illustrator. This code makes the work look interesting.

Following mouse

I have coded the square to following the mouse around the screen, but I have left the circle to be static.

Screen Shot 2017-03-30 at 14.29.50

Square and dot follows mouse.

When the mouse moves over the screen different colour square appear.

I got this code from generative design book.

Incontinence variable

Slow Movement for circle

Incrementing a variable01

The white circle is moving across the page slowly.

Fast Movement for circle

I have coded the white circle to move from side to side, it is difficult to see from the above images. The speed is fast.

small cicrles on oneline01

I have coded it so that there are more circles but showing up on the same line.

Random change colour

line of circle changing colour

I have coded it so that there are more circles but showing up on the same line, but the colour changes.

small cicrles on oneline ramdon colours

Same as about but I have made the (red, green, blue) random;

One white circle growing large in scale on the screen.

Random change colour

The circles colours change, and the size of the circles grown.

Random Colour and Location

I have coded this piece so that the colours are random the location of the circles.

The code is the same as the above, however the only different is the circles are more lager.

If I do not click on the page the circle will keep overlapping on each other.

Random Colour and size

The circle will keep repeating because I have not told the programme to stop after a certain amount.


For this work I have coded the programs to use random on the colour and size of circle, I have also coded it so that it will only draw 100 circle then stop.

Two different codes

Screen Shot 2017-03-30 at 13.46.51

The square has been coded to follow the mouse and the circle will continue repeating on the screen.


The square react with the mouse, if i move the mouse to wards where the square is located it will appear on the screen.

Screen Shot 2017-03-30 at 14.07.43

Once it has reached 100 random circles the program will stop.

Screen Shot 2017-03-30 at 14.14.39.png

Same as above just with random colour.

How to save Work

Screen Shot 2017-03-30 at 14.25.43.png

Adding the below code will allow you to save images of the work.


void keyPressed() { //when a key is pressed

//save an image called “crosses – ” inserting the time from your computer
//to the file name and adding “.tif” on the end. You can add “.jpg” if you
//want a jpg or “.png” if you want a png…
save(“crosses – ” + hour() + minute() + second() + “.tif”);


PushMatri/ PopMatri

Screen Shot 2017-03-30 at 20.25.48.png

Grid/ Rotaion

When you keep clicking the screen the squares will move, rotation altered.

Screen Shot 2017-04-01 at 08.14.05.png

I have changed the code because I wanted to have more gaps and less squares, rotation altered.

Screen Shot 2017-04-01 at 08.18.36.png

With is work I have not altered the rotation.

SVG image

After talking to Dan, Dan suggested using images/photographs and vector drawings in my work along the coding work.  With all all of this work I could then create a set of three poster focusing on Industry revaluation.

Code in processing,

PShape cog02;

void setup() {

cog02 = loadShape(“cog02.svg”);

Screen Shot 2017-04-01 at 08.33.02

Incorporating a vector image into the program, this works better on processing.

Screen Shot 2017-03-30 at 20.21.28.png

Flower following mouse, SVG image – this shows up better on processing.

Screen Shot 2017-04-01 at 08.22.30.png

Star following mouse, SVG image – this shows up better on processing.

Screen Shot 2017-04-01 at 15.05.01.png

Star follows mouse, but squares and static. I want to see how I would be able to code this information. This can be viewed better on processing.

Screen Shot 2017-04-01 at 15.00.49.png

This can be viewed better on processing.

I have use a drawing and change the colour to orange and made it have a alpha. This shows up better on processing.

Screen Shot 2017-04-01 at 14.24.46.png

I created the image in illustrator and save as a SVG, I have also made it so that the cog will randomly change when the page has been clicked onto.

Screen Shot 2017-04-01 at 14.26.54.png

Screen Shot 2017-04-01 at 14.31.48.png

Cog in centre shows up better on processing.

Screen Shot 2017-04-01 at 14.36.35

Cog image to the right hand side of the screen.

Screen Shot 2017-04-01 at 14.39.54

With this piece I wanted to see how it would look if I adding another cog onto the canvas.

Screen Shot 2017-04-01 at 14.42.13.png

With this piece I have coded it so that the cog shape follows the mouse on the screen, I have also added a fill of white to make the cog stand out.

clinking on the screen will create another random page of butterflys.

clinking on the screen will create another random page of lines.


pushMatri to change the X location to the centre.

Rotation and Basic Transformation

Screen Shot 2017-03-30 at 20.16.06.png

pushMatri to change the X location to the centre.

I wanted to create an interesting looking cog shape instead of using a vector image.

Screen Shot 2017-03-30 at 19.43.59.png

Screen Shot 2017-04-01 at 09.01.17.png

I have added a extra part with what looks like is small dots. I really like this work and it will work well with my cog idea I have.

Screen Shot 2017-04-01 at 09.03.22.png

With is one I have added a extra line of dotes, which has made this piece of work look interesting.

Screen Shot 2017-04-01 at 09.06.52.png

This work shows up better on processing, I have added a mouse code for the flowers.

Screen Shot 2017-04-01 at 08.27.57.png

I got this code from a book called generative design. I wanted to have a better understanding of code and how this work. This code works better on processing.

Move the mouse and the circles of patterns will appear.

Using the above code I have change it to the image I wanted to use. This can be viewed better on Processing.


Screen Shot 2017-04-01 at 09.59.07.png

Trying to create a grid formation.

Screen Shot 2017-04-01 at 10.01.24.png

Screen Shot 2017-04-01 at 10.03.58.png

Using Photographs

I wanted to know who to use photographs in processing so I watched Tutorials by Daniel Shiffman, there are 7 videos for this project.


I have used an image taken from the internet to see how I can incorporate this into my work.

Invert Effect


With this piece I have made it invert when you click a key, I wanted to experiment with the image.

Erode Effect

To create the INVERT and ERODE effect  to my work I watched the below Tutorial video I found on Youtube.

Gradient colour



Altering the x and y and dividing then has created a gradient of colors. This code also allow me to allure the pixies.


Photographic work

From using my own photographs I have experiment with different ways for showing them, such as in a grid formation of playing around with the pixies.

With this piece of work I have code it so that when you click on the image the rectangle will only show what is within it and in a grid formation. Once this has been done click on the R key which will give more random pics of the view.

To get the image to show up I needed to first change the size to 1600 x 1200 using Photoshop.

The feedback of image cut out, this can been seen better on processing.

Experiment 1: Controlled Random Image Programs

For this task I will write three programs that will generate random art, I will need to use random loops and random functions.

My submission should contain the following;

  • Original Processing File (fully annotated)
  • Any supporting documents or rough programs
  • 5 X images files produced by each program
  • 1 X selected image from each program

// Having this comment before text will mean that what I put after it will not show, this will also allow me to add explanation to each line of code.

; use this at the end of code such as – circleX = width/2;

circs - 143626.jeg

Random stroke-lines size and location.

crosses - 115550

Code can be viewed on the above line.

circs - 144727.jeg

With the above work I have used got rid of the strokeWeight.

Books I have looked at –


I have looked through a book called generative design, which was full of examples and code. It was good looking through this book so I can see how coding is stretchered and works. Along side this I have been on there website too

Because I will be looking at Industry revaluation, having a repeated/repetitive motion, form/shape is Ideal for this project as well as my subject field.

Hear are some code I have experiment with from the above book. I have been experimenting with the code below to see what I can get, which looks at repetitive code.

Screen Shot 2017-04-01 at 08.37.30.png

With the below works I have experimented with size, fill, xnoise, edgeSize and noiseFactor.

Screen Shot 2017-04-01 at 08.40.16.png

Screen Shot 2017-04-01 at 08.43.04.png

Screen Shot 2017-04-01 at 08.46.11.png

Screen Shot 2017-04-01 at 08.48.32

Screen Shot 2017-04-01 at 08.52.02.png

Screen Shot 2017-04-01 at 08.54.23.png

Screen Shot 2017-03-30 at 20.32.44.png

When you move the mouse you mark shapes onto the canvas.

generative art

I have also looked through generative art. These are good resources to look at and take references from.

Screen Shot 2017-04-01 at 14.26.54.png

Leave a Reply

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

You are commenting using your 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 )

Google+ photo

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

Connecting to %s