codelab / S'agiter pour agiter l'animation

lindecis — 2015-11-21 18:36:29

Bonjour,
Afin de réaliser une animation avec laquelle on pourrais réagir, je me suis intéressé à la webcam de mon ordinateur comme moyen d’interaction. J'aimerais que les déplacements hasardeux de particule dans mon animation dépendent de l'agitation que l'on fait devant la webcam.

Pour faire cela j'essaye de mixer deux exemples de sketch très réussi
Le premier est l'exemple BackgroundSubstration disponible grâce à la librairie vidéo
Le second est l'exemple M_1_2_02, dispo dans la libraire du livre Design Génératif
J'y ai ajouté la fonction map() pour convertir la valeur du nombre du nombre de pixel, mais la valeur est toujours égale à 0 ! Quelqu'un saurait ou j'ai fais des erreurs svp ?
Merci d'avance pour votre réponse

Si dessous le code M_1_2_02 que j'ai légèrement modifié et ensuite ce que je suis en train de composer.

// M_1_2_01.pde
// 
// Generative Gestaltung, ISBN: 978-3-87439-759-9
// First Edition, Hermann Schmidt, Mainz, 2009
// Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni
// Copyright 2009 Hartmut Bohnacker, Benedikt Gross, Julia Laub, Claudius Lazzeroni
//
// http://www.generative-gestaltung.de
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/**
 * order vs random! 
 * how to interpolate beetween a free composition (random) and a circle shape (order)
 * 
 * MOUSE
 * position x          : fade between random and circle shape
 * 
 * KEYS
 * p                   : save pdf
 * s                   : save png
 */

import processing.pdf.*;
import java.util.Calendar;

boolean savePDF = false;

int actRandomSeed = 0;
int count = 2000;

void setup() {
  size(800,800); 
  cursor(CROSS);
  smooth();
  background(0,0,0);
    
}

void draw() {
  if (savePDF) beginRecord(PDF, timestamp()+".pdf");
  background(0,0,0);
  noStroke();

  float faderX = (float)mouseX/(width/2);

  randomSeed(actRandomSeed);
  float angle = radians(360/float(count));
  for (int i=0; i<count; i++){
    // positions
    float randomX = random(0,width);  
    float randomY = random(0,height);
    float circleX = width/2 + cos(angle*i)*200;
    float circleY = height/2 + sin(angle*i)*200;

    float x = lerp(randomX,circleX, faderX);
    float y = lerp(randomY,circleY, faderX);

    fill(255);
    ellipse(x,y,2,2);
  }

  if (savePDF) {
    savePDF = false;
    endRecord();
  }
}

void mouseReleased() {
  actRandomSeed = (int) random(100000);
}

void keyReleased() {  
  if (key == 's' || key == 'S') saveFrame(timestamp()+"_####.png");
  if (key == 'p' || key == 'P') savePDF = true;
}

String timestamp() {
  Calendar now = Calendar.getInstance();
  return String.format("%1$ty%1$tm%1$td_%1$tH%1$tM%1$tS", now);
}

Enfin mon sketch actuel

/**
 * order vs random! 
 * how to interpolate beetween a free composition (random) and a circle shape (order)
 * 
 * MOUSE
 * position x          : fade between random and circle shape
 * 
 * KEYS
 * p                   : save pdf
 * s                   : save png
 */

import processing.pdf.*;
import java.util.Calendar;
import processing.video.*;

boolean savePDF = false;

int actRandomSeed = 0;
int count = 2000;

int presenceSum;
int m;

int numPixels;
int[] backgroundPixels;
Capture video;

void setup() {
  size(640,480); 
  background(0,0,0);
  
  video = new Capture(this, width, height);
  video.start();
  numPixels = video.width * video.height;
  backgroundPixels = new int[numPixels];    
  loadPixels();      
}

void draw() {
  if (video.available()) {
    video.read(); // Read a new video frame
    video.loadPixels(); // Make the pixels of video available
    // Difference between the current frame and the stored background
    int presenceSum = 0;
    for (int i = 0; i < numPixels; i++) { // For each pixel in the video frame...
      // Fetch the current color in that location, and also the color
      // of the background in that spot
      color currColor = video.pixels[i];
      color bkgdColor = backgroundPixels[i];
      // Extract the red, green, and blue components of the current pixel's color
      int currR = (currColor >> 16) & 0xFF;
      int currG = (currColor >> 8) & 0xFF;
      int currB = currColor & 0xFF;
      // Extract the red, green, and blue components of the background pixel's color
      int bkgdR = (bkgdColor >> 16) & 0xFF;
      int bkgdG = (bkgdColor >> 8) & 0xFF;
      int bkgdB = bkgdColor & 0xFF;
      // Compute the difference of the red, green, and blue values
      int diffR = abs(currR - bkgdR);
      int diffG = abs(currG - bkgdG);
      int diffB = abs(currB - bkgdB);
      // Add these differences to the running tally
      presenceSum += diffR + diffG + diffB;

      // The following line does the same thing much faster, but is more technical
      //pixels[i] = 0xFF000000 | (diffR << 16) | (diffG << 8) | diffB;
    }
    updatePixels(); // Notify that the pixels[] array has changed
    println(presenceSum);
    println(m); // Print out the total amount of movement
  }
  if (savePDF) beginRecord(PDF, timestamp()+".pdf");
  background(0,0,0);
  noStroke();



  float m = map(presenceSum, 140000000, 110000000, 0, 640);
  float faderX = m;

  randomSeed(actRandomSeed);
  float angle = radians(360/float(count));
  for (int i=0; i<count; i++){
    // positions
    float randomX = random(0,width);  
    float randomY = random(0,height);
    float circleX = width/2 + cos(angle*i)*200;
    float circleY = height/2 + sin(angle*i)*200;

    float x = lerp(randomX,circleX, faderX);
    float y = lerp(randomY,circleY, faderX);

    fill(255);
    ellipse(x,y,2,2);
  }

  if (savePDF) {
    savePDF = false;
    endRecord();
  }
}

void mouseReleased() {
  actRandomSeed = (int) random(100000);
}

void keyReleased() {  
  if (key == 's' || key == 'S') saveFrame(timestamp()+"_####.png");
  if (key == 'p' || key == 'P') savePDF = true;
}

String timestamp() {
  Calendar now = Calendar.getInstance();
  return String.format("%1$ty%1$tm%1$td_%1$tH%1$tM%1$tS", now);
}

Mushussu — 2015-11-21 19:18:46

Bonsoir,

Le problème vient de la portée de ta variable presenceSum.
Tu la déclares globale au début de ton sketch. Puis dans le draw(), tu recréer une nouvelle variable presenceSum dans les accolades du if. Donc c'est cette deuxième version de presenceSum qui est modifiée et qui disparaît à l'accolade fermante.

J'ai modifié 2-3 trucs voici ce que je te propose :

import processing.pdf.*;
import java.util.Calendar;
import processing.video.*;

boolean savePDF = false;

int actRandomSeed = 0;
int count = 2000;

int presenceSum;
int m;

int numPixels;
int[] backgroundPixels;
Capture video;

void setup() {
  size(640,480); 
  background(0,0,0);
  
  video = new Capture(this, width, height);
  video.start();
  numPixels = video.width * video.height;
  backgroundPixels = new int[numPixels];    
  loadPixels();      
}

void draw() {
  if (video.available()) {
    video.read(); // Read a new video frame
    video.loadPixels(); // Make the pixels of video available
    // Difference between the current frame and the stored background
    presenceSum = 0;
    for (int i = 0; i < numPixels; i++) { // For each pixel in the video frame...
      // Fetch the current color in that location, and also the color
      // of the background in that spot
      color currColor = video.pixels[i];
      color bkgdColor = backgroundPixels[i];
      // Extract the red, green, and blue components of the current pixel's color
      int currR = (currColor >> 16) & 0xFF;
      int currG = (currColor >> 8) & 0xFF;
      int currB = currColor & 0xFF;
      // Extract the red, green, and blue components of the background pixel's color
      int bkgdR = (bkgdColor >> 16) & 0xFF;
      int bkgdG = (bkgdColor >> 8) & 0xFF;
      int bkgdB = bkgdColor & 0xFF;
      // Compute the difference of the red, green, and blue values
      int diffR = abs(currR - bkgdR);
      int diffG = abs(currG - bkgdG);
      int diffB = abs(currB - bkgdB);
      // Add these differences to the running tally
      presenceSum += diffR + diffG + diffB;

      // The following line does the same thing much faster, but is more technical
      //pixels[i] = 0xFF000000 | (diffR << 16) | (diffG << 8) | diffB;
    }
    updatePixels(); // Notify that the pixels[] array has changed
    println(presenceSum);
  }
  if (savePDF) beginRecord(PDF, timestamp()+".pdf");
  background(0,0,0);
  noStroke();



  float m = map(presenceSum, 140000000, 10000000, 0, 640);
      println(m); // Print out the total amount of movement

  float faderX = (float)m/(width/2);

  randomSeed(actRandomSeed);
  float angle = radians(360/float(count));
  for (int i=0; i<count; i++){
    // positions
    float randomX = random(0,width);  
    float randomY = random(0,height);
    float circleX = width/2 + cos(angle*i)*200;
    float circleY = height/2 + sin(angle*i)*200;

    float x = lerp(randomX,circleX, faderX);
    float y = lerp(randomY,circleY, faderX);

    fill(255);
    ellipse(x,y,2,2);
  }

  if (savePDF) {
    savePDF = false;
    endRecord();
  }
}

void mouseReleased() {
  actRandomSeed = (int) random(100000);
}

void keyReleased() {  
  if (key == 's' || key == 'S') saveFrame(timestamp()+"_####.png");
  if (key == 'p' || key == 'P') savePDF = true;
}

String timestamp() {
  Calendar now = Calendar.getInstance();
  return String.format("%1$ty%1$tm%1$td_%1$tH%1$tM%1$tS", now);
}

lindecis — 2015-11-22 14:05:59

Merci beaucoup Mushussu pour ta réactivité, ça fonctionne !!

Si j'ai bien compris tu as enlever la variable en trop et tu as changé une valeur dans map() c'est fou ça fonctionne vraiment bien ! Merci

J'essaye maintenant de bidouiller les différentes valeurs pour que lorsque la personne devant la caméra ne bouge pas trop le cercle soit bien formé, afin que l'utilisateur puisse comprendre quand est-ce que le cercle s'éparpille.
C'est impressionnant avec ce que tu as corrigés on dirait que l'animation ne dépend pas du mouvement mais de la distance entre la camera et l'utilisateur

Voila ci-dessous ce que s’obtient maintenant avec mon bidouillage des valeurs dans lerp() , un cercle mieux formé lorsque que l'on ne bouge pas et qui s'éparpille quand on se met en mouvement. Mais encore une fois j'ai l'impression que l'anmiation dépend de ma distance avec la caméra, c'est à dire que quand je me balance je vois le cercle faire pareil, c'est étrange non ?

import processing.pdf.*;
import java.util.Calendar;
import processing.video.*;

boolean savePDF = false;

int actRandomSeed = 0;
int count = 2000;

int presenceSum;
int m;

int numPixels;
int[] backgroundPixels;
Capture video;

void setup() {
  size(640,480); 
  background(0,0,0);
  
  video = new Capture(this, width, height);
  video.start();
  numPixels = video.width * video.height;
  backgroundPixels = new int[numPixels];    
  loadPixels();      
}

void draw() {
  if (video.available()) {
    video.read(); // Read a new video frame
    video.loadPixels(); // Make the pixels of video available
    // Difference between the current frame and the stored background
    presenceSum = 0;
    for (int i = 0; i < numPixels; i++) { // For each pixel in the video frame...
      // Fetch the current color in that location, and also the color
      // of the background in that spot
      color currColor = video.pixels[i];
      color bkgdColor = backgroundPixels[i];
      // Extract the red, green, and blue components of the current pixel's color
      int currR = (currColor >> 16) & 0xFF;
      int currG = (currColor >> 8) & 0xFF;
      int currB = currColor & 0xFF;
      // Extract the red, green, and blue components of the background pixel's color
      int bkgdR = (bkgdColor >> 16) & 0xFF;
      int bkgdG = (bkgdColor >> 8) & 0xFF;
      int bkgdB = bkgdColor & 0xFF;
      // Compute the difference of the red, green, and blue values
      int diffR = abs(currR - bkgdR);
      int diffG = abs(currG - bkgdG);
      int diffB = abs(currB - bkgdB);
      // Add these differences to the running tally
      presenceSum += diffR + diffG + diffB;

      // The following line does the same thing much faster, but is more technical
      //pixels[i] = 0xFF000000 | (diffR << 16) | (diffG << 8) | diffB;
    }
    updatePixels(); // Notify that the pixels[] array has changed
    println(presenceSum);
  }
  if (savePDF) beginRecord(PDF, timestamp()+".pdf");
  background(0,0,0);
  noStroke();



  float m = map(presenceSum, 140000000, 1000000, 0, 640);
      println(m); // Print out the total amount of movement

  float faderX = (float)m/width;

  randomSeed(actRandomSeed);
  float angle = radians(360/float(count));
  for (int i=0; i<count; i++){
    // positions
    float randomX = random(0,width);  
    float randomY = random(0,height);
    float circleX = width/2 + cos(angle*i)*200;
    float circleY = height/2 + sin(angle*i)*200;

    float x = lerp(circleX,randomX, faderX);
    float y = lerp(circleY,randomY, faderX);

    fill(255);
    ellipse(x,y,2,2);
  }

  if (savePDF) {
    savePDF = false;
    endRecord();
  }
}

void mouseReleased() {
  actRandomSeed = (int) random(100000);
}

void keyReleased() {  
  if (key == 's' || key == 'S') saveFrame(timestamp()+"_####.png");
  if (key == 'p' || key == 'P') savePDF = true;
}

String timestamp() {
  Calendar now = Calendar.getInstance();
  return String.format("%1$ty%1$tm%1$td_%1$tH%1$tM%1$tS", now);
}

Mushussu — 2015-11-22 18:09:43

Bonsoir,

En fait le tableau de pixels de l'arrière plan, n'est jamais mis à jour. J'ai rajouté à la fin de la méthode draw() l'actualisation du fond.
J'ai aussi contraint la valeur m dans les limites de la fenêtre.

import processing.pdf.*;
import java.util.Calendar;
import processing.video.*;

boolean savePDF = false;

int actRandomSeed = 0;
int count = 2000;

int presenceSum;
int m;

int numPixels;
int[] backgroundPixels;
Capture video;

void setup() {
  size(640, 480); 
  background(0, 0, 0);

  video = new Capture(this, width, height);
  video.start();
  numPixels = video.width * video.height;
  backgroundPixels = new int[numPixels];    
  loadPixels();
}

void draw() {
  if (video.available()) {
    video.read(); // Read a new video frame
    video.loadPixels(); // Make the pixels of video available
    // Difference between the current frame and the stored background
    presenceSum = 0;
    for (int i = 0; i < numPixels; i++) { // For each pixel in the video frame...
      // Fetch the current color in that location, and also the color
      // of the background in that spot
      color currColor = video.pixels[i];
      color bkgdColor = backgroundPixels[i];
      // Extract the red, green, and blue components of the current pixel's color
      int currR = (currColor >> 16) & 0xFF;
      int currG = (currColor >> 8) & 0xFF;
      int currB = currColor & 0xFF;
      // Extract the red, green, and blue components of the background pixel's color
      int bkgdR = (bkgdColor >> 16) & 0xFF;
      int bkgdG = (bkgdColor >> 8) & 0xFF;
      int bkgdB = bkgdColor & 0xFF;
      // Compute the difference of the red, green, and blue values
      int diffR = abs(currR - bkgdR);
      int diffG = abs(currG - bkgdG);
      int diffB = abs(currB - bkgdB);
      // Add these differences to the running tally
      presenceSum += diffR + diffG + diffB;

      // The following line does the same thing much faster, but is more technical
      //pixels[i] = 0xFF000000 | (diffR << 16) | (diffG << 8) | diffB;
    }
    updatePixels(); // Notify that the pixels[] array has changed
    //println(presenceSum);
  }
  if (savePDF) beginRecord(PDF, timestamp()+".pdf");
  background(0, 0, 0);
  noStroke();

  float m = map(presenceSum, 2000000, 20000000, 0, 640);
  m = constrain(m, 0, 640);
  //println(m); // Print out the total amount of movement

  float faderX = (float)m/width;

  randomSeed(actRandomSeed);
  float angle = radians(360/float(count));
  for (int i=0; i<count; i++) {
    // positions
    float randomX = random(0, width);  
    float randomY = random(0, height);
    float circleX = width/2 + cos(angle*i)*200;
    float circleY = height/2 + sin(angle*i)*200;

    float x = lerp(circleX, randomX, faderX);
    float y = lerp(circleY, randomY, faderX);

    fill(255);
    ellipse(x, y, 2, 2);
  }

  if (savePDF) {
    savePDF = false;
    endRecord();
  }
  arraycopy(video.pixels, backgroundPixels);
}

void mouseReleased() {
  actRandomSeed = (int) random(100000);
}

void keyReleased() {  
  if (key == 's' || key == 'S') saveFrame(timestamp()+"_####.png");
  if (key == 'p' || key == 'P') savePDF = true;
}

String timestamp() {
  Calendar now = Calendar.getInstance();
  return String.format("%1$ty%1$tm%1$td_%1$tH%1$tM%1$tS", now);
}

lindecis — 2015-11-23 13:49:40

Merci beaucoup c'est exactement le résultat que je voulais obtenir, je vais maintenant essayer de digéré tout ça. Je ne savais pas comment contraindre une valeur je vais m'en resservir je pense !