Processing

Processing is a programming language allowing the designer to tell computer what to do using code. Computer can read and do what you want it to, you just have to tell it exactly what you have in mind. It is base on Java and designers are able to create visual graphics/applications.

On the right you can see my first design created with processing. >>>

A basic set up of a code in processing is as follows:

You always start like this.

At the beginning I created simple shapes such as a rectangle.

The first two numbers are showing the positions: X and Y. The last two are the size of the object: Width and Height.
Then I added fill, color and stroke.

Next step was to make the shape move, then make it mouse/key responding. This stage became a little more complicated and I had trouble with making it work. But all I had to do is made sure that the code is entered correctly and all bits are in the right place.

After trying out these basic steps to find out what can processing do, I began to experiment with color, shapes, movements composing it all together.
You will see the designs next. >>>

On the left you can see that there are squares and ellipses moving. Basically what is happening is that the objects are being drawn continually.. I created a contrast between the fill and the stroke. I also added a shading effect with transparency that clears the strokes so that they can be drawn again creating the effect. Once the object reaches the point (in this case the edge of the window) it bounces back.

On the right you can see that the piece is responding to the cursor. When you move the cursor to the left it draws more ellipses horizontally, if you move it to the right the number of ellipses decreases. When you move your mouse up it draws more rows and when you move it down the rows start to disappear.

The following design draws circles and the size of the ellipses change each time it is drawn. With time it fills the window up and becomes dark because of the drawn strokes.

To make this happen in "void draw" I entered the following code:

The first part of "int" is the distance from cursor. The second bit is the number of objects, in this case it will run from 0 to 10 times. The last bit is responding to the drawing ellipses continually. It tells computer to add the ellpise each time.

The next design draws an arc in a clock wise. The movement is repeated so that it creates more shades each time to does a full circle. There is also a bit responding to the movement of the cursor. It draws grey shadows around the design. After a couple of minutes you will be able to see a star shape.

This is one of the designs found on:

that I was inpired by.

void setup ();
{
}
viud draw();
{
}

rect(200, 200, 150, 80);

My final design that I decided to do was two hands touching each other with forefingers. The background I wanted was the space and to create it I used Photoshop and then I uploaded the image to Processing. To make a starry effect I created ellipses and points that are showing up in random places. The background image is moving from side to side and then up and down and all of this adds movement to the piece.

The hands' outline was also created in Photoshop. I've uploaded more images of the same outline to create shadows while the mouse is pressed and I added electric flames effect while pressing a key to highlight tension and meaning of the design.