For my final project, I really wanted to work with text and explore alternate ways of moving through a poem. I chose to focus on one of my favorite poets, pablo neruda, and chose his poem, Ode to Things, as it has a lot of beauty to it.

sketch

// ilona altman
// final project 
// section a 
// iea @ andrew.cmu.edu 
// this is a poem showcase of 

var odetothings;
let fromHere;
let toHere;
let thefont; //allegra sans from GoogleFont 
let poemletters = []; //array of letters 
let poem = "ode to things by neruda - "; // title of the poem
let reversedpoem = reverseString(poem); // reversed
let nextimageCount; //image counter 
let imagelinks= ['https://i.imgur.com/EiIMWxn.png', 
                'https://i.imgur.com/XCmsYws.png',
                'https://i.imgur.com/fQZf2Sc.png'];
let imagesofthings = []; // image array 
let currentThingImage; 


function preload() {
    //loading the text and the poem 
    odetothings = loadStrings("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/ode-2.txt");
    //thefont = loadFont('thefont.ttf'); (cannot figure out hot to upload font for WordPress)

    //loading the images
    for (l = 0; l < imagelinks.length; l++) {
        imagesofthings[l] = loadImage(imagelinks[l]);
        }
}


function setup() {
    createCanvas(450,640);
    //initializing variables 
    fromHere = 0;
    toHere = 14;
    nextimageCount = 0;
    nextimage = 0;

    //initial placement for letters in a circle 
    for (let i = 0; i < poem.length; i ++) {
        var radius = 120;
        var angle = i * TWO_PI/poem.length;
        var inputX = radius * sin(angle);
        var inputY = radius * cos(angle);
        var inputL = reversedpoem.charAt([i]);
        poemletters[i] = makeLetters(inputL, inputX, inputY);
    }
}

function draw() {
    background(255,255,255);

    //images rotating 
    push();
    imageMode(CENTER);
    rotate(frameCount/10000);
    currentThingImage = image(imagesofthings[nextimage],width/2,height/3);
    pop();
    //updating the position of the letters
    Update();
    // making sure that there is continuous text 
    if (toHere > odetothings.length){
        fromHere = 0;
        toHere = 14;
    }
    // the text on the bottom that runs through the poem
    for (var i = fromHere; i < toHere; i++) {
        textSize(14);
        //textFont(thefont);
        fill(150,190,150);
        var placeY  = 340 + (i%14) * 20
        text(odetothings[i], width/4, placeY);
    }



}

// reversing the string so the text is easier to read
function reverseString(str) {
    var splitting = str.split("");
    var reversing = splitting.reverse();
    var joined = reversing.join(""); 
    return joined;
}

// the object of each letter
function makeLetters(inputL, inputX, inputY) {
   var ltr =  {letter: inputL, 
            px: inputX, 
            py: inputY,
            showing: showLetters}; // draw the letter
    return ltr;
}

function showLetters() {
    push();
    translate(width/2, height/3.5);
    rotate(frameCount/1000);
    //textFont(thefont);
    textSize(30);
    textAlign(CENTER);
    fill(180,100,130);
    text(''+ this.letter, this.px, this.py);
    pop();
}

function Update() {
    for (var i = 0; i < poemletters.length; i++){
        poemletters[i].showing(); 
    }

}

// when the mouse is pressed, the text cycles through
function mouseClicked() {
    fromHere  =  fromHere + 14;
    toHere = toHere + 14;
    nextimageCount = nextimageCount + 1;
    nextimage = nextimageCount%3;

}

ode

For this final project, I would really like to work with generative text. I am interested in working with books that are already in the public domain, and instead of using my program to generate new text or rearrange old text, I want to use my program to specify where the letters should exist on the page. I would like the letter placement to reflect ecological data on the rising temperatures due to the climate crisis. I would like to create a reconstruction of a cultural artifact / book where ever page signifies another year into the future, and the letters y placement slowly increases according to the amount of degrees the temperature in the place that book was written will rise. I am interested in the fragility of human existence and human culture, and how all of human memory and collective history is threatened by the climate crisis.. I want to display this vulnerability with this modified version of a book.

https://www.itsnicethat.com/articles/bleed-blank-architects-graphic-design-201017

https://en.wikipedia.org/wiki/Georg_Nees

For my final project, I want to create generative placement of text letters based on data received from the projected temperature rise from different areas around the world. The data from the specific place which the classic book is from its fed into a program which determines its placement for each page of the book. Each page represents moving forward one year.

I was having trouble finding other artists who have worked with APIs to generate the placement of text, but I did find two artists whose work is of interest to me and relevant to my final project. The first is Georg Nees, who was an early pioneer of generative art. His piece, Gravel, provides a sort of visualization of the progressive instability I am envisioning for this work.

Bleed, a design consulting firm also has some projects that involve generative text and processes based within nature that are interesting to me and relevant to my work. For example, as quoted in the Its Nice That article, “Bleed took the Albert Einstein quote “look deeper into nature, and you will understand everything better,” as a concept but also a tool so that every time a character from the sentence is typed, a sphere is formed using a certain amount of triangles.”

I am interested in how the movement and placement of typography could be conceptually linked to broader ideas of nature.

sketch

let flowers = [];
let grass = [];
let clouds = [];

function setup() {
    createCanvas(600,600);
    //inital placement for flowers
    for (let i = 0; i < 50; i++) {
        let firstX = random(width);
        let firstY = random(height);
        flowers[i] = makingFlower(firstX,firstY)
    }
    // inital placement for grass
    for (let gx = 0; gx < 400; gx++) {
        let grassX = random(width);
        let grassY = random(height);
        grass[gx] = makingGrass(grassX,grassY);
    }
    // initial placement for clouds
    for (let j = 0; j < 7; j++)  {
        let cloudx = random(width);
        let cloudy = random(height);
        clouds[j] = makingCloud(cloudx, cloudy);
    }
}

function draw() {
    background(105,130,80);
    //drawing the grass
    updateAndDisplayGrass();
    addingGrass();
    removingGrass();
    //drawing the flowers
    updateAndDisplayflowers();
    addingFlowers();
    removingFlowers();
    // drawing the clouds
    updateAndDisplayClouds();
    addingClouds();
    removingClouds();
}



////////////////////////////////////flowers//////////////////////////
///removing flowers from the array once they go off screen
function removingFlowers() { 
    var keeping = [];
    for (var i = 0; i < flowers.length; i++) {
        if (flowers[i].x + flowers[i].r > 0) {
            keeping.push(flowers[i]);
        }
    }
    flowers = keeping; //keeping certain flowers in the flowers array
}
//update all the flowers in the array
function updateAndDisplayflowers(){
    for (var i = 0; i < flowers.length; i++){
        flowers[i].move();
        flowers[i].display();
    }
}
//adding new flowers to the array according to a certain liklihood
function addingFlowers() {
    var newflowerliklihood = 0.05;
    var initialX = random(width);
    var initialY = 0;
    if (random(0,1) < newflowerliklihood) {
        flowers.push(makingFlower(initialX,initialY));
    }
}
//the flower object
function makingFlower(firstX,firstY) {
    var flr = {x: firstX,
                y: firstY,    
                r: round(random(10,40)),
                move: moveflowers,
                display: showflowers}
    return flr;
}
//specifying the drawing of the flower
function showflowers() {
    noStroke();
    fill(230, 80, 50); //red petals
    ellipse(this.x+3, this.y, 3, 4);
    ellipse(this.x-3, this.y, 3, 4);
    ellipse(this.x, this.y-3, 3, 4); 
    ellipse(this.x, this.y+3, 3, 4);   
    fill(230, 130, 50); // orange center 
    ellipse(this.x, this.y, 5, 5);
    fill(90, 40, 30); // red inner center
    ellipse(this.x, this.y, 1, 1);
}
//speciftying the movement of the flower
function moveflowers() {
    this.y = this.y + 1
}
/////////////////////////////////// grass////////////////////////////////
function removingGrass() {
    var keepingGrass = [];
    for (var i = 0; i < grass.length; i++) {
        if (grass[i].x > -10) {
            keepingGrass.push(grass[i]);
        }
    }
    grass = keepingGrass; 
}
function updateAndDisplayGrass(){
    for (var i = 0; i < grass.length; i++){
        grass[i].move();
        grass[i].display();
    }
}
function addingGrass() {
    var newgrassliklihood = 0.5;
    var initialX = random(width);
    var initialY = 0;
    if (random(0,1) < newgrassliklihood) {
        grass.push(makingGrass(initialX,initialY));
    }
}
function makingGrass(grassX,grassY) {
    var gss = {x: grassX,
                y: grassY,    
                move: moveGrass,
                display: showGrass}
    return gss;
}
function showGrass() {
    strokeWeight(random(1,2));
    stroke(130,160,140);
    line(this.x, this.y, this.x-2, this.y+2);
}
function moveGrass() {
    this.y = this.y + 1
}
/////////////////////clouds///////////////////////////////////////////////
function removingClouds() {
    var keepingClouds = [];
    for (var i = 0; i < clouds.length; i++) {
        if (clouds[i].x > -10) {
            keepingClouds.push(clouds[i]);
        }
    }
    clouds = keepingClouds; 
}
function updateAndDisplayClouds(){
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}
function addingClouds() {
    var newcloudliklihood = 0.02;
    var initialX = random(width);
    var initialY = 0;
    if (random(0,1) < newcloudliklihood) {
        clouds.push(makingCloud(initialX,initialY));
    }
}
function makingCloud(cloudX,cloudY) {
    var cld = {x: cloudX,
                y: cloudY,    
                move: moveCloud,
                display: showCloud}
    return cld;
}
function showCloud() {
    noStroke();
    fill(150,180,190,20); // light blue
    beginShape();
    vertex(this.x , this.y);
    quadraticVertex(this.x - 236, this.y - 351 , this.x + 7 , this.y - 357);
    bezierVertex(this.x -17, this.y -215, this.x + 132, this.y + 180, this.x, this.y);
    endShape(CLOSE)
}
function moveCloud() {
    this.y = this.y + 3
}

For this project, I was really inspired by the prompt of looking outside of a window. I love flowers and the peacefulness of watching clouds pass. I also love the colors in Gustav Klimpt’s landscapes, so I really wanted to incorporate this into my project, as well as get some practice drawing curves.

Allison Parish is an artist who is currently based in Brooklyn, New York, where she works at NYU as a professor in their  Interactive Telecommunications Program (ITP). There, she teaches classes like Computational Approaches to Language. Most of her work seems to deal with poetry, and generative explorations of poetic space and poetic exploration. I couldn’t find for some reason any information on her undergraduate background, but I did find that she attended NYU’s ITP program in 2008.

A good example of her work is the twitter bot, The Ephemerides, which is a reflection of generative poetry exploring new frontiers, just as physical space probes explore the physical space around us –

This work was first made in 2015, though it has made posts up through 2019. I admire the aspect of this project that it exploration for the sake of exploration, and the simple contraction of the poems. Some of them are very beautiful. As a critical note however, I feel this project could have been pushed a little bit more, as the connection between the exploration of physical and metaphysical space and the simple diptych almost feels too surface level / maybe there could one been a more complex relationship going on between the images and the text.

really cool Allison Parish transcript – http://opentranscripts.org/transcript/semantic-space-literal-robots/

Allison Parish portfolio – http://portfolio.decontextualize.com

sketch

//ilona altman
//project 10
//iea@andrew.cmu.edu

//var music; // this is some background music I made myself 
var music1; // pieces of interview on narrative vs poetic filming
var music2; // excerpt from as I was moving ahead occasionally I saw breif glimpses of beauty
var music3; // advice to the young
var music4; //except from the begining of his film lost lost lost 
var theImage; // this is the background image 

function preload() {
//music = loadSound('music0.mp3'); // preloading sound
music1 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/music1.mp3')
music2 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/music2.mp3')
music3 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/music3.mp3')
music4 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/music4.mp3')
var myImageURL = "https://i.imgur.com/nyJdNSY.png"; //image
theImage = loadImage(myImageURL); //image
}

function soundSetup() { // setup for audio generation
}

function setup() {
    createCanvas(600,600);
    background(255,255,255);
    noStroke();
    frameRate(20);
    theImage.loadPixels(); //loading the image pixels
    useSound(); //sound 
  //  music.play(); //sound 
   // music.loop(); //loop the sound
}

function draw() {
//going through all pixels of jonas mekas attriubution 
background(255,255,255);
for (x = 0; x < width+10; x++) {
    for (y = 0; y < height+10; y++) {
    var pixelColorXY = theImage.get(x,y);
    fill(pixelColorXY);
    ellipse(x, y, random(0,2), random(0,2));
    } 
}
//creating red rain 
for (x = 0; x < width+10; x=x+10+random(3,10)) {
    for (y = 0; y < height+10; y=y+10+random(3,10)) {
    fill(255,0,0);
    ellipse(x, y, random(0,2), random(0,3));
    ellipse(x-1,y-1,random(0,2), random(0,3));
    ellipse(x+1,y+1,random(0,2), random(0,3));
    } 
}

}


function mousePressed() {
    if (mouseX > width/2 & mouseY > height/2) { // left top
        music1.play();
    } else if (mouseX > width/2 & mouseY < height/2) { // left bottom
        music2.play();
    } else if (mouseX < width/2 & mouseY > height/2) { // right top
        music3.play();
    } else if (mouseX < width/2 & mouseY < height/2) {// right bottom
        music4.play();
    } 
}

http://jonasmekas.com/diary/

This work was inspired very much by Jonas Mekas, who is one of my favorite artists and filmmakers… He past away about a year ago but still holds such a warm presence. He speaks often about beauty and poetry. I wanted this piece to almost be like a little tribute to him and his work, with sounds pulled from various interviews with him and his films.

• I think it is interesting how musicality seems to be intrinsically tied to emotion. Just as we anthropomorphize visual stimuli, it seems there is a tendency to process notes in a way that reveals the interior subjectivity of that producing the noise. This makes me think about how perhaps music was our first language, and a study I saw that spoke about how the musicality of peoples voices when saying things (in anger, or speaking to babies) is similar across all languages, and that this may be one of the first ways we understand the world’s communication with us… I admire that this work was able to, in such a simple set up, touch on these concepts of musicality, emotion and projecting emption on to technology.
• I would suppose that the algorithm used to generate this work was made by breaking down a note analysis of a singer who sag this song, and than repeating these notes by a computer, which holds them for the specified amount of time noted by the original recording.
• The artist’s sensibility for humor definitely showed through this work with the song choice. It is also clear they have a bend toward minimalism, and it is this minimalism which strengthened the conceptual exploration of this work.

http://www.everydaylistening.com/articles/2015/7/20/what-do-machines-sing-of.html

sketch

var theImage;

function preload() {
    //loading my image
    var myImageURL = "https://i.imgur.com/3SFfZCZ.jpg";
    theImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    background(250,250,250);
    theImage.loadPixels();

    // going through each pixel 
    for (x = 0; x < width+10; x = x+3) {
        for (y = 0; y < height+10; y = y+2) {
            var pixelColorXY = theImage.get(x, y);
            if (brightness(pixelColorXY) >= 0 & brightness(pixelColorXY) <= 20) {
                //light pink
                stroke(255,230,230,70);
                line(x, y, x-1,y-1);
            } else if (brightness(pixelColorXY) >= 20 & brightness(pixelColorXY) <= 50) {
                //orange
                stroke(250,170,160);
                line(x, y, x+3, y+3);
            } else if (brightness(pixelColorXY) >= 50 & brightness(pixelColorXY) <= 55) {
                //pink
                stroke(230,130,160);
                line(x, y, x+3, y+3);
            } else if (brightness(pixelColorXY) >= 55 & brightness(pixelColorXY) <= 60) {
                // light green
                stroke(180,195,200);
                line(x, y, x-1,y-1);
            } else if (brightness(pixelColorXY) >= 65 & brightness(pixelColorXY) <= 70) {
                //yellow orange
                stroke(235,180, 100);
                line(x, y, x-2, y-2);
            } else if (brightness(pixelColorXY) >= 75 & brightness(pixelColorXY) <= 85) {
                //blue
                stroke(196,130,130);
                line(x, y, x-1, y-1);
            } else if (brightness(pixelColorXY) >= 85 & brightness(pixelColorXY) <= 95) {
                //dark red
                stroke(220,80,80);
                line(x, y, x-1, y-1);
            } else if (brightness(pixelColorXY) >= 95 & brightness(pixelColorXY) <= 110){
                //pink
                stroke(220,69,90);
                line(x, y, x+2, y+2); 
            } else if(brightness(pixelColorXY) >= 110 & brightness(pixelColorXY) <= 130){
                //medium blue
                stroke(80,130,60);
                line(x, y, x+1, y+1); 
            } else if (brightness(pixelColorXY) >= 130 & brightness(pixelColorXY) <= 160){
                //light orange
                stroke(220,170,130);
                line(x, y, x+1, y+1);
            } else if (brightness(pixelColorXY) >= 130 & brightness(pixelColorXY) <= 160){
                //light orange
                stroke(202,70, 100);
                line(x, y, x+1, y+1);
            } else if (brightness(pixelColorXY) >= 160 & brightness(pixelColorXY) <= 190){
                //white
                stroke(255,255, 255);
                line(x, y, x+3, y+3);
            } else if (brightness(pixelColorXY) >= 190 & brightness(pixelColorXY) <= 220){
                //yellow
                stroke(150,130, 90);
                line(x, y, x+3, y+3);
            } else if (brightness(pixelColorXY) >= 220 & brightness(pixelColorXY) <= 255){
                //yellow
                stroke(200,60,60);
                line(x, y, x+3, y+3);

            }
         
         }   
    }

}
function draw() {

}

In this project, I was thinking about memories with my family and about my grandma. I took some photos this summer of her teaching the rest of my family how to make Lithuanian dumplings. In my psychology class it is interesting because we have been learning about how distortion happens to what we remember over time. This is why I chose to make my image a bit distorted, and not so clear. I also love gradient maps, and wanted to emulate this with this piece. Yellow, green and red are the colors of the Lithuanian flag as well.

I agree very much with Yoshi that this project is very beautiful and incredibly in they way it is effective for a specific user.  I think it is interesting how something so useful could also be formally beautiful, and that there would be a commercial incentive toward computer generated forms because of the ease in which they can be individualized.  It is interesting to me that the same forms which occur in nature can be used in the design process, and that there is a warmth inherent to structures that. Resemble natural forms.. I think it is beautiful that there is such a deep relationship between growing natural forms and a sort of. Geometry that unifies that which exists within nature. This makes me think about fractals and sacred geometry. 

I think it could have been interesting if the entire shoe, instead of just the sole, was constructed in this way… 

Refik Anadol is an artist who was born in Istanbul in 1985. He studied photography in college and also received two MFAs, one of which in Design and Media Arts (DMA) at UCLA. Right now, he is a guest researcher at UCLA’s DMA department, and so works based out of Los Angelos. He describes himself as a media artist and spatial thinker, and often his pieces are embedded within and relate to architecture. As articulated beautifully on his website, “He invites the viewers to visualize alternative realities by presenting them the possibility of re-defining the functionalities of both interior and exterior architectural formations. Anadol’s work suggests that all spaces and facades have potentials to be utilized as the media artists’ canvases.” Many of his works are housed in public environments and integrate abstract data visualization.

Anadol seems very interested in the imagination, as well as visualizing what is usually invisible and the creative possibilities between digital, conceptual structures and the physical world. I admire the way he talks about his work, always sharing his diverse sources of information. I admire how much possibility technology has, and how he uses digital media to its strengths/ processing incredibly large, complicated amounts of data. I love how he talks about information and life, relating the two of them as conceptual structures that organize physical and immaterial data. I really love his project, Archive Dreaming, which takes information from a library data base, and allows a person to walk through every piece of data in a macro structure, and notice the patterns in how the neural network organized this incredible mass of data. Technology is embraced as a tool that can allow for new ways to engage with history; I find this incredibly beautiful.

The way that he has documented his projects is also incredible – there is always a nondescript person in the documentation to give a size reference, he often will use quotes to describe the theoretical underpinnings of his work, and he also has many videos revealing the dynamic motion of his pieces. I definitely have so much to learn from his clean documentation, as well as how clear he is with his process.