instrucciones

Instrucciones para llevar a cabo algo
Mientras lo pueda nombrar lo puedo utilizar
los límites del mundo son los límites de mis lenguajes
si puedo pensar algo lo puedo programar
orden de pensamientos


primero vamos a definir los elementos que siempre nos acompañarán
después se declara el lugar donde todo va a pasar
definimos la acción que no se va detener durante todo este evento
se crean relaciones entre los elementos
se declaran condiciones, se establecen comportamientos, ejecutas tu programa y no sirve y no sabes por qué

p5js

La parte más menos conveniente de usar processing era el cómo compartir una pieza generada con éste, se puede hacer un archivo ejecutable para descargar o un applet para incrustrar en una página web el cual podría o no cargar dependiendo de las actualizaciones de java en la computadora del usuario. Estas características le quitan muchísima utilidad a processing, sin embargo ahora tenemos p5js!! una librería para utilizar HTML5 en vez de java. Esto significa que el sketch que hagamos en processing puede correr dentro de una hoja de html e interactuar con sus etiquetas haciendo muchísimo más amigable y probable el encuentro con una pieza creada a partir de processing.

He estado trabajando en una pieza sobre coleccionismo y en vez de terminarla en processing 3.0 voy a intentar portarla a p5.js.

coleccionismo

La idea de este proyecto es realizar un programa intuitivo mediante el cual genere en el usuario una reflexión sobre el movimiento en su recorrido en el espacio y con los elementos otorgados para explorar.
Este trabajo es para una publicación sobre coleccionismo y es probable que sea publicada por Operación Hormiga
Estoy realizando este programita por medio de processing 3.0. La aplicación  debe funcionar de la siguiente manera: se otorgan varios elementos y la posibilidad de arratrarlos en la pantalla hasta llegar a un punto en el espacio donde los elementos se convierte en inmóviles y los elementos desaparecen para mostrar solo el recorrido marcado por el movimiento del puntero.
La programación es bastante sencilla pero forma parte de la pieza de alguna manera


DragMe[] drags = new DragMe[15];

 PGraphics topLayer;
 PGraphics toperLayer;

 color backgr;

void setup() {
  size(500, 500);
  for (int i = 0; i < drags.length; i++) {
    drags[i]  = new DragMe();
  }
  topLayer = createGraphics(width, height, g.getClass().getName());

}
void draw() {
  
  background(backgr);

  {  
    topLayer.beginDraw();
    topLayer.noFill();
    topLayer.stroke(0 ); 
    if (mousePressed ==true) {
      topLayer.line( pmouseX, pmouseY, mouseX, mouseY );
      topLayer.endDraw();  }
    image( topLayer, 0, 0 );
  }

  for (int i = 0; i < drags.length; i++) {
    drags[i].display();
    drags[i].update();}
  
  for (int i = 0; i < drags.length; i++) {
    drags[i].fondo();}

{
ellipse(width/2.5, height/2.5,110, 110);
fill(255);}
}

void mousePressed() {
  for (int i = 0; i < drags.length; i++) {
    if (!drags[i].isOver())
      drags[i].dontMove = true;
    drags[i].offset_x = mouseX - drags[i].pos_x;
    drags[i].offset_y = mouseY - drags[i].pos_y;
  }
}

void mouseReleased() {
  for (int i = 0; i < drags.length; i++) {
    drags[i].locked = false;
    drags[i].dontMove = false;
  }
}

class DragMe {
  float pos_x, pos_y, SIZE = 25;
  float prev_x, prev_y;
  boolean locked;
  boolean dontMove;
  boolean todo;
  color c = color (255);
  float offset_x, offset_y;

  DragMe() {
    pos_x = random(width-SIZE);
    pos_y = random(height-SIZE);
   
  }

  void update() {
    if (isOver() && !locked && !dontMove || locked && !dontMove )
      c = color (255);
    else
      c = color (255);

    if (isClicked()) {
      locked = true;
    }
    
    if(isIn()){ 
      locked = false;
      todo = true;
    }
      
    if (locked && !dontMove) {

      pos_x =  mouseX - offset_x;
      pos_y =  mouseY - offset_y;
    }
  

}



  void display() {
    fill(c);
    ellipse(pos_x, pos_y, SIZE, SIZE);
    ellipseMode(CORNER);
    noStroke();

  }

  boolean isOver() {
    float right_x = pos_x + SIZE;
    float bottom_y = pos_y + SIZE;
    return mouseX >= pos_x && mouseX <= right_x &&
      mouseY >= pos_y && mouseY <= bottom_y;
  }

  boolean isClicked() {
    return isOver() && mousePressed && !dontMove;
  }
  boolean isIn() {
     float right_x = pos_x + SIZE;
    float bottom_y = pos_y + SIZE;
    return right_x >= width/2.5 + SIZE && right_x <= width/2.5 + 100 &&
    bottom_y >= height/2.5 + SIZE  && bottom_y <= height/2.5  + 100; 
  }

void fondo(){
if (todo == true)
backgr= 255;}
}

Peggy 2 es un ojo

El tablero va a funcionar como un ojo, para esto tengo que convertir la imagen en reconocible a través de los tres colores luz primarios.
El primer paso es encontrar la manera de convertir estas formas que me interesan en tres canales de color.


En el sketch que me permite hacer animación las imágenes están en código hexadecimal. Este código funciona con 14 dígitos 0 1 2 3 4 5 6 7 8 9 A B C D E.  Pero sólo convierte imágenes a un canal, ósea en blanco y negro.  Necesito encontrar una forma de convertir imagen en código hex separando los 3 canales (r,g, b) e indicar la posición en la placa.


unsigned int frames = 3;

prog_uint32_t datastore[] PROGMEM  = {
 0 , 0 , 0 , 0 , 0 , 0 , 53248 , 36800 , 33824 , 32776 , 
 16386 , 0 , 1 , 0 , 8192 , 0 , 0 , 0 , 4098 , 8 , 
 1056 , 576 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 
 0 , 0 , 0 , 0 , 0 , 114688 , 16384 , 24576 , 8256 , 4160 , 
 8064 , 4096 , 4096 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 
 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 
 0 , 57344 , 130048 , 24320 , 256 , 8192 , 8192 , 0 , 4096 , 0 , 
 4096 , 4096 , 0 , 0 , 0
};


En este código están codificados 3 frames, cada 25 cifras es uno de ellos. Son 25 filas de información porque la imagen tiene 25 x 25 pixeles. La información que se carga en la placa esta acomodada por arrays.

Ya que en mi tablero tengo,
 blanco - rojo -blanco -roj
verde- azull - verde -azul
Una solución sería guardar la misma imagen de ( 12 x 12 ) dos veces, una con el canal rojo solamente y otra con la info de los canales verde y azul. Acomodarlos alternando estos códigos. Esto parece lógico pero aun tengo que intentarlo, de cualquier forma sería una solución muy rústica y no se aprovecharían otras posibilidades como hacer degradados.

Para conseguir el código hexadecimal de una imagen estoy utilizando la terminal de ubuntu

sudo od -x /file.bmp 

 tamaño original 12 x 12 pixeles

Hex data del canal rojo:

0000000 4d42 01cc 0000 0000 0000 001a 0000 000c

0000020 0000 000c 000c 0001 0018 0000 0000 0000
0000040 d2d2 ffd2 ffff ffff ffff ffff ffff ffff
0000060 ffff ffff ffff ffff d2d2 00d2 0000 0000
0000100 0000 0000 fafa fffa ffff ffff ffff ffff
0000120 ffff ffff ffff ffff ffff ffff f9f9 00f9
0000140 0000 0000 0000 0000 d2d2 ffd2 ffff ffff
0000160 ffff ffff ffff ffff ffff ffff ffff ffff
0000200 d2d2 00d2 0000 0000 0000 0000 9090 ff90
0000220 ffff ffff ffff ffff ffff ffff ffff ffff
0000240 ffff ffff 9191 0091 0000 0000 0000 0000
0000260 2e2e b62e b6b6 ffff ffff ffff ffff ffff
0000300 ffff ffff b6ff b6b6 2d2d 002d 0000 0000
0000320 0000 0000 0000 2e00 2e2e 9191 d291 d2d2
0000340 fafa d2fa d2d2 9191 2e91 2e2e 0000 0000
0000360 0000 0000 0000 0000 0000 0000 0000 0000
*
0000700 0000 0000 0000 0000 0000 0000
0000714

Hex data del canal verde:

0000000 4d42 01cc 0000 0000 0000 001a 0000 000c

0000020 0000 000c 000c 0001 0018 f3f3 f3f3 f3f3
0000040 fcfc fffc ffff ffff ffff ffff ffff ffff
0000060 ffff ffff ffff ffff fdfd f3fd f3f3 f3f3
0000100 f3f3 f3f3 ffff ffff ffff ffff ffff ffff
0000120 ffff ffff ffff ffff ffff ffff ffff f4ff
0000140 f4f4 f3f3 f3f3 f3f3 fcfc fffc ffff ffff
0000160 ffff ffff ffff ffff ffff ffff ffff ffff
0000200 fdfd f4fd f4f4 f4f4 f4f4 f4f4 f9f9 fff9
0000220 ffff ffff ffff ffff ffff ffff ffff ffff
0000240 ffff ffff f8f8 f3f8 f3f3 f3f3 f4f3 f4f4
0000260 f5f5 fbf5 fbfb ffff ffff ffff ffff ffff
0000300 ffff ffff fbff fbfb f5f5 f4f5 f4f4 f3f3
0000320 f3f3 f3f3 f3f3 f5f3 f5f5 f9f9 fdf9 fdfd
0000340 ffff fdff fdfd f9f9 f5f9 f5f5 f3f3 f4f3
0000360 f4f4 f4f4 f4f4 f4f4 f4f4 f3f4 f3f3 f3f3
0000400 f3f3 f3f3 f3f3 f4f3 f4f4 f3f3 f3f3 f3f3
0000420 f4f4 f4f4 f4f4 f3f3 f3f3 f3f3 f3f3 f3f3
0000440 f3f3 f3f3 f3f3 f3f3 f3f3 f4f3 f4f4 f4f4
0000460 f3f4 f3f3 f4f4 f3f4 f3f3 f4f4 f4f4 f4f4
0000500 f4f4 f4f4 f4f4 f3f3 f3f3 f3f3 f4f4 f3f4
0000520 f3f3 f4f4 f3f4 f3f3 f3f3 f4f3 f4f4 f4f4
0000540 f3f4 f3f3 f3f3 f4f3 f4f4 f4f4 f4f4 f4f4
0000560 f3f3 f4f3 f4f4 f4f4 f4f4 f4f4 f4f4 f3f4
0000600 f3f3 f3f3 f3f3 f3f3 f4f4 f4f4 f4f4 f3f3
0000620 f4f3 f4f4 f4f4 f3f4 f3f3 f3f3 f3f3 f3f3
0000640 f3f3 f4f3 f4f4 f3f3 f3f3 f3f3 f4f4 f3f4
0000660 f3f3 f3f3 f3f3 f3f3 f3f3 f3f3 f3f3 f3f3
0000700 f4f3 f4f4 f4f4 f3f4 f3f3 0000
0000714

Hex data del canal azul:

0000000 4d42 01cc 0000 0000 0000 001a 0000 000c

0000020 0000 000c 000c 0001 0018 ffff ffff ffff
0000040 4d4d 004d 0000 0000 0000 0000 0000 0000
0000060 0000 0000 0000 0000 4d4d ff4d ffff ffff
0000100 ffff ffff 0707 0007 0000 0000 0000 0000
0000120 0000 0000 0000 0000 0000 0000 0707 ff07
0000140 ffff ffff ffff ffff 4d4d 004d 0000 0000
0000160 0000 0000 0000 0000 0000 0000 0000 0000
0000200 4d4d ff4d ffff ffff ffff ffff 9999 0099
0000220 0000 0000 0000 0000 0000 0000 0000 0000
0000240 0000 0000 9999 ff99 ffff ffff ffff ffff
0000260 e7e7 70e7 7070 0000 0000 0000 0000 0000
0000300 0000 0000 7100 7171 e6e6 ffe6 ffff ffff
0000320 ffff ffff ffff e6ff e6e6 9999 4d99 4d4d
0000340 0606 4c06 4c4c 9999 e799 e7e7 ffff ffff
0000360 ffff ffff ffff ffff ffff ffff ffff ffff
*
0000700 ffff ffff ffff ffff ffff 0000
0000714

Después de realizar experimentos con la información hexadecimal,  me estoy dando cuenta que este método no funciona  porque tengo los focos azules y verdes en la fila. 

----------------------------------------------------------------------------------------------------------------------

Un array es un medio de guardar un conjunto de objetos de la misma clase.

Segunda prueba de programación

Para programar este tablero existen métodos que combinan Processing, que funciona como interfaz gráfica y Arduino, que permite cargar la programación en el microcontrolador. Varios desarrolladores han creado librerías para controlar este dispositivo. Todos estos recursos son abiertos y modificables.

En la segunda prueba utilicé una librería llamada PeggyDraw2. Ésta es una aplicación de Processing que permite hacer animaciones sencillas dibujando sobre una cuadrícula de 25 x 25 puntos. La animación se guarda automáticamente como programa de Arduino listo para cargar en el tablero. Esta herramienta me permitió experimentar con formas simples en movimiento.

 -------------------------------------------------------------------------------------------------------------

Processing es un software libre creado por Casey Reas y Ben Fry que utiliza un lenguaje de programación orientado a creadores audiovisuales basado en Java.

PeggyDraw 2. Es una librería construida en Processing, open source y adaptabe creada por Windell H Oskay de Evil Mad Scientist Laboratories, y Matt Mets, de http://cibomahto.com.

Todos las librerías para controlar Peggy2 se encuentran en el depositorio de los creadores: https://code.google.com/p/peggy/downloads/list

Primera prueba de programación

En la primera prueba de programación experimenté con BMP2PEG. La aplicación permite convertir imágenes bitmap (formato .bmp) a un formato de sketch para  Arduino. La imagen utilizada no puede superar los 25 x 25 pixeles ya que es el espacio disponible físicamente en el tablero, aquí cada LED representa un pixel. Para ejecutarlo se corre el programa desde la terminal y se le administran los datos de la dirección donde se encuentra la imagen (input) y la dirección de salida (output) donde se creará el nuevo documento listo para guardar en la placa.
Con esta aplicación hice pruebas con formas geométricas básicas sin movimiento.  

 

Esta aplicación me funciona a medias pues me interesa generar movimiento, además el mapa de bits que crea no tiene definición de colores. La idea es que se reproduzcan figuras geométricas en movimiento y a color, como pequeños fragmentos a detalle de una composición. 

--------------------------------------------------------------------------------------------------------------

Un  mapa de bits o bitmap es una estructura que representa una rejilla rectangular de pixeles que se puede visualizar en un monitor u otro dispositivo de representación.

Como desactivar screeensaver en raspberry pi wheezy 7

Para desactivar el screen blank de raspbian es necesario instalar las utilidades del screensaver de raspbian.
Abrimos la terminal e instalarmos :
apt-get install pm-utils
apt-get install x11-xserver-utils

Para prevenir que el screen saver y ahorrador de energia se active
xset -dpms s off

Para desactivar el screensaver
xset s off
xset s noblank

Masking on processing

SKETCH RESUELTO


//


import processing.video.*;

color black = color(255);
color white = color(0);
int numPixels;
Capture cam;


void setup() {




  size(320, 240);
  strokeWeight(5);
  cam = new Capture(this, width, height, 24);
  numPixels = cam.width * cam.height;
  noCursor();
  smooth();

  cam.frameRate(12);
}


void draw() {
  if (cam.available()) {
    cam.read();
    int threshold= 70;
    float pixelBrightness;
    loadPixels();
    for (int i = 0;i < numPixels; i++) {
      pixelBrightness = brightness(cam.pixels[i]);
      if (pixelBrightness > threshold) {
        pixels[i] = white;
      }
      else {
        pixels[i] = black;
      }
    }

    updatePixels();
    int testValue = get(mouseX, mouseY);
    float testBrightness = brightness(testValue);
    if (testBrightness > threshold) {
      fill(black);
    }
    else {
      fill(white);
    };


    PImage Img = loadImage(

    "t.png");
    PImage Img2 = loadImage("r.png");

    cam.mask(Img);
    image(cam, 0, 0);
    image(Img2, 0, 0);
  }
}

Cero y uno

Aquí un sketch de processing que aún no logro exportar :(. Será un archivo ejectuable para mac y pc que despliegue un espacio gris en el que nuestro cursor tendrá un doble que se mueva en dirección contraria a éste. Si los dos cursores se llegan a tocar desaparecen.



PImage a;
int x;
int y;

void setup() {
  size(800, 600);


  a = loadImage("pointer.jpg");

}

void draw()
{


  background(102);

  image(a, x, y);
  x= width -mouseX;
  y= height -mouseY;

  if (x == mouseX && y == mouseY) {
    //||
    tint (0, 0, 0, 0);
    noCursor();
  }
  else {
    tint (255, 255, 255, 255);

    cursor(ARROW);
  }
}

Pienso en decisiones programadas, el si, el no, prendido, apagado, los caminos y el todo.

var a;
var x;
var y;

function setup() {
  createCanvas(displayWidth, displayHeight);


  a = loadImage("pointer.jpg");

}

function draw()
{


  background(102);

  image(a, x, y);
  x= width -mouseX;
  y= height -mouseY;

  if (x == mouseX && y == mouseY) {
    //||
    tint (0, 0, 0, 0);
    noCursor();
  }
  else {
    tint (255, 255, 255, 255);

    cursor(ARROW);
  }
}

Videos motores

En este video se puede ver los motores y todos los elementos conectados y funcionando correctamente.

El siguiente paso fue contar los pasos que puede dar el motor dentro del rango de la pantalla. Para lo que hice un sketch de arduino que ordenara al motor dar un paso trás otro al mismo tiempo que se iban contando.

int i;

#include

AF_Stepper stepper(200, 2);

//************

void setup()

{

Serial.begin(9600);

delay(8000);

}

void loop()

{

//Serial.println("FORWARD, SINGLE");

for (i=0; i<800; i++)

{

stepper.onestep (FORWARD, SINGLE);

delay(100);

Serial.println (i, DEC);

}

}

Después de varios conteos y sacar un promedio, el resultado fue de 600 pasos horizontales y 400 verticales, con un movimiento de .02 cm cada paso aprox.

En el siguiente video se puede ver el siguiente problema a resolver, pues los motores necesitan estar fijos a una base o entre ellos.

Sketch espiral

Aqui el código de processing de la espiral logarítmica

//

float s1=.01; //velocidad del giro

float f1=-HALF_PI; //establece la posicion en radianes

float x1, x2, x3, x4, y1, y2, y3, y4;

float r1, r2, r3, r4, r5, r6, r7, r8;

float a1= .618; //factores de proporcion

float a2= .382; //

float posicionX; // variable para resumir ubicacion en X

float posicionY; // variable para resumir ubicacion en Y

void setup() {

size (618, 382);

background(100);

stroke(180);

}

void draw() {

float w= width;

float h= height;

f1-=s1;

//centros de los circulos

x1= w*a1;

x2= x1+((w-x1)*a2);

x3= x2-((x2-x1)*a2);

x4=x3+((x2-x3)*a2);

y1= h*a1;

y2= y1+((h-y1)*a2);

y3= y2-((y2-y1)*a2);

y4= y3+((y2-y3)*a2);

//radios

r1= x1;

r2= y1;

r3= h-y1;

r4= x2-x1;

r5= x3-x1;

r6= y3-y1;

r7= x2-x4;

r8= y2-y4;

//variables de posicion y radio

float pX=x1;

float pY=h;

float r=r1;

line(x1, 0, x1, h);

line(x1, y1, w, y1);

line(x2, y1, x2, h);

line(x2, y2, x1, y2);

line(x3, y2, x3, y1);

line(x3, y3, x2, y3);

line(x4, y3, x4, y2);

line(x4, y4, x3, y4);

if (f1<-3.14){

pY=y1;

r=r2;

}

if (f1<-4.71){

pX=x2;

r=r3;

}

if (f1<-6.32){

pY=y2;

r=r4;

}

if (f1<-7.85){

pX=x3;

r=r5;

}

if (f1<-9.42){

pY=y3;

r=r6;

}

if (f1<-10.99){

pX=x4;

r=r7;

}

if (f1<-12.56){

pY=y4;

r=r8;

}

if (f1<-14.13){

s1=0;

}

posicionX= pX+sin(f1)*r;

posicionY=pY+cos(f1)*r;

point (posicionX, posicionY);

println(posicionX);

}

/*pivotes y radio

1 x1, h, r1

2 x1, y1, r2

3 x2, y1, r3

4 x2, y2, r4

5 x3, y2, r5

6 x3, y3, r6

*/

Masking in processing

Estoy intentando hacer una captura de video con una máscara que sólo deje ver la imagen capturada através de una tipografía. La idea es que el texto aparezca cuando la cámara capte la sombra de las personas, a ausencia de público, ausencia de palabras. El problema que tengo que es que la mask sólo le hace corte al efecto de captura de video. Estoy utilizando capas en .png para lograr la transparencia, pero al parecer processing toma al blanco como transparencia
Lo más cercano que he logrado a lo que quiero se ve así:

Aquí el código:

import processing.video.*;
color black = color(0);
color white = color(255);
int numPixels;
Capture cam;

void setup() {


size(320, 240);
strokeWeight(5);
cam = new Capture(this, width, height, 24);
numPixels = cam.width * cam.height;
noCursor();
smooth();

cam.frameRate(12);
}
void draw(){
if(cam.available()){
cam.read();
int threshold= 127;
float pixelBrightness;
loadPixels();
for(int i = 0;i < numPixels; i++){
pixelBrightness = brightness(cam.pixels[i]);
if (pixelBrightness > threshold){
pixels[i] = white;
}
else {
pixels[i] = black;
}
}
updatePixels();
int testValue = get(mouseX, mouseY);
float testBrightness = brightness(testValue);
if (testBrightness > threshold) {
fill(black);
} else {
fill(white);
};


PImage Img = loadImage(

"true.png");
cam.mask(Img);
image(cam,0,0);



}
}