Playing with code

Learning code is really useful. Lots of employers are looking for people who can code their own websites and so learning basic skills is a very important thing. With this in mind, I have been asked to create some designs using an app called Processing. The Processing software is used by thousands of visual designers, artists, and architects to create their works.

Projects created with Processing have been featured at the Museum of Modern Art in New York, the Victoria and Albert Museum in London, the Centre Georges Pompidou in Paris, and many other prominent venues. Processing is used to create projected stage designs for dance and music performances; to generate images for music videos and film; to export images for posters, magazines, and books; and to create interactive installations in galleries, in museums, and on the street.

Some prominent projects include the House of Cards video for Radiohead, the MIT Media Lab’s generative logo, and the Chronograph projected software mural for the Frank Gehry-designed New World Center in Miami. But the most important thing about Processing and culture is not high-profile results – it’s how the software has engaged a new generation of visual artists to consider programming as an essential part of their creative practice.

void setup() {
  size(1920, 1080);
}

void draw() {
  if (mousePressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

This program creates a window that is 1920 pixels wide and 1080 pixels high, and then starts drawing white circles at the position of the mouse. When a mouse button is pressed, the circle color changes to black.

Interactive programs are drawn as a series of frames, which you can create by adding functions titled setup() and draw() as shown in the code below. The setup() block runs once, and the draw() block runs repeatedly. Because the background() function is used only once, the screen will fill with lines as the mouse is moved.

void setup() {
 size(1920, 1080);
 stroke(255);
 background(192, 64, 0);
 }

void draw() {
 line(150, 25, mouseX, mouseY);
 }

The Processing variables mouseX and mouseY (note the capital X and Y) store the x-coordinate and y-coordinate of the cursor relative to the origin in the upper-left corner of the display window. When a program starts, the mouseX and mouseY values are 0. If the cursor moves into the display window, the values are set to the current position of the cursor. The mouse position is most commonly used to control the location of visual elements on screen.

void setup() {
 size(1920, 1080);
}

void draw() {
 background(204);
 if (mousePressed == true) {
 cursor(HAND); // Draw cursor as hand
 } else {
 cursor(CROSS);
 }
 line(mouseX, 0, mouseX, height);
 line(0, mouseY, width, mouseY);
}

The pmouseX and pmouseY variables store the cursor coordinates from the previous frame, but there is no built-in way to access the cursor values from earlier frames. At every frame, the mouseX, mouseY, pmouseX, and pmouseY variables are replaced with new numbers and their previous numbers are discarded. Creating an array is the easiest way to store the history of these values.

int num = 50;
int[] x = new int[num];
int[] y = new int[num];

void setup() { 
 size(1920, 1080);
 noStroke();
 fill(255, 102);
}

void draw() {
 background(0);
 // Shift the values to the right
 for (int i = num-1; i > 0; i--) {
 x[i] = x[i-1];
 y[i] = y[i-1];
 }
 
 x[0] = mouseX;
 y[0] = mouseY;
 // Draw the circles
 for (int i = 0; i < num; i++) {
 ellipse(x[i], y[i], i/2.0, i/2.0);
 }
}


		
Follow:
Share:

Leave a Reply

Your email address will not be published.