Complexity – Experimentation

Experiment

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 , https://github.com/processing/p5.js/wiki/Processing-transition

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.

https://www.openprocessing.org/user/84293/#sketches

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

Screen Shot 2017-03-30 at 14.34.58

https://www.openprocessing.org/sketch/417265

Create a large circle.

squares and a cross

https://www.openprocessing.org/sketch/417235

Large cross and white squares.

Setup and Draw

setup-draw01

https://www.openprocessing.org/sketch/417208

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.

Events

setup-draw02

https://www.openprocessing.org/sketch/417210

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

https://www.openprocessing.org/sketch/417215

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

https://www.openprocessing.org/sketch/417257

Square and dot follows mouse.

https://www.openprocessing.org/sketch/417368

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

https://www.openprocessing.org/sketch/417206

The white circle is moving across the page slowly.

Fast Movement for circle

https://www.openprocessing.org/sketch/create

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

https://www.openprocessing.org/sketch/417216

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

https://www.openprocessing.org/sketch/417218

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

https://www.openprocessing.org/sketch/417221

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

https://www.openprocessing.org/sketch/417213

One white circle growing large in scale on the screen.

Random change colour

https://www.openprocessing.org/sketch/417212

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

Random Colour and Location

https://www.openprocessing.org/sketch/417222

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

https://www.openprocessing.org/sketch/417224

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

https://www.openprocessing.org/sketch/417228

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

Random Colour and size

https://www.openprocessing.org/sketch/417244

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

100random-circles

https://www.openprocessing.org/sketch/417238

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

https://www.openprocessing.org/sketch/create

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

Boolean

https://www.openprocessing.org/sketch/417247

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

https://www.openprocessing.org/sketch/417248

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

Screen Shot 2017-03-30 at 14.14.39.png

https://www.openprocessing.org/sketch/417250

Same as above just with random colour.

https://www.openprocessing.org/sketch/417252

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

https://www.openprocessing.org/sketch/417354

Grid/ Rotaion

https://www.openprocessing.org/sketch/417269

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

Screen Shot 2017-04-01 at 08.14.05.png

https://www.openprocessing.org/sketch/417860

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

https://www.openprocessing.org/sketch/417861

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”);
cog02.disableStyle();

Screen Shot 2017-04-01 at 08.33.02

https://www.openprocessing.org/sketch/417864

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

Screen Shot 2017-03-30 at 20.21.28.png

https://www.openprocessing.org/sketch/417350

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

Screen Shot 2017-04-01 at 08.22.30.png

https://www.openprocessing.org/sketch/417862

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

Screen Shot 2017-04-01 at 15.05.01.png

https://www.openprocessing.org/sketch/417931

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

https://www.openprocessing.org/sketch/417930

This can be viewed better on processing.

https://www.openprocessing.org/sketch/417343

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

https://www.openprocessing.org/sketch/417920

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

https://www.openprocessing.org/sketch/417922

Screen Shot 2017-04-01 at 14.31.48.png

https://www.openprocessing.org/sketch/417924

Cog in centre shows up better on processing.

Screen Shot 2017-04-01 at 14.36.35

https://www.openprocessing.org/sketch/417926

Cog image to the right hand side of the screen.

Screen Shot 2017-04-01 at 14.39.54

https://www.openprocessing.org/sketch/417927

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

https://www.openprocessing.org/sketch/417928

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.

https://www.openprocessing.org/sketch/417928

https://www.openprocessing.org/sketch/417320

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

https://www.openprocessing.org/sketch/417322

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

Rotation

https://www.openprocessing.org/sketch/417333

pushMatri to change the X location to the centre.

Rotation and Basic Transformation

Screen Shot 2017-03-30 at 20.16.06.png

https://www.openprocessing.org/sketch/417345

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

https://www.openprocessing.org/sketch/417335

Screen Shot 2017-04-01 at 09.01.17.png

https://www.openprocessing.org/sketch/417871

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

https://www.openprocessing.org/sketch/417872

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

https://www.openprocessing.org/sketch/417873

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

https://www.openprocessing.org/sketch/417863

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.

https://www.openprocessing.org/sketch/417929

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

Pattens

Screen Shot 2017-04-01 at 09.59.07.png

https://www.openprocessing.org/sketch/417879

Trying to create a grid formation.

Screen Shot 2017-04-01 at 10.01.24.png

https://www.openprocessing.org/sketch/417880

Screen Shot 2017-04-01 at 10.03.58.png

https://www.openprocessing.org/sketch/417881

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.

hog01

https://www.openprocessing.org/sketch/420173

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

Invert Effect

hog02

https://www.openprocessing.org/sketch/420174

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

Erode Effect

https://www.openprocessing.org/sketch/420176

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

Gradient colour

Grad01

https://www.openprocessing.org/sketch/420180

Grad02

https://www.openprocessing.org/sketch/420181

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.

https://www.openprocessing.org/sketch/421103

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.

 

 

https://www.openprocessing.org/sketch/421104

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

https://www.openprocessing.org/sketch/417324

Random stroke-lines size and location.

crosses - 115550https://www.openprocessing.org/sketch/417325

Code can be viewed on the above line.

circs - 144727.jeg

https://www.openprocessing.org/sketch/417328

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

Books I have looked at –

generative-design

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 http://www.generative-gestaltung.de/code.

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

https://www.openprocessing.org/sketch/417330

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

Screen Shot 2017-04-01 at 08.40.16.png

https://www.openprocessing.org/sketch/417865

Screen Shot 2017-04-01 at 08.43.04.png

https://www.openprocessing.org/sketch/417866

Screen Shot 2017-04-01 at 08.46.11.png

https://www.openprocessing.org/sketch/417867

Screen Shot 2017-04-01 at 08.48.32

https://www.openprocessing.org/sketch/417868

Screen Shot 2017-04-01 at 08.52.02.png

https://www.openprocessing.org/sketch/417869

Screen Shot 2017-04-01 at 08.54.23.png

https://www.openprocessing.org/sketch/417870

Screen Shot 2017-03-30 at 20.32.44.png

https://www.openprocessing.org/sketch/417360

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

Advertisements

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 )

Google+ photo

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

Connecting to %s