erratica » » processing

P(h)ixel_02

coche — Thu, 28 May 2009 04:47:52 +0000

So this is a bit more refined version of the P(h)ixel. For one, the structure is now laser-cut plexi and way less embarrasing than before. Second, it allowed for the test with the latex, which, is already giving me nightmares. I’m calling this thing my-own-private-videodrome.

[See post to watch Flash video]

A few things to resolve:
Re-centering the vertical element.
Lowering production cost (servos are clunky and gets expensive fast!).
Create a field!

[See post to watch Flash video]

Bookmark:

P(h)ixel_01

coche — Wed, 27 May 2009 14:59:01 +0000

This is the first crapotype of the p(h)ixel: a physical pixel that reacts to changes in the environment. The pixel is part of a larger matrix that can create a low-res mapping of the environment by pushing or pulling on a flexible membrane. The first test clip is after the jump below.
Oh and for the record, I used my teeth to cut the cardboard…

[See post to watch Flash video]

Bookmark:

Time

coche — Tue, 21 Apr 2009 13:21:57 +0000

A completely unreadable processing clock.


PFont font;
int hY = 40;
void setup (){

size (890,hY*3);

smooth ();
}
void draw (){

font = loadFont ("HelveticaNeue-12.vlw");

textFont (font);

textSize (12);

scale (.9); // use only to fit into blog header

int ms = (millis ()/100)% 200;  // millis
int s = second ();

float mapS = map (s,0,60,0,127.5); //map seconds
int m = minute ();

float mapM = map (m,0,60,0,127.5); // map minutes
int h = hour ();

float mapH = map (h,0,60,0,127.5); // map hours
int d = day ();
int mo = month ();

int ye = (year ()%1000)+100;
int y = 40;

background (255);
//1 milliseconds

noStroke ();

fill (0,ms*1.2);

rect (0,y,ms,y);
stroke (0);

line (ms,y*2+5,ms,y*2+10);

fill (0);

text (ms*5, ms, y*2+25);
//2 seconds

noStroke ();

fill (0,mapS*2);

rect (200+1,y,mapS,y);
stroke (0);

line ((mapS+201),y-5,(mapS+201),y-10);

fill (0);

if (s <=9){

text (":0"+s, (mapS+201), y-15);

} else {

  text (":"+s+ "''", (mapS+201), y-15);

}
//3 mins

noStroke ();

fill (0,mapM*2);

rect ((327.5+1),y,(mapM*2),y);
stroke (0);

line (((mapM*2)+328.5),y*2+5,((mapM*2)+328.5),y*2+10);

fill (0);

if (m <=9){

text (":0"+m + "'" , ((mapM*2)+328.5), y*2+25);

} else {

  text (":"+m + "'" , ((mapM*2)+328.5), y*2+25);

}
//4 hour

noStroke ();

fill (0,mapH*2.65625);

rect ((582+1),y,(mapH*2),y);
stroke (0);

line (((mapH*2)+583),y-5,((mapH*2)+583),y-10);

fill (0);

text (":"+ h , ((mapH*2)+583), y-15);
//5 day

noStroke ();

fill (0,d*8.5);

rect (711,y,(d*2),y);
stroke (0);

line (((d*2)+711),y*2+5,((d*2)+711),y*2+10);
fill (0);

//text (d, ((d*2)+711), y*2+25);

if (d<=9){

 text ("0"+ d, ((d*2)+711), y*2+25);

} else {

  text (d, ((d*2)+711), y*2+25);

}
//6 month

noStroke ();

fill (0,mo*21.55);

rect (762,y,mo*2,y);

 stroke (0);

line (((mo*2)+762),y-5,((mo*2)+762),y-10);
fill (0);

if (mo <=9){

text ("0"+mo, ((mo*2)+762), y-15);

}else {

 text (mo, ((mo*2)+762), y-15);

}
//7 year

noStroke ();

fill (0);

rect (787,y,(ye),y);
 stroke (0);

line (((ye)+787),y*2+5,((ye)+787),y*2+10);

text (ye+1900, ((ye+787)), y*2+25);
}

Bookmark:

Image Read 3

coche — Fri, 10 Apr 2009 02:51:27 +0000

Another slight variation on the image read experiment. This time, the variation is based on the mouse distance, both for images and the webcam.

For images.

For Webcam


import processing.video.*;
float r = 5;

int xPix, yPix;
Capture video;
void setup (){

  size (640,480, JAVA2D);

  background (255);

  smooth ();

  noStroke ();
  video = new Capture (this,width,height);
}
void draw (){
  if (video.available()){

    video.read();

  }
  for (int x = 0; x < 640; x+=20){

    for (int y = 0; y < 480; y += 20){

      float myDist = (dist (x, y, mouseX, mouseY)/12);
      color  c =  video.get (x,y);
      fill (c);

      rectMode (CENTER);
      rect (x,y,myDist,myDist);
    }

  }
}

For Images
PImage img;


void setup (){
  img = loadImage ("picture1.jpg");

  size (img.width,img.height);

  noStroke ();

  smooth ();
}
void draw (){

  background (255);

for (int x = 0; x < img.width; x+=20){ for (int y = 0; y < img.height; y += 20){ float myDist = (dist (x, y, mouseX, mouseY)/8); color c = img.get (x,y); fill (c); ellipseMode (CENTER); ellipse (x,y, myDist,myDist); } } }

Bookmark:

Image Read 2

coche — Mon, 06 Apr 2009 01:11:11 +0000

This is the continuation of the image processing test driven this time by the webcam. The next step will be to make each of the cells being placed on the image be more than just an ellipse and have them be driven by the brightness of the pixels.

Changing the radius based on brightness


import processing.video.*;
float r = 5;

int xPix, yPix;
Capture video;
void setup (){

 size (640,480, P2D);

 smooth ();

 noStroke ();

video = new Capture (this,width,height);

}
void draw (){

  if (video.available()){

    video.read();

    video.loadPixels();

  }
for (int x = 0; x < width; x+=10){

  for (int y = 0; y < height; y += 10){
color  c =  video.get (x,y);

float b = brightness (c);

//r = b/8;
    fill (c, 14);

    ellipse (x,y,10,10);

// ellipse (x,y,r,r);
  }

}
}
Bookmark:



Image Read
coche — Fri, 03 Apr 2009 20:21:33 +0000

Reading the pixel data of an image to drive the color and scale of circles. 
Next step will be to draw the webcam video using the ellipses. Now its just changing based on a random number linked to the brightness. 


Some image downloaded from the web…


PImage img;
void setup (){

size (360,360);

img = loadImage ("artlife4.jpg");

noStroke ();

smooth ();

tint (255,255,255,0);

image (img, 0,0);

frameRate (8);

}
void draw (){
for (int i = 0; i < width; i += 10){

  for (int j = 0; j < height; j += 10){
    int posX = i;

    int posY = j;

    color c = img.get (posX,posY);

    float b = (random(brightness (c)/4));  
    fill (c, 200);

    ellipseMode (CENTER);

    ellipse (i, j,b,b);  
  }

}
}

Bookmark:




Processing Patterns 01
coche — Thu, 26 Mar 2009 14:36:54 +0000

I’m working on my Processing skillz these days. Here are a few images of a simple recursive branch.


Changing position…

No dots.
Bookmark:




Arduino Confetti
coche — Mon, 23 Mar 2009 05:19:47 +0000

A photoresistor controlling the size, color, alpha and placement of the circles in processing.
Code and clip after the jump below.




[See post to watch Flash video]


//Processing

import processing.serial.*;
Serial myPort;

int val;     
void setup()

{

  size(200, 200);

  smooth ();

  String portName = Serial.list()[0];

  myPort = new Serial(this, portName, 9600);

}
void draw(){
  if ( myPort.available() > 0) {

    val = myPort.read();

  }
  if (val > 20) {

  fill (random (val),random (val), random (val),  val*1.25);

  ellipse (random (val),random (val),val/4,  val/4);
}
  if (val >20){

  println (val);

  }

}
//arduino + wiring
int potPin = 0;

int val = 0;
void setup (){

  Serial.begin (9600);

}
void loop (){

  val = analogRead (potPin)/4;

  delay (100);

  Serial.print (val, BYTE);

  Serial.println();  
}


Bookmark: