Author: claudit'sme

iPhone App___ MAGNA CARTA

DOCUMENTATION OF THE PROJECT: https://magnacartaquizzappblog.wordpress.com/

We were a group of four people:

  • Clàudia Giralt Monedero – Project Manager and First coder
  • Inayat Miah – Blogger and content creator
  • Jaymini Parmar – Second coder
  • Matthew Lean – Designer

We were given the brief of making an app that would run for real in Salysbury cathedral during an exhibition that is currently taking place, to celebrate the 800 anniversary of Magna Carta.

The app had to be interactive, fun, engaging and quite simple to use.

We decided to make a quiz game in which people had to look for shapes in the cathedral and then answer the questions. It would force the people to look at the actual place in stead of being hooked by the iPhone.

We also created a narrative that relates to democracy, since Magna Carta is the foundation of it, and we believed it would be appropriate to relate the app somehow with this concept, and not only with the cathedral. This is why the plot of the app is a competitive path between two parties who compete to get the title of party in charge.

The following blog will guide you through all the process and difficulties we have came across to create the app:

DOCUMENTATION OF THE PROJECT: https://magnacartaquizzappblog.wordpress.com/

Screenshot 2015-05-20 01.09.11 Screenshot 2015-05-20 01.00.38 Screenshot 2015-05-19 23.35.52 Screenshot 2015-05-20 01.10.00 Screenshot 2015-05-20 01.05.04

DOCUMENTATION OF THE PROJECT: https://magnacartaquizzappblog.wordpress.com/

Advertisements

INDEX FOR ITERATIVE PROJECT — “FINITE MOMENTS”

ITERATION I

– ITERATIVE DESIGN (II)_ ##1rst Round##___STAGE 1 (STUDY)
– ITERATIVE DESIGN (II)_ ##1rst Round##___STAGE 2 (SOLVE)
– ITERATIVE DESIGN (II)_ ##1st Round##___STAGE 3 (CONSTRUCTION)
– ITERATIVE DESIGN (II)_##1st Round##___ STAGE 4 (TEST IT)
– ITERATIVE DESIGN (II)_##1st Round##___ STAGE 5 (EVALUATION)

ITERATION II
– ITERATIVE DESIGN (II)_ ##2nd round##___ STAGE 2 (SOLVE)
– ITERATIVE DESIGN (II)_##2nd round##____ STAGE 3 (CONSTRUCTION)
– ITERATIVE DESIGN (II)_ ##2nd round##___STAGE 5 (EVALUATION)

ITERATION III

ITERATIVE DESIGN (II)_##3rd round##____ STAGE 2 (SOLVE)
– ITERATIVE DESIGN (II)_##3rd round##____ STAGE 3 (CONSTRUCTION)
– ITERATIVE DESIGN (II)_ ##3rd round##___STAGE 5 (EVALUATION)

ITERATION IV
– ITERATIVE DESIGN (II)_ ##4th round##___ STAGE 2 (SOLVE)__MAIN CONCEPT
– ITERATIVE DESIGN (II)_##4th round##____ STAGE 3&4 (CONSTRUCTION&TEST SEVERAL TIMES)
– ITERATIVE DESIGN (II)_##4th round##____ STAGE 5 (EVALUATION)

ITERATION V
– ITERATIVE DESIGN (II)_##5th round##____ STAGE 3&4 (CONSTRUCTION AND TRIAL)
– ITERATIVE DESIGN (II)_ ##5th round##___STAGE 5 (EVALUATION)

OTHERS
– ITERATIVE DESIGN (II) __ ###TRIALS IN THE FOYER OF WEYMOUTH HOUSE###__
– ITERATIVE DESIGN (II) ___#### FINAL PIECES & CODE ####___

ITERATIVE DESIGN (II) ___#### FINAL PIECES & CODE ####___

INDEX

ABSTRACT OF THE CONCEPT: 

Recreation of a Kaleidoscope making a camera-Kaleidoscope. And with it representing both, the finiteness found in infinity and the infinity found in finiteness.

It takes values of our finite world such as SOUND, COLOUR, BRIGHTNESS, IMAGE, AND ALSO MOMENTS. Creating a fractal-like pattern, similar to a kaleidoscope. Trying, hence, to portrait the finiteness of the moment in which the picture/video is taken, and transport it to the infinity (represented by the fractal-like patterns) in which it is found (the universe).

SOME FINAL PIECES:

jo PERLES1 perles2 ultim10081 ultim10214CINCCUATREDEUDOSNOUSETSISTRESUNAVUIT

FINAL CODE:

VOID SETUP, VOID DRAW, AND CAMERA


import processing.video.*;
Capture cam;



void setup(){
  
  cam = new Capture(this, 320, 240, 50);
  cam.start();
  background(255);
  colorMode(HSB); 
  size(640, 480);
  frameRate(4);
  smooth();
  soundSetup();
  fondoSetup();
  
}




int N=0;

void draw() {   
  
   colours();
    centre();
    soundDraw();
    tint(255,120);
    float k = getAmplitude();
  
    if (k>0.01){
      pushMatrix();
      translate(width/2, height/2);
  
    
    
    
    pushMatrix();
    scale(1, -1);
    image(cam, 0, 0); //TL--capgirada 
    scale(1,-1);
    image(cam, 0,-240); //TL--normal
      
    popMatrix();  
     pushMatrix();
   
    image(cam, 0,0); //BL--normal
    scale(1, -1);
    image(cam, 0, -240); //BL -- capgirada 
      popMatrix(); 
    
  pushMatrix();
    scale(-1,1);    
        pushMatrix();
  
    image(cam, 0,0); //BR--normal
    scale(1, -1);
    image(cam, 0, -240); //BR-- capgirada
      popMatrix(); 
         pushMatrix();
   scale(1, -1);
   image(cam, 0, 0); //TR--capgirada 
   scale(1,-1);
   image(cam, 0,-240); //TR-- normal
  
  
     popMatrix();  
popMatrix();
   
   ////SEGONES::::
   
 

    pushMatrix();
    scale(-1, 1);
    
        pushMatrix();
     image(cam, -320,0); //BR--normal
    scale(1, -1);
    image(cam, -320, -240); //BR-- capgirada
      popMatrix(); 
         pushMatrix();
     scale(1, -1);
   image(cam, -320, 0);  //TR--capgirada 

     scale(1,-1);
   image(cam, -320,-240); //TR-- normal
   
   
     popMatrix();  
    popMatrix();
    
     
           pushMatrix();
     image(cam, -320,0); //BL--normal
    scale(1, -1);
    image(cam, -320, -240); //BL -- capgirada 
   
   popMatrix(); 
   
    pushMatrix();
       scale(1, -1);
    image(cam, -320, 0); //TL--capgirada
    scale(1, -1);
    image(cam, -320,-240); //TL--normal
 
  popMatrix();  
  popMatrix(); 
  }
  
    
  }
  
 
void captureEvent(Capture c){
  c.read();
}

CENTRAL SHAPE



 int d = 100;
 int n = 50;
 int m = 50; 
 int o = 50; 
 int p = 50;
 int rot=0;

void centre(){
  
  float k = getAmplitude();
  
  if (k>0.01){
    pushMatrix();
      translate(width/2, height/2);
      rotate(rot);
      rot = rot + 1;
      drawCircle(0,0);
    popMatrix(); 
  }  
}


void drawCircle(int x, int y){
  
  int max = width;

     d=(d+20)%max;

        fill(c2[4],60);
        noStroke();
        rectMode(CENTER);
        rect(x, y, d,d);
    
    if( d >= 100){
       drawCircle2();         
    }
}


void drawCircle2(){

   int max = width; 

        n=(n+20)%max;

     if (brightness(c1[2])<=100){
        fill(c2[1],40);
        noStroke();
        ellipse(0, 0, n,n); 
    }else{
        fill(c2[2],60);
        noStroke();
        rectMode(CENTER);
        rect(0, 0, n,n); 
    }
    
     if( n >= 100){     
      drawCircle3();   
      }
  }
 
 
  
  void drawCircle3(){

   int max = width; 

        m=(m+20)%max;

 
     if (brightness(c1[3])<=100){
        fill(c2[4],60);
        noStroke();
        ellipse(0, 0, m,m); 
    }else{
        fill(c2[0],40);
        noStroke();
        rectMode(CENTER);
        rect(0, 0, m,m); 
    }
    
    
      if( m >= 100){     
      drawCircle4();    
    }

  }
  
  
    void drawCircle4(){

     int max = width; 
      o=(o+20)%max;

 
     if (brightness(c1[0])<=100){
        fill(c2[1],60);
        noStroke();
        ellipse(0, 0, o,o); 
    }else{
        fill(c2[3],40);
        noStroke();
       rectMode(CENTER);
        rect(0, 0, o,o); 
    }
    
    
      if( m >= 100){
      
        drawCircle5();
    
    }

  }
  
  
  
  
      void drawCircle5(){

   int max = width; 

        p=(p+20)%max;

 
     if (brightness(c1[2])<=100){
        fill(c2[0],40);
        noStroke();
        ellipse(0, 0, p,p); 
    }else{
        fill(c2[2],60);
        noStroke();
        rectMode(CENTER);
        rect(0, 0, p,p); 
    }
    

  }

COLOUR


 color[] c1 = new color[5];
 color[] c2 = new color[5];


void colours(){
   
   c1[0] = cam.get(int(random(width/2)),int(random(height/2)));
   c1[1] = cam.get(int(random(width/2)),int(random(height/2)));
   c1[2] = cam.get(int(random(width/2)),int(random(height/2)));
   c1[3] = cam.get(int(random(width/2)),int(random(height/2)));
   c1[4] = #FFFFFF;
   
  
    c2[0] = cam.get(10,15);
    c2[1] = cam.get(250,100);
    c2[2] = cam.get(60,200);
    c2[3] = cam.get(300,160);
    c2[4] = cam.get(160,120);



}


SOUND LINES, CIRCLE AND SET UP

import ddf.minim.*;

Minim minim;
AudioPlayer player;


void soundSetup(){
    minim = new Minim(this);
    player = minim.loadFile("infinity.mp3");
    player.play();
}




void soundDraw(){
  float k = getAmplitude();

    
 
  for(int i = 0; i < in.bufferSize() - 1; i++){  
    
    float x1 = map( i, 0, in.bufferSize(), 0, width );
    float x2 = map( i+1, 0, in.bufferSize(), 0, width );

if(k>0.08){
    fill(c1[4]);
    noStroke();
    ellipseMode(CENTER);
    ellipse(width/2, height/2, 150 + in.right.get(i)*50,150 + in.right.get(i+1)*1000);
    fill(c2[4]); //(map(c,0,255,0,1),50,50,100)
    strokeWeight(2);
    noStroke();
    ellipse(width/2, height/2, 50 + in.right.get(i)*1000,50 + in.right.get(i+1)*1000);
}
if(k>0.01){
    noFill();

    stroke(c2[4]);
    strokeWeight(1);

    line( x1, 450 + in.left.get(i)*1000, x2, 450 + in.left.get(i+1)*1000 );
}


  }

}

    float getAmplitude(){
  
  float n = 0;                                    
  for(int i=0; i < in.bufferSize() - 1; i+=10){   
    //println(in.mix.get(i));  
    n += abs(in.mix.get(i));                      
  }
    println(n/10,"val");

  return n/10;                                  
}


INDEX

ITERATIVE DESIGN (II)_ ##5th round##___STAGE 5 (EVALUATION)

INDEX

The process has been finished and the goals achieved. Now I have a cool artefact to make kalidoscopical pictures.

I find iterative design extremely useful and tidy. It is a really good technique to make whatever you are doing more precise. At the beginning the changes I was making in each iteration were quite important and decisive, whereas when the piece was almost completed, the changes were more perfectionist and tiny.

INDEX

ITERATIVE DESIGN (II)_##4th round##____ STAGE 5 (EVALUATION)

INDEX

Next and probably the last things to change to make it look more kaleidoscopical::

1- Fuse four images in each quadrant. The same twice but flipped horizontally and vertically.

2- Image opacity. Do different trials with different opacities and see which is the best for the final result.

3- Do different trials with the angle of rotation and see what fits the best with a kaleidoscopic-like outcome.

4- Take into account the amplitude of sound in each place I test it and change the sensibility according to it.

INDEX