Nina Grillo LSI

[nigrillo]

You Should Be Dancing

Para o projeto final da unidade curricular de LSI foi-nos proposta a concepção de um projeto inspirado pelos conteúdos abordados nas aulas. Neste sentido decidi criar uma aplicação/ programa que explorasse uma vertente interativa conjugando som e imagem. Para a realização deste projeto desenhei, então, cinco personagens que deveriam reagir ao som ao vivo, estabelecendo assim uma relação interativa com o utilizador. Ao ser iniciado, o programa/aplicação apresenta uma primeira personagem, cuja boca reage ao som vindo do microfone. De acordo com o volume deste som a boca varia de dimensão, criando assim uma ilusão de que a personagem está a ‘falar’. Através dos botões numéricos de 1 a 4 o utilizador pode ainda adicionar o restante das personagens, uma a uma, ao cenário. Cada personagem reage ao som à sua maneira e, nesta primeira fase, fica então ao critério do utilizador a maneira como interage elas, podendo ser através da voz, da reprodução de música ou até mesmo por meio de sons ambiente. Embaixo da personagem principal encontra-se ainda um botão, que pode ativar ou desativar o ‘DISCO MODE’, que constitui a segunda parte da aplicação. Quando acionado, altera-se tanto o cenário onde as personagem estão inseridas, como o seu comportamento. A emblemática ‘You Should be Dancing’ dos Bee Gees começa a tocar, luzes são ativadas, brilhos aparecem e as personagens agora ‘cantam’ e ‘dançam’ ao som da música que toca numa espécie de discoteca. Para finalizar, ao carregar no botão uma segunda vez, o ‘DISCO MODE’ pode ser desativado, transportando as personagens de volta ao cenário neutro. A principal ferramenta utilizada no desenvolvimento deste projeto foi o Processing 3. Outro elemento crucial no processo de criação foi o uso da biblioteca Minim, que permitiu a captação do som vindo do microfone e tornou possível a interação som/imagem presente no meu projeto.

Principais referências: Chrome Music Lab (https://musiclab.chromeexperiments.com) Incredibox (http://www.incredibox.com) C2C Concert Visuals (https://www.youtube.com/watch?v=RyV2d-Svffk)

Softwares utilizados: Adobe Illustrator CS6, Processing 3

Nina Grillo (Rio de Janeiro, 1996). Viveu grande parte da vida no Rio de Janeiro, Brasil, mas, hoje em dia, está no Porto já há quatro anos. Atualmente é estudante de Design de Comunicação na Faculdade de Belas Artes da Universidade do Porto.  

Links Nina Grillo/ LSI (http://nigrillo.tumblr.com) Código fonte (http://www.openprocessing.org/sketch/374327)

[nigrillo]

*projeto final*

- vídeo exemplo de utilização da aplicação final -

o código fonte desta aplicação pode ser encontrado aqui: http://www.openprocessing.org/sketch/374327

--

[nigrillo]

*projeto final*

as diferentes personagens nos dois diferentes cenários: neutro e disco mode

[nigrillo]

*projeto final*

as cinco personagens já finalizadas

[nigrillo]

*projeto final*

concepção da personagem principal

[nigrillo]

Audio and beat reaction No. 2 | Processing

[nigrillo]

Sound Reaction | Processing

[lightprocesses]

Civilization. Coded in Processing. 127 frames. _Related: Abstract Creatures, Explosion.

[nigrillo]

Processing Program #2

‘pink explosion’

For Program #2 I decided to continue to work with the pink dots. This time I wanted them to move for themselves, randomly, without any intervention of the user. The program starts with an explosion of 30 different circles with randomly picked sizes from 0 to 30. After the explosion each dot moves in a random direction towards the edges of the frame with a random speed. As soon as a circle touches the edge, it bounces back in the opposite direction. This action runs infinitely because the speed of the moving dots is constant.

check it out at:   http://www.openprocessing.org/sketch/361338

float myFloat  = 100;

/Circle [] circles = new Circle [30];

//Circle myCircle = new Circle (50,50,10); //Circle myCircle2 = new Circle (150,150,20); //Circle myCircle3 = new Circle (250,250,30);

 void setup () {

   size (500,500);    smooth ();    noStroke(); //no outline

   for (int i=0; i<circles.length; i++) {      circles[i] = new Circle (250,250,random(30));     }

 //  myCircle2.x = 300;   //  myCircle3.x = 400;

}

 void draw () {

   background (#FFF97E);

   for (int i=0; i<circles.length;i++) {

   circles[i].checkCollisions ();

   circles[i].update ();

   //call function that belongs to circle

   circles[i].drawCircle();    }

}  class Circle {

    float x;     float y;

    float xspeed;     float yspeed;

    float circleSize;

    Circle (float  xpos, float ypos, float cSize) {

      x = xpos;       y = ypos;       circleSize = cSize;

      xspeed = random (-10,10);        yspeed = random (-10,10); 

    }

    void update () { //update function as another class to the circle       x += xspeed;       y += yspeed;

    }

    void checkCollisions () {        if ( (x<0) || (x>width)) {         xspeed = -xspeed;          }

     if ( (y<0)  || (y>height)) {         yspeed = -yspeed;      }     }

 void drawCircle () {

   fill (#F5B2E1);    ellipse (x,y,circleSize,circleSize);  }

}

[nigrillo]

Processing Program #1 

‘starting slowly’

I started up this exercise choosing a simple object to work with: a dot. My goal was to get to know a little bit more of processing and how to make interactive programes with it. I tried to link the mouse click to the action of creating dots on a canvas. Whenever a user presses the mouse a dot is created on that spot.

try it at:  http://www.openprocessing.org/sketch/361329

void setup() {

 size(500, 500);  background(#FFF97E); }

void draw() { }

void mousePressed() {  stroke(#F5B2E1);  fill(#F5B2E1);  ellipseMode(CENTER);  ellipse(mouseX, mouseY, 30, 30); }

[amseastan]

[low-sugar-eye-candy]

RGB is the new BLACK III

[trcreativecoding]

Composition #098 

First steps in working with ArrayLists and PVector

[nigrillo]

* processing references * exercise #3

[nigrillo]

‘Conditional Design’

Design ‘recipe’ #3 - CHILDISH DREAMS

Initial setup:

Play with 6 players or more

Each player as a coloured dot 

Fill up the sheet of paper with the exact amount of each dot and spread them around randomly

The goal:

Decorate the dots.

Rules:

Each colour stand also for a type of decoration. Each player should choose what type of decoration his/her colour will stand for (spiral, circle, wavy lines, etc)

The players should in turn decorate de dots

The players should never decorate a dot with the same colour

The players should never the same decoration on two equal dots (dots with the same colour)

[nigrillo]

‘Conditional Design’

Design ‘recipe’ #2 - LINKS & CAPSULES

Initial setup:

Play with 4 players

Each player as a coloured ‘capsule’ (red, pink, orange and bordeaux)

Orange stands for a capsule with vertical orientation; pink and red stand each for a capsule with 45º inclination in each direction; bordeaux stands for an horizontal capsule

Fill up the sheet of paper with an equilibrate amount of each type of capsule and spread them around like confetti

The goal:

Start up with the nearest capsule to one of the corners of the sheet. Your goal is to, in turns, connect all the capsules, returning, at the end to the capsule you started your links with, completing a cycle.

Rules:

Each colour stand also for a type of link: orange represents a zig-zag link; pink stands for a free-hand wavy link; red is a strait line link; and finally bordeaux stand for an arc

One should not link two equal capsules or connect a capsule with a link of the same colour

You should never intersect another capsule while linking two capsules

You should not intersect more than 4 links while connecting two capsules

You should never intersect two links of the same colour

note: the colours and types of links/capsules mentioned above are only suggestions. You can use different colours and create new types of links/ capsules as long as the rules are followed and the goal remains the same!

[nigrillo]

‘Conditional Design’

Design ‘recipe’ #1 - CONQUERING

Initial setup:

Play with a minimum of 3 players (the more, the better)

Each player as a coloured pen

Scrunch up the sheet of paper that is going to be used

Each player choses an intersection of wrinkles to place a dot on

Task to be performed every turn by each player:

Use your dot as a starting point to follow a wrinkle of the paper. Your goal is to find a way from your dot to the edge of the sheet.

Rules:

If you enclose an area intersecting your own line colour, you should fill the shape with the colour you are using.

If you enclose an area intersecting another line colour, you should fill the shape using small dots with your colour.

If trying to get from your dot to the edge of the sheet you find a dead end, you should make a small cross to signal where your line stopped.

Each player should stop playing when there is no possible way left from their initial dot to the edge of the sheet.

The drawing is finished when every player has stopped playing.

[nigrillo]

Umbrella (Orange): With Figure and Ball (Blue, Green) - John Baldessari 

phases of destruction - databending using textedit and audacity