Proyecto Cuatrimestre II
Maestría En Artes Electrónicas - Untref- Prof. Augusto Zanela
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 hechos 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, surge el interés de plasmarlas, cristalizándolas en otros soportes , como el video o la cerámica.
Antecedentes
El pasado cuatrimestre, 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 mis conocimientos sobre css , html y js, resultaron limitados, para ese momento.
La idea, entonces fue hacer unos videos y escanear imagenes de mis anteriores trabajos para animarlos en processing y no perder el sentido de lo que quería expresar.
El siguiente video muestra los primeros códigos que ensayé y los resultados que
para ese momento no fueron los esperados:
Primero busqué cómo 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();
}
Luego probé un código donde debe cargarse una imagen con una textura, y sobre ésta se teclea un texto; el formato se carga, pero la imagen y el texto se interfieren .
/**
* 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;
}
}
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.
De todas formas, la busqueda continua.
Impresiones: Periódico sobre cerámica
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 hechos 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, surge el interés de plasmarlas, cristalizándolas en otros soportes , como el video o la cerámica.
Antecedentes
Antecedentes
El pasado cuatrimestre, 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 mis conocimientos sobre css , html y js, resultaron limitados, para ese momento.
El siguiente video muestra los primeros códigos que ensayé y los resultados que
La idea, entonces fue hacer unos videos y escanear imagenes de mis anteriores trabajos para animarlos en processing y no perder el sentido de lo que quería expresar.
El siguiente video muestra los primeros códigos que ensayé y los resultados que
para ese momento no fueron los esperados:
Primero busqué cómo 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();
}
Luego probé un código donde debe cargarse una imagen con una textura, y sobre ésta se teclea un texto; el formato se carga, pero la imagen y el texto se interfieren .
/**
* 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;
}
}
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.
De todas formas, la busqueda continua.
Impresiones: Periódico sobre cerámica
+11:11.jpg)
+11:12.jpg)
+11:14.jpg)
+11:15.jpg)
+11:20.jpg)
+11:21.jpg)
+11:16.jpg)