bloody sonia input

Stopped by my knowledges in programming, I couldn't reach the precise effect I wanted: the curves of the lines designed accordind to the sound input. So I decided to explore the noise function (at least, failing that sound input), supposed to produce a more natual motion: I found it quite interesting, especially conjugated to the curveVertex.The effort was more on the aesthetic than on the reactibility. Presentation today: unanimously, the class found the sound input much more interesting. Try again!!

CODE wih noise function presented today, to be compared with the previous one:

void setup(){
size(1200,700);
framerate(5);

}

void draw(){

background(20);

poulpe();
noStroke();
}
void poulpe(){
strokeWeight(0.75);
smooth();
for ( int i = 0; i < 10; i++){


beginShape(LINE_STRIP);
stroke(200);
curveTightness(-2);
curveVertex(0, noise(200));
curveVertex(0, noise(200));
curveVertex(500 , 150);
curveVertex(500 , 250);
curveVertex(1400 , random(250));
curveVertex(1400, noise(250));
endShape();


beginShape(LINE_STRIP);
curveTightness(-1.3);
curveVertex(0, noise(280,400));
curveVertex(0, noise(280,400) );
curveVertex(600, 320);
curveVertex(600, 380);
curveVertex(1200, random(280,490));
curveVertex(1200, noise(280,490));
endShape();

beginShape(LINE_STRIP);
curveTightness(-2.5);
curveVertex(0, noise(430,650));
curveVertex(0, noise(430,650));
curveVertex(300, 450);
curveVertex(300 , 450);
curveVertex(1200 , random(430,600));
curveVertex(1200 , noise(430,600));
endShape();
}

}

I think I reached the effect I wanted to create. Asking for some advices to enhance it, to many people the sound input isn't obvious. I it a good thing? I don't yet, I 've been watching it too long. Being able to stick ones look on its pattern is a good starting point for a screen saver.

// LiveInput example for Processing V90
// Description: Shows FFT spectrum and volume level for the active sound-input on your mahcine.
// For PC: use the 'Sounds & Audio Devices' menu in the control panel to choose your input; Mic, wave, etc.
// For Mac: the current microphone device will be used as input.
// By: Amit Pitaru, July 16th 2005

import pitaru.sonia_v2_9.*; // automcatically added when importing the library from the processing menu.
float x= 0;

void setup(){
size(1200,700);
Sonia.start(this); // Start Sonia engine.
LiveInput.start(256); // Start LiveInput and return 256 FFT frequency bands.
framerate(10);

}

void draw(){


background(20);
// getMeterLevel(); // Show meter-level reading for Left/Right channels.
getSpectrum(); // Show FFT reading

}

void getSpectrum(){
strokeWeight(0.5);
// populate the spectrum array with FFT values.
LiveInput.getSpectrum();
// draw a bar for each of the elements in the spectrum array.
// Note - the current FFT math is done in Java and is very raw. expect optimized alternative soon.
for ( int i = 25; i < 40; i++){
x= x+ 0.05;
smooth();
stroke(255);
beginShape(LINE_STRIP);
curveVertex(0+sin(x), 100 - ( LiveInput.spectrum[i])-sin(x));
curveVertex(0+sin(x), 50 - ( LiveInput.spectrum[i])-sin(x));
curveVertex(1200+sin(x), 150 - ( LiveInput.spectrum[i])-sin(x));
curveVertex(1200+sin(x), 150 - ( LiveInput.spectrum[i])-sin(x) );
endShape();

beginShape(LINE_STRIP);
stroke(100);
curveTightness(-2);
curveVertex(0, 250 +( LiveInput.spectrum[i]));
curveVertex(0, 250 +( LiveInput.spectrum[i]));
curveVertex(600 + (LiveInput.spectrum[i]+8*sin(x)), 150 + 0.5*( LiveInput.spectrum[i])+sin(x));
curveVertex(600 + (LiveInput.spectrum[i]+8*sin(x)), 250 + 0.5*( LiveInput.spectrum[i])+sin(x));
curveVertex(1400 + (LiveInput.spectrum[i]), 250 + 0.5*( LiveInput.spectrum[i])+sin(x));
curveVertex(1400 + (LiveInput.spectrum[i]), 250 + 0.5*( LiveInput.spectrum[i])+sin(x));
endShape();

beginShape(LINE_STRIP);
curveTightness(-1.3);
curveVertex(0, 400 - (LiveInput.spectrum[i]));
curveVertex(0, 400 - (LiveInput.spectrum[i]));
curveVertex(800 + (LiveInput.spectrum[i]+8*cos(x)), 350);
curveVertex(800 + (LiveInput.spectrum[i]+8*cos(x)), 400);
curveVertex(1200, 450 + 0.5*( LiveInput.spectrum[i])+cos(x));
curveVertex(1200, 450 + 0.5*( LiveInput.spectrum[i])+cos(x));
endShape();

beginShape(LINE_STRIP);
curveTightness(-3);
curveVertex(0, 520 + ( LiveInput.spectrum[i]));
curveVertex(0, 520 + ( LiveInput.spectrum[i]));
curveVertex(400 + (LiveInput.spectrum[i]+10*sin(x+1)), 440);
curveVertex(400 + (LiveInput.spectrum[i]+10*sin(x+1)), 590);
curveVertex(1210 + (LiveInput.spectrum[i]+10*sin(x+1)), 540);
curveVertex(1210 + (LiveInput.spectrum[i]), 330);
endShape();
}

}

// Safely close the sound engine upon Browser shutdown.
public void stop(){
Sonia.stop();
super.stop();
}

work in progress

I am working on a screen saver reacting to the ambiant sound input. Thanks to the sonia library I will be able to fulfill my wishes expressed in the first post of this blog.

import pitaru.sonia_v2_9.*; // automcatically added when importing the library from the processing menu.

void setup(){
size(800,400);
Sonia.start(this); // Start Sonia engine.
LiveInput.start(256); // Start LiveInput and return 256 FFT frequency bands.
framerate(15);
}

void draw(){

background(30,0,30);
// getMeterLevel(); // Show meter-level reading for Left/Right channels.
getSpectrum(); // Show FFT reading

}

void getSpectrum(){
strokeWeight(3);
stroke(50);
// populate the spectrum array with FFT values.
LiveInput.getSpectrum();
// draw a bar for each of the elements in the spectrum array.
// Note - the current FFT math is done in Java and is very raw. expect optimized alternative soon.
for ( int i = 0; i < 25; i++){
fill(10*i,10);
rectMode(CENTER);
rect(i*50, 3*height/4, i*20, height/2 - LiveInput.spectrum[i]/10);
rect(-i*50+850+random(30), height/4, i*20, height/2 - LiveInput.spectrum[i]/10);
}
/* rect(0,height,20,-LiveInput.spectrum[1]/10);*/
}

void getMeterLevel(){
// get Peak level for each channel (0 -> Left , 1 -> Right)
// Value Range: float from 0.0 to 1.0
// Note: use inputMeter.getLevel() to combine both channels (L+R) into one value.
float meterDataLeft = LiveInput.getLevel();
float meterDataRight = LiveInput.getLevel();

// draw a volume-meter for each channel.
fill(100,100,0);
float left = meterDataLeft*height;
float right = meterDataRight*height;
rect(width/2 - 100, height, 100 , left*-1);
rect(width/2 , height, 100, right*-1);
}

// Safely close the sound engine upon Browser shutdown.
public void stop(){
Sonia.stop();
super.stop();
}

Reading summary:

The titles don't lie it: these are the basics. If one day you have some doubt concerning the choice of a color or a typo, or even looking for the simple idea reconsidering your project after hours of painful blocking, you can refer to one of the following parts.

CHAPTER 3: INTERACTION DESIGN BASICS

The elements of interaction design
Motion
Space
Time
Appearance
Texture
Sound

The Laws of interaction design (cf Daniel's blog)

Characteristics of good interaction design

Trustworthy
Appropriate
Smart
Responsive
Clever
Ludic
Pleasurable

CHAPTER 6: INTERFACE DESIGN BASICS

The elements of visual interface design
Layout
Typography
Color
Material and shape

Controls and widgets
Icons
Sound
Standards

Interfaces without face
Voice G
Gestures
Presence

Week 4: Dynamic generative patterns

Drawing Machine: inspired by thee brownian motion example on processing
// LittleBrother

int num = 10000;
float mx[] = new float[num];
float my[] = new float[num];
int countMe=0;

int countBrother=20;

void setup()
{
size(800, 400);
smooth();

background(0);
fill(255);
framerate(60);

stroke(255);
line(width/2,0,width/2,height);
noStroke();
}

void draw()
{
countMe++;
mx[countMe] = mouseX;
my[countMe] = mouseY;




if(mouseX==pmouseX && mouseY==pmouseY && mousePressed == false) { //littleBrother
if(countBrother < countMe) {
countBrother++;


stroke(255);
strokeWeight(random(0.5,4));

line(400+mx[countBrother]+random(-2.0,2.0), my[countBrother]+random(-2,2),mx[countBrother-1]+400,my[countBrother-1]);


}
}
else if(mousePressed) { //bigBrother

stroke(0,100,155,255);
strokeWeight(3);
line(mouseX,mouseY,pmouseX,pmouseY);

}
}

void mouseReleased() {
float diameter = random (1,10);
noStroke();
ellipse (random(width/2,width), random(height), diameter, diameter);

}

Week 4:Dynamic generative patterns

//THE CONSTRUCTION OF THE SNOWFLAKE WAS INSPIRED BY THE PAPER-CUT PATTERN IN A FOLDED SHEET OF PAPER
//THE PRINCIPLE: a triangle with three fixed vertex.
//Between these vertex, insert new vertex per groups of three: two of them are sliping randomly on the borderline
//The third one is framed by the two previous ones moving randomly inside the borders of the rectangle

void setup() {
size(1200,700);
framerate(3);
background(50);
}


void draw() {
//RENEW THE BACKGROUND ANDPREVIOUS SNOWFLAKES DISAPPEAR BY MELTING IN THE BACKGROUND
fill(40,40,40,80);
rect(0,0,1200,700);

translate(random(1500),random(900));
fill(20,230,208,90);
noStroke();
float rayon = random(10,80);//rayon = diameter/2
float x = random(10,50)/2;
float y = random(25,75)/2;
float a = random(rayon)/2;//randomize the end of the branch

while(x>y) {
x = random(rayon/8,5*rayon/8)/2;
y = random(3*rayon/8,7*rayon/8)/2;
}

float y2 = random(rayon/4,rayon/2);
float y3 = random(0,rayon/4);
float y4 = random(3*rayon/4+rayon/8,rayon-rayon/8);
float y5 = random(rayon/2+rayon/8,3*rayon/4-rayon/8);
float x4 = random(rayon/2,3*rayon/4);
float x5 =random (rayon/4,rayon/2);

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

rotate(PI/4);//DEFOLD THE PAPER

beginShape();
vertex(0,0);//first fixed point
vertex(rayon-a,rayon-a);//END OF THE BRANCH:detail which makes all the difference ;-)
vertex(rayon-a,rayon+5-a);//END OF THE BRANCH
vertex(rayon-5-a,rayon+5-a);//END OF THE BRANCH
vertex(rayon-20-a,rayon-10-a);//END OF THE BRANCH
vertex(x4,rayon);//first group of three points
vertex(y,rayon/2+x);
vertex(x5,rayon);
vertex(0,rayon);//second fixed point
vertex(0,y4);//second group of three points
vertex(x,rayon/2+y);
vertex(0,y5);
vertex(0,y2);//third group of three points
vertex(x,y);
vertex(0,y3);//third (fixed) point, center of the snowflake

endShape();

//MAKING THE SYMETRICAL TRIANGLE

beginShape();
vertex(0,0);
vertex(-rayon+a,-rayon+a);
vertex(-rayon+a,-rayon+a);
vertex(-rayon+5+a,-rayon-5+a);
vertex(-rayon+20+a,-rayon+10+a);
vertex(-x4,-rayon);
vertex(-y,-(rayon/2+x));
vertex(-x5,-rayon);
vertex(0,-rayon);
vertex(0,-y4);
vertex(-x,-(rayon/2+y));
vertex(0,-y5);
vertex(0,-y2);
vertex(-x,-y);
vertex(0,-y3);

endShape();
}
}

Week 3: Visual abstraction

Wall pattern for girls room and boys room: with the same basic shapes I try to make them more feminine or masculine
according to their arrangement.

void draw() {
size(500,500);
background(200);

if(mousePressed) {

// PLACE BOYS PATTERN HERE

background(255);
for(int y=30; y<571; y=y+180){

for(int x= 10; x< 501; x=x+300) {

translate (30,0);

noStroke();
fill(143,167,106);
rectMode(CENTER);
rect(x+70,y,60,7);
ellipse(x+15,y,50,20);
ellipse(x,y+27,100,40);
ellipse(x-40,y+45,20,10);
ellipse(x-20,y+45,20,10);
ellipse(x,y+45,20,10);
ellipse(x+20,y+45,20,10);
ellipse(x+40,y+45,20,10);


fill(255,0,0,70);


ellipse(x+120,y,5,5);
ellipse(x+120,y,20,20);
ellipse(x+120,y,40,40);
}
}

}
else {

// PLACE GIRL PATTERN HERE

background(100);

for(int x= 10; x< 501; x=x+180) {

for (int y= 80; y<441; y=y+180){

translate (30,0);
noStroke();

rectMode(CENTER);

fill(143,167,106);
rect(x,y+3,6,60);
ellipse(x+30,y,50,20);//ROTATE THIS ONE
ellipse(x-10,y+33,100,40);
ellipse(x+13,y-19,20,10);
ellipse(x-15,y-12,20,10);
ellipse(x+45,y+50,20,10);
ellipse(x+40,y+15,20,10);
ellipse(x-15,y+5,20,10);

fill(255,0,0,70);

ellipse(x,y-45,5,5);
ellipse(x,y-45,20,20);
ellipse(x,y-45,40,40);
}
}
}
}

Week 3: Visual abstraction

Hard_soft composition

int transparency;
void draw() {
size(500,500);
background(200);

if(mousePressed) {

// PLACE HARD GRAPHICS HERE
background(0);
noStroke();
rectMode(CORNER);
rect(180,50,300,300);


rectMode(CENTER);
for (int x=15; x<480; x=3*x/2) {
fill(164,36,0,80);
rect(180,350,x,x);
}

}
else {

// PLACE SOFT GRAPHICS HERE
background(78,114,124);
smooth();
rectMode(CORNER);
noStroke();
fill(255,80);
rect(180,50,300,300);
rect(350,100,90,90);
fill(255);
rect(370,120,15,15);

}
}

Week 3: Visual Abstraction

Passive_dynamic composition
void setup(){
size(600,400);
}
void draw() {
background(200);

if(mousePressed) {

// PLACE DYNAMIC GRAPHICS HERE
fill(0);
quad(350,190,540,119,555,159,363,227);

fill(255);
quad(235,341,524,151,534,167,246,357);

quad(268,103,327,64,441,243,379,283);

fill(0);

quad(264,161,406,121,424,182,280,222);

fill(255);

quad(142,152,387,68,396,90,151,172);

fill(0);
quad(103,179,252,160,261,232,113,252);

fill(255);
quad(50,235,304,167,309,181,53,250);


}
else {

// PLACE PASSIVE GRAPHICS HERE
int x;

smooth();

x=width/2;


rectMode (CENTER);
fill(255);
rect(x,90,25,20);
rect(x,125,80,30);
/*

*/
rect(x,165,210,40);


for(int y=200;y<291;y=y+30) {
fill(0);
rect(x,y,y,16);
}
rect(x,320,450,20);


}
}

Week 3: Visual Abstraction

Heavy_light composition

void draw() {
background(200);

if(mousePressed) {

// PLACE HEAVY GRAPHICS HERE
size(600,600);
background(250);

fill(0);
rect(0,0,600,520);
rect(50,550,500,20);

}
else {

// PLACE LIGHT GRAPHICS HERE
size(600,600);
background(20);

fill(255);
noStroke();
smooth();
rect(0,400,600,200);
rect(410,90,20,70);




}
}

The basic tools

First contact with programming on Processing. It 's gonna be fun. I hope I'll quickly be able to fulfill my dreams of blinking, glistenning, sparkling, glamourous, nervous, tremendous, jelly, liquid, explosive, and even more, interactive design.