Learning Processing #3 – Image Processing

This week’s Processing workshop covered using images and processing them into pixels.

PImage img1;
PImage img2;
PImage img3;
PImage img4;

void setup(){
  img1 = loadImage("goat1.jpg");
  img2 = loadImage("goat2.jpg");
  img3 = loadImage("goat3.jpg");
  img4 = loadImage("goat4.jpg");
  size(img3.width,img3.height);
  background(800,600);
}

int n=5;
int loc;

void draw(){
  img3.loadPixels();
    for (int y=0; y<height; y=y+n){
      for (int x=0; x<width; x=x+n){
       loc= x + (y*width);
       noStroke();
       fill(img3.pixels[loc]);
      rect(x+random(-5,5),y+random(-5,5),n*0.8,n*0.8);
      }
    }
    imageChanger();
    if (mousePressed && mouseButton==RIGHT || keyPressed){
    doSomeText();
    } else {}
}

void imageChanger(){
  if (mousePressed && mouseButton==LEFT || keyPressed) {
    img3 = loadImage("goat3.jpg");
  }else{ img3=loadImage("goat2.jpg");
}
}

void doSomeText(){
  textSize(35);
 fill(255,0,0);
 text("I'm a goat",150,150);
}

Above is the code used. Several images are loaded at the start of the sketch using the PImage function, and are defined as “img1-4” for later use. In the draw section, from lines 19-26, the loaded image is processed into a mosaic. This is done with “loadPixels”, and a couple of nested for loops. These function like in the earlier workshop, creating a grid of rectangles, however in this case the fill is taken from img3.pixels[loc], which locates a pixel and takes its color value – putting it in the fill. The grid of rectangles are then made sized up so they aren’t 1px wide and high, creating the mosaic effect. Another simple effect is the use of random values in the x and y coordinates for each rectangle, giving them +random(5,-5) to both x and y makes them move around randomly from frame to frame, within a boundary of 5 pixels either way (the size of the rectangles).

A couple of functions are then used for interaction – void imageChanger (lines 34-38) is a function that changes the picture that is loaded to a different one when the mouse is pressed. The rectangles are then drawn again, giving a similar effect to previously but with a different picture.

These are simple ways to load images into processing and then turn their pixel values into usable integers, which could prove useful for creating visual effects based on images in the future.

Requirements Gathering & Analysis – The Space

Our group has now displayed our finalized posters in the foyer to study the space and how the audience reacts to visual media within it.

The foyer is shown below in thumbnail images:

IMAG0012   IMAG0010   IMAG0009   IMAG0008

Our poster was displayed on the way in, directly in front of the audience as they enter the space:20141016_121420

Studying the behavior of people in the space and their reaction to our visual media proved useful. Students and lecturers simply passing through would often not pay much attention to the media in the area, however people who were for example, having coffee or discussing group work on the tables and sofa’s in the space would take the time to notice and examine media in the area in greater detail – especially if they were nearer it.  The time of day also has a notable effect on the business of the area, with more people passing through on their way to lectures or seminars generally on the hour, while the rest of the time the area is less populated but people tend to stay in the vicinity longer.

Our final project will be displayed on HD television screens in the foyer shown in the earlier images, being animated and readily apparent to anyone passing through or staying in the area. This should make involving and engaging the users easier when displaying our final projects, so I now have a good idea of how many people will be interested in my final work and will likely involve themselves in the testing process.

Requirements Gathering – Finalized Poster Design

After receiving feedback on our initial poster designs from our peers, our group has finalized the poster’s design and displayed it in the foyer of Weymouth house, the space where our final projects will be.

We have radically changed the poster in this iteration after one session of redesigning it. The color scheme was kept similar to remain eye-catching and relevant to Dorset, and we decided to keep the slogan “an independent Dorset is a better Dorset” due to its simplicity while still conveying the overall idea behind the fictional campaign we are promoting.10733682_10153261362689502_119376921_nThe text design in the bottom left took inspiration from the Bauhaus movement, while the rest of the poster was based on what is perceived as iconic about Dorset – in the background is the Cern giant, the farmer in the center emphasizes agriculture and the flag of Dorset is also prominent. The result is an overwhelmingly nationalistic approach to this campaign, an approach we took due to our inspirations in other posters from Nazi propaganda to the Scottish independence campaign, examples of these shown below:

329306169
Nazi propaganda poster showing Bauhaus designs and emphasis on Nationalism
brave_ciaran-murphy2
Scottish independence poster showing emphasis on a single figure and “Yes” slogan

 

 

 

 

 

 

 

 

 

As you can see, our finalized poster draws heavily from these similar campaigns but has been adapted to a different context. Our campaign is fictional the audience will not have prior awareness of the idea of an independent Dorset, which should be advantageous to drawing people’s attention. The Bauhaus themes and propaganda style were taken to a comical extreme, such as the chicken and the Dorset armband, which could create a sense of pride if the campaign were real, as the media space is based in Dorset, and by extension the audience are also.

Learning Processing #2 – Functions and Arrays

This week’s workshop covered using functions and arrays in processing.

color[] p ={ #eb5050, #E67012, #FCAC22, #AA5903 };
void setup(){
  size(800,400);
  background(0);
}

int r=0;

void draw(){
  fill(0,3);
  rect(0,0,width,height);
  translate(width/2,height/2);
  rotate(r);
  stroke(255);
  noFill();
  for(int i=0; i<width; i=i+35){
    house(mouseX,20,p[int(random(p.length))]);
  };
  r=r+1;
}

void house(int x, int y, color c){
  fill(c);
  stroke(255);
  triangle(x+15,y,x,y+15,x+30,y+15);
  rect(x,y+15,30,30);
  rect(x+12,y+30,10,15);
}

The above code contains an array of colors called “p” at the top, which is referenced later at line 17 to draw a random color from the array. A function called “house” is then defined at the end of the sketch, which draws a small 2d house made up of rectangles and a triangle at set coordinates. The use of a for loop on line 16 repeats this function, and combined with rotate(r) and r=r+1, creates a circle of these houses looping around the center of the screen based on the coordinates provided as more houses are drawn in each frame which rotate around by 1 each frame.

The width of the circle of houses is determined by the mouse's horizontal position.
The width of the circle of houses is determined by the mouse’s horizontal position.

Functions and arrays are ways to repeat code without having to rewrite it each time – an array of colors to be used can be referenced multiple times in one sketch, and a function can be called several times as well. These are ways to cut down on file sizes and make code cleaner and easier to read.

Requirements Gathering – Practice-led Research

In order to examine the relationship between visual media in the space and the behavior of its audience, we are designing a poster to find out how audiences react to visual media that they encounter. This lacks the interactivity that my final piece will have, but before diving in to fully developing iterations it is important to gather a basic set of requirements at first – we need to understand how users interact with visual media in the space before anything else. Design work for clients will always have set requirements, however it is also important to make sure the work produced engages the audience and draws their attention in, as visual media in a public space could be used for advertisement, public information, etc.

As such, creating this poster is a form of practice-led design research. “Design research, when it occurs through the practice of design itself, is a way to ask larger questions beyond the limited scope of a particular design problem. When design research is integrated into the design process, new and unexpected questions emerge directly from the act of design.” (Zimmerman 2013). Through designing a media artefact and placing it in public space, more can be discovered and observed than by examining the space and audience alone.

Some of our group’s initial rough designs are attached below, with an emphasis on being eye-catching and promoting the idea of Dorset as an independent state.

10719085_10202630722360482_454262508_n 1558935_770365496338478_169839881_o

References

Zimmerman, E., 2013. Play as Research: The Iterative Design Process [online]. Available from: http://www.ericzimmerman.com/texts/Iterative_Design.html

Learning Processing #1 – Basics

Having recently been introduced to Processing, the platform we will use to create our interactive data visualization, one of the first workshops has covered basics such as color modes, “if” conditions, and use of mouse input.

void setup() {
 colorMode(HSB);
 background(255,0,111);
 size (1280,720);
 frameRate(120);
 smooth();
}

int c =20;
int d =1;

void draw() {
 noStroke();

  if(mousePressed){
   if(mouseButton==LEFT){
     fill(d,155,255);
     ellipse(mouseX,mouseY,c,c);
   } else {save("myooutput.tiff");}
  }
  c = (c+1)%40;
  d = (d+1)%255;
}

The code above creates a blank grey canvas in the setup (lines 1-7), and then sets mouse input – pressing the  left mouse button will create a trail of color like a paintbrush, which grows in size then shrinks. The colors change gradually as the button is held down, achieved through the java in lines 21&22, which increases the value of c (size) and d (fill color) by 1 in each frame.

The output of the above code, after moving the mouse in that pattern.
The output of the above code, after moving the mouse in that pattern.

This is an extremely simple sketch yet still creates a nice looking paintbrush effect as the color blends over time.

The second sketch done today to demonstrate Processing covered “for” loops, an important tool for generating visual effects in Processing.

void setup() {
  size(800,400);
  frameRate(2);
  colorMode(HSB,100);
}
int s = 20;
int h = 0;

void draw(){
  for(int y = 0; y<height; y=y+s){
    for(int x = 0; x<width; x=x+s){
      fill(h,100,100);
      rect(x,y,s,s);
    }
    h=(h+s)%100;
  }
}

The code shown above generates a grid of squares in multiple colors. This is achieved by creating another square every frame, until the integers “y” or “x” reach the width or height of the screen, so the squares are only generated on the screen. “y” and “x” are increased by “s”, the size of the squares, each time so that there is no overlap – the next generated square is moved far enough along. Using for loops will likely prove useful in repetitive effects rather than writing multiple lines of code to draw the same thing.

A grid generated by the for loop.
A grid generated by the for loop.

Iterative Design Processes

The focus of Design Iterations is to explore and use iterative approaches to design. This means instead of a traditional approach to design and problem solving – identifying requirements, developing a single solution and implementing it in that order, we take a more cyclic approach, analyzing the solutions designed and how they work in relation to the designer’s end goal, then revising and redesigning to create a new “iteration” of a piece of design. Through this process, designers can learn more about the requirements and what will be needed in their solution through the process of designing itself.

One example of an iterative approach to design and development is the Agile approach. Whereas a traditional “waterfall” approach to a project goes through individual stages of design never to return, taking an iterative approach revisits each stage of development in a cycle as different iterations of the product are realized. Through designing and developing solutions, designers can discover additional problems and solutions that may be more effective than if they kept to a single development cycle.

Agile development cycles through iterations.
Agile development cycles through iterations.

Another illustrated iterative approach is “scrum”, intended as a framework for management of project development (using iterations):

Cyclic development
Cyclic development

This example approach also demonstrates the repetition in iterative design, that the process of redesigning and identifying any new problems should be repeated until the product is of a desirable standard for the designer and client.

These are rather specific methods of iterative design, which will be taken into account in my approach to the upcoming unit. My work will likely go through several versions and redesigns before being finally deployed in the public space where it will be displayed.

References

Archer, J., Forty, Agile Design: what we’ve learned [online]. Available from: http://forty.co/agile-design-what-weve-learned

James, M., Scrum Reference Card [online]. Available from: http://scrumreferencecard.com/scrum-reference-card/