Tag Archives: processing

Understanding Processing: My hands-on learning


Much like anything else I try to learn, I need to have a hands-on experience to learn what needs to be done. It is the most effective way for me to learn so Processing is no different.

I was given the following image and the code for how it was created, the task was to change the way it looked, simple enough –

MEDA102 no changeMEDA102 only a little bit of codeThe code had new functions (rileyDot, leWittlines and hesseDot), the functions are 3 custom designed functions that represented A LOT more code. They are called after the artist that created the image. The black dots, the lines added the dots of colour are from 3 different Artists. With only looking at the code above I changed some things –

MEDA102 little changeLooking at the image the changes are:
– leWitt lines changed to white
– background changed to Red
– A rileyDot was moved and both were enlarged
– hesseDot went from a single row to filling the entire screen, the shade of black was changed and they was moved closer together to overlap.

Simple enough!

Next came the code of what the custom functions represented – that was a lot more code and a lot more of a challenge. Here is the picture I ended up with and the code I ended up with. Can you spot the changes?

MEDA102 big changeNow the code:

MEDA102 code behind final changeI enjoyed this exercise and I am looking forward to incorporating code into my final assessment.

Computer coding – summary and analysis


In the past 3 weeks we have explored how algorithms and computation impacts art. Week 5 introduced us to the world of Processing. Processing is a type of programming language that is open source and an integrated part of computation art. Our task was to create an image using pseudo-code and understand key concepts and elements that go into making a code. These steps being: objects, properties, methods (or functions), method parameters, loops, loops within loops, the program entry point, and its exit point.

Understanding the basic functions of Processing it was time to put our knowledge into practice. Given the exercise of:

  1. Find out how to create different shapes and lines (e.g. square, circles, rectangles, triangles, eclipses etc.) and the different properties (fill, colour, dimensions etc.) by looking up the Processing Reference (http://www.processing.org/reference/) and Tutorials (http://www.processing.org/tutorials/).
  2. Find out how to fill the shapes/ change colour.
  3. Choose one of the artworks below and create it in Processing.
    1. Bridget Riley’s Encircling Discs with Black.
    2. Piet Mondrian’s Composition in Red, Blue and Yellow
    3. Kazimer Malevich’s Self-portrait in Two Dimensions
    4. Damien Hirst’s Controlled Substances

Choosing Piet Mondrian’s Composition in Red, Blue and Yellow we ended up with:

Though this was the first exercise we came across, there are principles of coding that we need to take into account. These Principles being:

  1. Don’t Repeat Yourself (DRY) – code should have a singular representation
  2. Test as you write – deals with efficiency in the long-run
  3. Reduce dependencies as much as possible – specify specific connections so chunks of code aren’t largely dependable
  4. Validate your data – being able to not break down when fed “garbage” data
  5. Handle errors nicely – give a reason when an error has occurred
  6. Keep it simple – so it is easy to construct and maintain
  7. Tidy up after yourself – when an error/bug occurs fix it, don’t leave it for another time
  8. Learn new tools
  9. Maintain your flow
  10. Make your code unsurprising
  11. Don’t program by coincidence
  12. Code entopy

(source – http://www.hurricanesoftwares.com/most-important-coding-principles/)

Week 6 was specific to the idea of how loops effect codes and what can be changed so drastically through minimizing the code. Using the “for” command which related to repetitions, iterations and loops we simplified the code and made it easier to use. Using a compressed picture and showing how the “for” command works we get the following images:

Pikachu Random(count x row x 51) Pikachu background change Pikachu shade black to whiteThe only line of code that was changed was “tint” in each code.

“Tint” is a lexicon of the processing language. “Lexicon” is defined as – the vocabulary of a person, language, or branch of knowledge. Regarding Processing – processing is the language and the popular lexicons would be: size, fill, for, if, int, void, ellipse, rect, loop, float and tint.

Week 8 was about slit-scanning. This exercise was to explore the aesthetic dictated by slit-scanning. The exercise was to record a short video and insert it into the following code:

import processing.video.*;
Movie mov;
void setup() {
  size(950, 540);
  mov = new Movie(this, "/Users/kathgadd/Desktop/sample_code/bikePathed.mov");
// Display values from movie
int slitPosition = 0;
void draw() {
  if (mov.available() == true) {
    for (int j = 0; j < height; j++) {
        // copy the slit from movie into one column of screen image
        pixels[ (width * j) + slitPosition  ] =  mov.get(slitPosition, j);
    slitPosition++; // move head across one column
    if ( slitPosition == width ) { noLoop(); } // make sure we stop at the end of the image!

slit scanning 3

slit scanning codeslit scanning 2

Slit-scanning 1

By changing the parts of the code we can change the speed of the slit, when the slit occurs and even the repetition of the slit.

The artistic style of slit-scanning has been popularized by artist Daniel Crooks with his piece “Static No. 12”.

Object-orientated programming (OOP) approach is when values and statements are packaged into objects. Object-orientated approach “shifts the emphasis from passive elements acted on by statements to active elements, the object, interacting with their environment”. OOP lets you write a set of functions, then expand them in different direction without changing or copying them in any way

(source: http://www.cmi.univ-mrs.fr/~piar/REPORTS/CMI_M2_EDP_CS2.pdf)

Procedural and object orientated approachProcedural programming approach is when code is organized into small procedures that take some input, do something and then data comes out. The functions/procedures have no intrinsic relationship with the data used. Procedural program is used when needing specify the steps the program must take to reach the desired state.

(source: http://objectorientedcoldfusion.org/procedural-vs-object-oriented.html)

Algorithms – Processing Practice


Learning Processing is no easy task – unless you are force to, by it being a part of your University class, so while I continue to look at how processing uses algorithms to produce anything – let us have a look at some example of how repetition and variations are produced from processing, jumping straight into it seems to be the way to do it (well it’s the way I get told).

The following code is for a multiple random, coloured, Pikachu Picture:

//declare image object
PImage img;
// set up
void setup () {
// canvas size
size(500, 600);
// Make a new instance of a PImage by loading an image file
img = loadImage (“/Users/jb523/Desktop/Pikachu.jpg”);

void draw () {
// Draw the image to the screen at coordinate (0,0)
for (int row = 0 ; row < 5 ; row = row + 1) {
for (int count = 0 ; count < 5 ; count = count + 1) {
tint(random(255), random(255), random(255));
image(img, count*100,row*120, 100, 120);

The indication of the line that starts with ‘tint’ indicates a random colour to each individual picture as well as changing the colour rapidly – below are 3 screenshots that show the change in colour – using only the process above:

Pikachu Random(255)

Each line represents a piece of information that tells the computer what to do – the lines are broken into a command and a function. If we just change the code we can change the appearance of how we want something to look.

What if we wanted a gradual change from black to anything, going from the top left to the bottom right using colour as a transition, we would get:

Pikachu Random(count x row x 51)The only change made was in the “tint” command, instead of random colours per each picture we made the process start at black and multiple by a number to get another colour.

Continuing the change of the “tint” we can make the tint all one colour, shown:

Pikachu background change
We can even change the columns to individual colours while using grey-scale to get to white.

Pikachu shade black to whiteWhile I find Processing difficult, the creations – even if nothing useful are still interesting. This isn’t my strong point, though I enjoy doing it and exploring what processes I can explore and the things I create.