ICONOGRAFIA DE LA COTIDIANIDAD
Razón de ser
Este proyecto surge de la necesidad de rescatar ciertos instantes que la prensa escrita publica y que por el hecho de quedar impresos sobre el papel, su valor esta dado por el momento en que suceden y por las circunstancias que rodean los hechos.Sin embargo, esa imagen que rescata el instante único en que se suceden los hechos, tiene además un valor gráfico y plástico, ya que posee una carga visual tan fuerte que habla por si sola. De allí la motivación de rescatarlas, editandolas en un soporte menos perecedero.
Son este tipo de imágenes las que pese a su carácter efímero, encierran en su relación causa-efecto otros que cualquier dia de mañana y en cualquier instante reaparecen y su resultado final es una historia, o "la historia".Una historia que se escribe directamente o entre lineas y que en algunos casos nos da casi una lectura premonitoria de lo que ocurrirá en algún mañana.Estos instates donde convergen el ayer y el mañana de una manera tan transparente y efímera, son los que captan mi interés. Como quiera que su caracter es doblemente efímero, primeo porque son parte de una cadena que se sucede dia a dia sin cesar y segundo, porque quedan impresos en un soporte poco resistente.
Al plantearme una propuesta estética para este trabajo en soporte pantalla,consideré dos opciones: La primera en HTML y la segunda en processing; En HTML y Js, ensayé un código que nos enseño Rodrigo Derteano, por medio del cual se pueden llamar llamar las imagenes, los encabezados y los textos de las noticias de los diferentes diarios:
$(document).ready(function(){
$('#search-form').submit(function(){
var frase = $('.search-field').val();
//alert(frase);//muestra la busqueda para ver si esta bien codeado
if (frase != ''){ //si frase no es igual a nada hace la google image search
if (typeof(intervalo) != 'undefined'){
clearInterval(intervalo);
$('.slide-wrap').empty();
}
slide_de_imagenes(frase);
}
return false;//hace que no se recargue la pagina al usar el form
});
});
function slide_de_imagenes( frase ) {
//var frase = encodeURIComponent(frase);
var url = "https://ajax.googleapis.com/ajax/services/search/images?callback=?";
var params = {
q:frase,
v:'1.0',
rsz: 8,
start: 8,
};
$.getJSON(url, params,function(data){
console.log(data);
armar_slides(data.responseData.results);
//$("body").append('<img src="'+data.responseData.results[3].url+'">');
});
}
function armar_slides(results) {
start = -1;
intervalo = setInterval(function(){
$('.imagen-'+start).fadeOut('fast',function(){
$(this).remove();
});
start ++;
if (typeof(results[start]) == 'undefined') {
start = 0;
}
$('.slide-wrap').append('<img width="500" src="'+results[start].url+'" class="imagen-'+start+'" style="display:none; position:absolute; top:0; left:0">');
$('.imagen-'+start).fadeIn('fast');
}, 2000);
}
pero aunque carga las imágenes y lo que se llame, las noticias no se presentan con diseño de pagina y su estilo de redacción es demasiado escueto. y circulan por la pantalla en bandas lineales que no resultan inovadoras ni atractivas a nivel de diseño. Por lo tanto se precisa de un diseño de la presentación;
con lo cual los conocimientos sobre css , html y js, son algo limitados, por el momento.
La idea, entonces fue hacer unos videos y tomar imagenes de mis anteriores trabajos para animarlos en processing y darle dinamismo a las noticias;
Primero busque como cargar imágenes:
float x;
PImage photo;
void setup() {
size(400, 590);
x = width;
photo = loadImage("pielnueva.jpg");
}
void draw() {
background(0);
image(photo, x, 0);
if (x > 0)
x = x - 1;
}
Hasta ahi, la imagen cargaba y se deslizaba sobre el background negro.
luego busque un codigo que cargara un background image y el
aviso de periodico:
// http://funprogramming.org/51-Convert-float-into-int-and-animate-a-photo.html
// What preload does is preparing an image you want to use in a sketch.
// It's only required when using processing.js on a web page. It's not
// useful when working with Processing installed on your computer.
// It's required because getting an image from the internet can take
// a few seconds, and you want the image to be ready before you start
// the program. @pjs preload does that for you.
/* @pjs preload=("victoria11.jpg"); */
PImage photo;
float a = 0;
void setup() {
size(90, 300);
photo = loadImage("victoria11.jpg");
background(40);
stroke(255);
}
void draw() {
int y = int(map(noise(a), 0, 1, 0, 200));
copy(photo,50, y,300,300, 0,100, width, 100);
line(0, 100, width, 100);
line(0, 200, width, 200);
a = a + 0.01;
}
El anterior copia fragmentos de la imagen cargada en data, pero no sabia como cargar los textos.
Despues encontre un código que crea una forma sobre la cual se carga el texto de la noticia del periódico; esto se aproxima mas a la imagen que busco.
/**
* Texture 3.
*
* Load an image and draw it onto a cylinder and a quad.
*/
int tubeRes = 32;
float[] tubeX = new float[tubeRes];
float[] tubeY = new float[tubeRes];
PImage img;
void setup() {
size(1280, 960, P3D);
img = loadImage("periodic.jpg");
float angle = 270.0 / tubeRes;
for (int i = 0; i < tubeRes; i++) {
tubeX[i] = cos(radians(i * angle));
tubeY[i] = sin(radians(i * angle));
}
noStroke();
}
void draw() {
background(0);
translate(width / 2, height / 2);
rotateX(map(mouseY, 0, height, -PI, PI));
rotateY(map(mouseX, 0, width, -PI, PI));
beginShape(QUAD_STRIP);
texture(img);
for (int i = 0; i < tubeRes; i++) {
float x = tubeX[i] * 300;
float z = tubeY[i] * 300;
float u = img.width / tubeRes * i;
vertex(x, -300, z, u, 0);
vertex(x, 300, z, u, img.height);
}
endShape();
beginShape(QUADS);
texture(img);
vertex(0, -100, 0, 0, 0);
vertex(100, -100, 0, 100, 0);
vertex(100, 100, 0, 100, 100);
vertex(0, 100, 0, 0, 100);
endShape();
}
Pero se trataba de que se pudiera crear un background con una textura de las que he usado en el tema de los bienes raíces para
que la propuesta estética tambien enfatize el sentido de la obra.
inicialmente, pensé en un video sobre el cual se proyectaran los avisos , de manera que pudieran variar tanto el background como el foreground.
Hice un video al que intentaba hacerle pasar las imagenes del periódico y encontré varios códigos para tal efecto:
import processing.video.*;
Movie myMovie;
void setup() {
size(640, 368);
myMovie = new Movie(this, "gotas.mov");
myMovie.play();
}
void draw() {
image(myMovie, width, height);
}
void movieEvent(Movie m) {
m.read();
}
Allí carga el sonido pero no la imagen, y de todas formas resulta muy pesado por lo que hay que reducirle el formato. Se redujo el formato, de 960 a 640, pero aun arroja error en
image(myMovie, width, height);
Dice arrayIndexOutOfBoundException: coordinate out of bounds!
y le cambio las coordenadas pero no funciona porque solo carga el sonido.
image(myMovie, width, height);
Simultaneamente probé otros códigos tales como:
/**
* Typing (Excerpt from the piece Textension)
* by Josh Nimoy.
*
* Click in the window to give it focus.
* Type to add letters and press backspace or delete to remove them.
*/
int leftmargin = 10;
int rightmargin = 20;
String buff = "";
boolean didntTypeYet = true;
PImage img;
void setup()
{
size(1280, 960, P3D);
textFont(loadFont("Univers45.vlw"), 25);
img = loadImage("PIEL NUEVA.jpg");
}
void draw()
{
img = loadImage("PIEL NUEVA.jpg");
if((millis() % 500) < 250){ // Only fill cursor half the time
noFill();
}
else {
fill(255);
stroke(0);
}
float rPos;
// Store the cursor rectangle's position
rPos = textWidth(buff) + leftmargin;
rect(rPos+1,40,80,90);
// Some instructions at first
if(didntTypeYet) {
fill(0);
//text("Use the keyboard.",60,90);
}
fill(0);
pushMatrix();
translate(rPos,10+25);
char k;
for(int i = 0;i < buff.length(); i++) {
k = buff.charAt(i);
translate(-textWidth(k),0);
rotateY(-textWidth(k)/70.0);
rotateX(textWidth(k)/70.0);
scale(1.1);
text(k,0,0);
}
popMatrix();
}
void keyPressed()
{
char k;
k = (char)key;
switch(k){
case 8:
if(buff.length()>0){
buff = buff.substring(1);
}
break;
case 13: // Avoid special keys
case 10:
case 65535:
case 127:
case 27:
break;
default:
if(textWidth(buff+k)+leftmargin < width-rightmargin){
didntTypeYet = false;
buff=k+buff;
}
break;
}
}
Que no resulta exitoso porque no carga la imagen como tal y si deforma las letras.
De todas formas, la busqueda continua.



No hay comentarios:
Publicar un comentario