Processing: Developing Ideas

Processing: Developing Ideas

Design Specifications:

It should be random in a limit.
There should be colour.
It should have interactivity.
It is for when people get bored, they can play a bit with it.
It should evoke feelings.
It should be created using processing.
There should be instructions.

Design Ideas:

1st Idea:

As said in the image: Circles of different sizes and colour (specific sets) will come out if you click, and they just pop out from wherever the curser is. They will eventually go smaller while going in different directions, until they eventually get very tiny and disappear. The same circle will not change its colour as it gets smaller, but there are different colour of circles. There will be instructions included at the start. And one extra idea is that it can be like this: http://www.openprocessing.org/sketch/143842 and the circles from big to small will be shown. There will be four colour sets that are similar to the image above, and a random one which have colours that are totally random as the one in the link. The colours are chosen representing these: green = fresh leaves; orange, red, yellow = sun; brown, red, orange, yellow = fallen or falling leaves; light purple, light blue = snow, purple sky, light sky, purple winter flowers.

2nd Idea:

This idea is from this piece of art: http://www.openprocessing.org/sketch/74380 However, it uses triangles that come out from small to big from its centre (of the triangle) at anywhere. They will come out in different speeds. The background is white and the triangles can change a different set of seasons-colours by pressing different keys.

3rd Idea:

This is like the first idea, but the circles start really small and are always greyish white so they look silver and seem like dusts / glitters. The circles will also get darker, as silver is kind of grey but with reflections of darker and lighter parts. The background colour is the only change, and should be darker than the first idea as these dusts are light in colour, so the contrast is obvious.  There will also be instructions in the beginning.

Chosen Design:

I chose the first design because I like how the circles will be going from big to small, like bubbles vanishing. I think both the 1st and the 3rd one is good for doodling when bored (the 2nd doesn't have much interaction). But the glitter limits the change of the circles and would not allow the background colours to be too bright, and I like the background colour to be bright.

Code Snippet 1 (from http://www.openprocessing.org/sketch/143842):

void draw() { if (onPressed) {

for (int i=0;i<10;i++) {

Particle newP = new Particle(mouseX, mouseY, i+pts.size(), i+pts.size());

pts.add(newP);

}

}

for (int i=0; i<pts.size(); i++) {

Particle p = pts.get(i);

p.update();

p.display();

}

for (int i=pts.size()-1; i>-1; i--) {

Particle p = pts.get(i);

if (p.dead) {

pts.remove(i);

}

}

}

The above is the most important part for the function of having the circles float in different directions and getting smaller. It creates a new particle (the object) continuously next to the previous one and also allow the new particles to get smaller or bigger or stay the same.

Code Snippet 2 (from http://funprogramming.org/40-The-candy-space-Understanding-noise-with-2-and-3-parameters.html):

float z = 0;

void setup() {
  size(400, 200);
  noStroke();
  colorMode(HSB); // hue saturation brightness
}
void draw() {
  float x = 0;
  while (x < width) {

    float y = 0;
    while(y < height) {
      float co = 255 * noise(x/500, y/500, z);
      fill(co, 255, 255);
      ellipse(20 + x, 20 + y, 60, 60);
      y = y + 40;
    }  
 
    x = x + 40;
  }

  z = z + 0.02;
}

This will be applied to the random colour part. This uses noise which allow colours to be slowly changing.

Code Snippet 3 (http://funprogramming.org/48-Load-and-animate-an-image-of-Rick.html)

/* @pjs preload="data/mummo.jpg"; */

float x;

PImage photo;

void setup() {

  size(400, 300);

  x = width;

  photo = loadImage("data/mummo.jpg");

}

void draw() {

  background(0);

  image(photo, x, 0);

  if(x > 0) {

    x = x - 1;

  }

}
This code is for importing a photo which I want to use as a background for my instructions.

Planning Drawings:

This is the instructions part for the start. There will be four images of different seasons, the instructions will be in the centre with a white fill.

There isn't much to draw. All it is after the instructions is that when you click, these circles come out from the spot of the curser in a specific range of colour and float randomly while getting smaller and smaller until it disappears. The colours picked are on the left but the scanned colours are a little dimmer.