erratica » processing

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);
}

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); } } }

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);
  }

}
}



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);  
  }

}
}




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.



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.




[flv:arduino_confetti.flv arduino_confetti.jpg 500 375]


//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();  
}