Month: April 2019

I really never know how to title these posts. Basically, I was up late at night after toying around with three other ideas for generative text output projects and I got an idea for something totally different which led to me making the google search for “cartoon kid reading”. I then got this totally unrelated picture of two people, in each other’s arms, looking at their phones, underneath the stars and constellations. I absolutely loved this photo. The aesthetic was beautiful and I immediately wanted to incorporate it into my sketch. Plus, I hadn’t yet experimented with loading a photo into processing, so I would get that skill too.

Now how would this incorporate text? There was an obvious element of astrology in this photo and when I followed the picture to its source, I found the article, “Why millenials are so into astrology?” I started taking words and phrases from that article and inputting them into a word document:

“The New Age of Astrology” “Millenial and Gen Z Quotient” “Horoscopes in the Backs of Magazines”

I imported that text into the screen and made it seem like it was coming out of the iPhone and into the guy’s head. And as they fade out of sight (and off screen), they loop back around, each phrase going at a different speed and at a different size, randomized by processing.

This work wasn’t really about, like, making something happen for me. It was more about the aesthetic and the atmosphere that the work of art instilled in me when I saw it. I had thought about making the text do something, with a mouse press or a release, or something, but I think that would have taken away from the art.

Here’s the video:

Here’s the main code:

PImage img;
PFont f;

float x = 70;
float y = 230;
int space = 30;
int fade = 255;



Text lines[];

void setup() {
  f = createFont("Courier", 44);

  size(1000, 680);
  img = loadImage ("astrology.jpg");
  String[] textLines = loadStrings("text.txt");
  lines = new Text[textLines.length];
  for (int i = 0; i < lines.length; i++) {
    lines[i] = new Text(textLines[i], x + i*space/2, y + i*space);
  }
}

void draw() {

  scale(.7);    // setting up the background image, note that scalge is fine for this project but not ideal for the future
  image(img, 0, 0);

  for (int i = 0; i < lines.length; i++) {
    lines[i].run();
  }
}

Here’s the class:

class Text {

  float x;
  float xHome = 85;
  float y;
  float speed;
  int fade = 255;
  float fadeAdjustment = 2.3;
  int space;
  int lines = 8;
  String text;
  int size = int(random(15, 25));


  Text(String t, float _x, float _y) {
    text = t;
    x = _x;
    y = _y;
    speed = random(1.6, 4.8);
  }


  void display() {

    pushMatrix();
    textAlign(LEFT);
    rotate(-.1);
    textSize(size);
    fill(255, fade);
    text(text, x, y);
    popMatrix();
  }


  void update() {
    x+= speed;
    fade -=  fadeAdjustment;
  }

  void checkEdges() {

    if (y>height) {
      y=0;
    }
    if (y<0) {
      y=height;
    }
    if (x>800) {
      x=xHome;
      fade=255;
    }
  }


  void run() {
    display();
    update();
    checkEdges();
  }
}

 

Here’s credit to the article and the artist is Maura Dwyer. Also, cheers to Jack and Aaron for meeting with me <3

I really liked the idea of the text making a word out of random letters in the air. I tried to make a similar thing, but the word is always the same 😀

When the program starts the letters float on the screen. As soon as the mouse is pressed, they make a word in the center of the screen. I made sure that the letters won’t get out of bounds.

Here is the code:

String word = "hello world";
letters[] l1;

void setup() {
  size(640, 640);

  l1 = new letters[word.length()];
  for (int i =0; i<word.length(); i++) {
    l1[i] = new letters(word.charAt(i), width/3 +i*25, height/2);
  }
  //String word = "Hello";
}
void draw() {
  background(255);
  for (int i =0; i<word.length(); i++) {
    if (mousePressed) {
      l1[i].print();
      l1[i].returnBack();
    } else {
      l1[i].print();
    }
  }
}
class letters {
  char symbol;
  float x;
  float y;
  char c;
  float randX, randY;
  float originx, originy;
  letters(char _c, float _x, float _y) {
    x = _x;
    y = _y;
    c = _c;
    originx = x;
    originy = y;
    randX = random(-3, 3);
    randY = random(-3, 3);
  }
  void print() {
    fill(0);
    textSize(36);
    textAlign(CENTER);
    text(c, x, y);
    x += randX;
    if (x>= width || x <=0) {
      randX = -randX;
    }
    y += randY;
    if (y>= height || y <=0) {
      randY = -randY;
    }
  }
  void returnBack(){
    float deltaX = (originx - x)/3;
    float deltaY = (originy - y)/3;
    x += deltaX;
    y += deltaY;
  }
}

And here is a video:

For this week’s assignment, I created a little meaningless piece BUT with our favorite picture of Aaron. If the mouse is released, all of little Aarons wonder around, but when the mouse is pressed, all of them  (after a little hustle) form the word APPLES.

At first, I wanted to make the objects have a steering behavior (Shiffman has a great video with this). In theory, I understood the concepts and code, but when it came to implementing it on all of the objects that form the letters, not just one, I could not make it work. I was a little stubborn to admit that I bit off a little bit more than I could chew and only after a looong period of trying I had to go with something more familiar. Therefore the code is widely based on Aaron’s code we saw in class, with a little bit more playfulness and variations in the behavior. Spending some time, however, on understanding the steering was a great teaching moment, and yesterday’s full-on frustration turned to today’s motivation to actually make it work for another project.

 

 

And this is a little bonus not connected to the assignment, just a simpler version of what I was trying to do according to Shiffman’s code, but kind of failed to apply on a bigger scale.

The code and class for Formation of Aarons:

import geomerative.*;
RFont font;
RPoint[] pnts;
Photo[] formation;
PImage aaron, greenB;

void setup() {
  size(640, 360);

  //load the bckg image
  greenB = loadImage("green.jpg");


  //initialize and load the data (font)
  RG.init(this);
  font = new RFont("CaviarDreams.ttf", 150, RFont.CENTER);

  //get the points APPPLES out of the data
  pnts = getPoints("APPLES");


  int amountPerPoint = 1;

  //use the class
  formation = new Photo[pnts.length*amountPerPoint];


  int index = 0;
  for (int i=0; i<pnts.length*amountPerPoint; i+=amountPerPoint) {
    for (int j=0; j<amountPerPoint; j++) {
      int k = i+j;
      formation[i] = new Photo(width/2+pnts[index].x+random(-3, 3), height/1.5+pnts[index].y+random(-3, 3));
    }
    index++;
  }
}


void mousePressed() {
  for (int i =0; i<formation.length; i++) {
    formation[i].seek=true;
  }
}
void mouseReleased() {

  for (int i =0; i<formation.length; i++) {
    formation[i].xSpeed = random(-5, 5);
    formation[i].ySpeed = random(-5, 5);
    formation[i].seek=false;
  }
}
void draw() {
  background(0);
  image(greenB, 0, 0);
  for (int i=0; i<formation.length; i= i+2) {
    formation[i].seekHome();
    formation[i].update();
    formation[i].display();
    formation[i].checkEdges();
  }
}

RPoint[] getPoints(String str) {
  RCommand.setSegmentLength (10);
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);
  RGroup grp;
  grp = font.toGroup(str);
  grp = grp.toPolygonGroup();
  return grp.getPoints();
}

 

class Photo {
  float x, y, homeX, homeY;
  float xSpeed, ySpeed;
  boolean seek;
  char letter;
  PImage aaron;

  Photo(float _x, float _y ) {
    homeX = x = _x;
    homeY = y = _y;
    xSpeed = ySpeed = 0;
    // diam = _diam;
    seek = true;
  }

  void update() {
    x += xSpeed;
    y += ySpeed;
    xSpeed *= .95;
    ySpeed *= .95;

    aaron = loadImage("aaron.png");
  }

  void display() {
    aaron.resize(25, 50);
    image(aaron, x, y);
  }

  void seekHome() {
    if (seek) {
      float dirX = homeX-x;
      float dirY = homeY-y;
      dirX*=.05;
      dirY*=.05;
      xSpeed+=dirX;
      ySpeed+=dirY;
    }
  }

  void checkEdges() {
    if (y>height) {
      y=0;
    }
    if (y<0) {
      y=height;
    }
    if (x>width) {
      x=0;
    }
    if (x<0) {
      x=width;
    }
  }
}

Flying Aaron Code:

Vehicle vehicleA;
PImage blackhole;


void setup() {
size(640, 360);

vehicleA = new Vehicle(width/2, height/2);
blackhole = loadImage("black hole.jpg");

}

void draw(){
 background(0);
 image(blackhole, 0, 0);
vehicleA.update();
vehicleA.seek(new PVector(mouseX, mouseY));
vehicleA.display();

}

class Vehicle {
  float maxSpeed;
  float maxForce;
  float r;
  PImage a;
  PVector location, target, desired, velocity, acceleration;
  boolean mouseClose;


  Vehicle (float x, float y) {
    maxSpeed = 4;
    maxForce = 0.1;
    mouseClose = false;
    acceleration = new PVector(0, 0);
    velocity = new PVector(0, -2);
    location = new PVector(x, y);
  }


  void update () {

    //updated velocity
    velocity.add(acceleration);

    //to limit the speed
    velocity.limit(maxSpeed);
    location.add(velocity);

    //(come back to zero)
    acceleration.mult(0);

    a = loadImage("aaron.png");
  }

  void applyForce(PVector force) {
    //Q
    acceleration.add(force);
  }

  void seek (PVector target) {

    PVector desired = PVector.sub(target, location);
    desired.normalize();
    desired.mult(maxSpeed);

    //steering = desired minus velocity
    PVector steer = PVector.sub(desired, velocity);
    steer.limit(maxForce);

    applyForce(steer);
  }
  void display() {
    float theta = velocity.heading();
    pushMatrix();
    translate(location.x, location.y);
    rotate(theta + PI/2);
    image(a, 0, 0, 50, 100);
    popMatrix();
  }
}

 

For this assignment, we were asked to create a generative text or data visualization piece. I’m interested in both, but I especially wanted to experiment with text. In the beginning, I wanted to create some form of a playful horoscope generator but the structuring of words, their sentence placement, and concepts such as context-free grammar were a little bit too difficult to understand.

Instead, I created a piece where there is a “net” of letters, and you have to click on the sketch to generate the word “net”.  In the beginning, I thought of adding a scoreboard and turning it into a game where every time you generate the word, you earn a point–– but apart from the fact that it’s tricky, I realized it would defy the purpose of the sketch being a simple play on words where the user interaction is somewhat open-ended.

You can also refresh the letters by pressing the spacebar, the first press removes all the letters and the second press will rearrange them.

Here is the end result (I updated the video):

And here is an Arabic version:

And here is the code:

//Source: textArrayClass3-Bounce by Taylor Hedum on OpenProcessing


String[] character = {"N", "T", "E", "N", "T", 
"E", "T", "T", "T", "N", "E", "T", "N", "E", "T", "N", 
 "E", "T", "N", "T", "E"};
//  //"E", "B", "E", "E", "B"
//String[] character = {"N", "E", "T"};
//String[] character = {"ش", "ب", "ك", "ة", "ش", "ب", "ك", "ة", "ش", "ب", "ك", "ة", "ش", "ب", "ك", "ة"};
int tSize = 36;

ArrayList<Chara> charas = new ArrayList<Chara>();
int charaLim = character.length;
//int charaLim = 50;
int randoChara;

float spring = 0.3;
float gravity = 0.1;
float friction = -0.9;
int charaCounter;
boolean showLetters = true;


//PImage bg;

void setup() {
  size(500,500);
  textSize(tSize);
  textAlign(CENTER);
  //frameRate(4);
  
  for (int i=1; i<charaLim+1; i++) {
    
    //used to generate random character in character array
    randoChara = int(random(0, character.length));
    //bg = loadImage("8.png"); 
    
    //add all characters in character array to list of characters to get initial bouncing going
    charas.add(new Chara(i, randoChara, width/(charaLim+1)*i, random(height/2), tSize));
  }
}

void draw() {
   background(220,220,220);
  for (int i = 0; i < charas.size(); i++) {
    Chara chara = charas.get(i);
    chara.collide();
    chara.move();
    chara.display();
  }
  if (mousePressed) {
    //addOne();
  }
  for (int i = charas.size(); i > 0; i--) {
    
    //starts deleting characters when the set limit of characters is reached
    //deletes character at the beginning of list, the oldest character so to speak
    if (charas.size() > charaLim*2) {
      deleteOne(1);
    }
  }

}

void mousePressed() {
  addOne();
}

//adds new character upon mousePress
void addOne() {
  randoChara = int(random(0, character.length));
  
  //passes MouseX & MouseY to class constructor so that character is first drawn where the mouse is
  charas.add(new Chara(charas.size()+1, randoChara, mouseX, mouseY, tSize));
}


void deleteOne(int delid) {
  
  //removes first character in arrayList since delid is always passed as 1
  charas.remove(delid-1);
  
  //moves up the other character's IDs by one
  for (int i = delid-1; i<charas.size(); i++) {
    Chara chara = charas.get(i);
    chara.reOrder();

  }
}

void keyPressed(){
  if (key == ' '){
    showLetters = !showLetters;
  }
}

class Chara {
  int id;
  int whichChara;
  float x, y;
  float diameter;
  float vx = 0;
  float vy = 0;
  float xx = random (0, 500);
  float xS;
  int offSet = 250;
  float r;
  float rd = 1;

  Chara(int idint, int randoChara, float xin, float yin, float din) {
    id = idint; 
    whichChara = randoChara;
    x = xin;
    y = yin;
    diameter = din;
    r = random(width/4, width/2);
  }

  void collide() {
    for (int i = 0; i < charas.size(); i++) {
      Chara others = charas.get(i);
      if (others != this) {
   
       
        float dx = others.x - x;
        float dy = others.y - y;
        
        //pythogonal distance
        float distance = sqrt(dx*dx + dy*dy);
        
        //draws line between characters if they're close enough
        float minDist = others.diameter/4 + diameter/4;
        if (distance < minDist*8) { 
          line(x, y, others.x, others.y);
        }
        
        //makes characters bounce of each other if they come within minDist of each other
        if (distance < minDist) { 
          float angle = atan2(dy, dx); //angle determined by atan2 and distance between characters
          float targetX = x + cos(angle) * minDist;
          float targetY = y + sin(angle) * minDist;
          
          //acceleration 
          float ax = (targetX - others.x) * spring;
          float ay = (targetY - others.y) * spring;
          vx -= ax;
          vy -= ay;
          others.vx += ax;
          others.vy += ay;

        }
      } else {
        fill(0);
      }
    }
  } 
  
  void move() {
    vy += gravity;
    x += vx;
    y += vy;
    
    //if character hits/goes past right sides of the canvas,
    //reset x so it seems to bounce off the edge of canvas,
    //then change direction of x-movement
    if (x + diameter/2 > width) {
      x = width - diameter/2;
      vx *= friction;
      
    //likewise but for left side of canvas
    } else if (x - diameter/2 < 0) {
      x = diameter/2;
      vx *= friction;
    } //likewise but for height
    if (y + diameter/2 > height) {
      y = height - diameter/2;
      vy *= friction;
    } else if (y - diameter/2 < 0) {
      y = diameter/2;
      vy *= friction;
    }
  } 

  void display() {
  fill(0);
  
    //if showLetters is true (toggled by space bar), draw the letter
    if (showLetters) {
      text(character[int(whichChara)], x, y+diameter/3);
    }

    stroke(135,206,235);
    strokeWeight(1);

  }
  void reOrder() {
    id-=1;
  }
}

 

For this project, I kept it pretty simple as I tried to get my head around how to split string arrays. I basically wrote down a bunch of words that were in my head throughout this week and the text kinda follows the pattern around the screen like the thoughts do in my brain? If that makes sense. I think there’s a lot of ways I can develop this further and with better aims e.g. I feel like similar typography/graphics is used in a lot of advertisements when actors’ thoughts crowd the screen without them actually saying anything etc. It would be cool to develop this more aesthetically as well.

int i = 0;
String quote = "food mom dubai midterms exams stress game of thrones chocolate stress endgame cinema work friends laugh chicken deadlines ramadan eid grandma weather statistics snapchat wedding";
String [] myArray = split (quote, " ");
PFont f;

void setup() {
  size(800, 600);
  background(0);
  f = createFont("FreeSansBold.ttf", 32);
  textFont(f);
  println();
}

void draw() {

  i++; 
  if (i > (myArray.length-1)) {
  i = 0;
 
}

  fill(187, 178, 255, 55); 
  translate(mouseX, mouseY);
  text(myArray[i], 0, 0);
  delay(100); 
}

 

 

For this week’s assignment, I created data visualization as well as a generative text output. Though I primarily focused on creating the data visualization, I also wanted to practice with OOP and decided to play with text.

For the data visualization, I found a CSV file with the number of votes received by vote Trump and Clinton by each state during the 2016 presidential election in the United States. My goal was to find an image of the map of America online and create circles on each of the states, with the size of the circle being determined by how many more people, as a percentage of the total voters, voted for Trump or Clinton.

Accomplishing this was not as difficult as I thought since Processing has a built in for loop that is able to loop through different columns of the CSV data based on the header of each column. I then took this data and calculated the percentage of people in each state that voted for each candidate and compared it to how many votes the other candidate received as a percentage. If, for example, Clinton received more votes in a state, the size of the circle was determined by how large the difference was between her votes and Trump’s votes.

I also included a different map that appears on a keyPress, with the second map modeling the number of votes that one candidate received over the other. This resulted in an amplification of many of the states’ blue dots, although a lot of this may have been skewed by using the map() function.

Below is the code:

PImage unitedStates;
Table presidentData; 
PFont font;
int mapState = 0;

void setup() {
  size(1400, 940);
  unitedStates = loadImage("usamap.jpg");
  presidentData = loadTable("election3.csv", "header");
  font = createFont("Helvetica", 25);
}

void draw() {
  background(unitedStates);
  textFont(font, 12);
  if (mapState == 0) {
    for (TableRow row : presidentData.rows()) {
      String state = row.getString("State");
      float dem = row.getFloat("1");
      float rep = row.getFloat("2");
      float xPos = row.getFloat("4");
      float yPos = row.getFloat("5");
      float total = dem + rep;
      float demPercent = (dem / total) * 100; 
      float repPercent = (rep / total) * 100;
      float difference = demPercent - repPercent;
      float mappedDem;
      println(difference);
      if (difference >= 0) {
        noStroke();
        fill(255, 0, 0);
        float mappedRep = map(difference, 0, 53, 10, 40);
        ellipse(xPos, yPos, mappedRep, mappedRep);
        fill(0, 0, 0);
        textAlign(CENTER);

        text(state, xPos, yPos);
      }  
      if (difference < 0) {
        noStroke();
        fill(0, 0, 255);
        mappedDem = difference * -1;
        float newDem = map(mappedDem, 0, 34, 10, 40);
        ellipse(xPos, yPos, newDem, newDem);
        fill(0, 0, 0);
        textAlign(CENTER);
        text(state, xPos, yPos);
      }  
      //fill(255, 0, 0);
      //ellipse(xPos, yPos, mappedDem, mappedDem);
      //fill(0, 0, 255);
      //tint(255, 127);  // Display at half opacity
      //ellipse(xPos, yPos, mappedRep, mappedRep);
    }
    fill(255, 255, 255);
    rect(0, 0, 40, 40);
    fill(0);
    textAlign(CENTER);
    textSize(24);
    text("The Degree to Which Each State Favored Either Trump or Clinton During the 2016 Presidential Elections", width / 2, 30 );
    fill(255, 0, 0);
    rect(30, height - 160, 40, 40);
    textAlign(LEFT);
    text("Favoring Donald Trump", 80, height - 130);
    fill(0, 0, 255);
    rect(30, height - 110, 40, 40);  
    text("Favoring Hillary Clinton", 80, height - 80);
  } else if (mapState == 1) {
    for (TableRow row : presidentData.rows()) {
      String state = row.getString("State");
      float dem = row.getFloat("1");
      float rep = row.getFloat("2");
      float xPos = row.getFloat("4");
      float yPos = row.getFloat("5");
      float difference = dem - rep;
      float mappedRep = map(difference, 0, 807180, 10, 40);
      float mappedDem;
      //float mappedDifference = map(difference, 0, 4685047, 20, 70);
      println(difference);
      if (difference >= 0) {
        noStroke();
        fill(255, 0, 0);
        ellipse(xPos, yPos, mappedRep, mappedRep);
        fill(0, 0, 0);
        textAlign(CENTER);
        text(state, xPos, yPos);
      }  
      if (difference < 0) {
        noStroke();
        //smooth(4);
        fill(0, 0, 255);
        mappedDem = mappedRep * -1;
        ellipse(xPos, yPos, mappedDem, mappedDem);
        fill(0, 0, 0);
        textAlign(CENTER);
        text(state, xPos, yPos);
      }
      fill(255, 255, 255);
      rect(0, 0, 40, 40);
    }
    fill(0);
    textAlign(CENTER);
    textSize(24);
    text("How Many More Voters For Hillary Clinton Or Donald Trump By State", width / 2, 30 );  
    fill(255, 0, 0);
    rect(30, height - 160, 40, 40);
    textAlign(LEFT);
    text("Favoring Donald Trump", 80, height - 130);
    fill(0, 0, 255);
    rect(30, height - 110, 40, 40);  
    text("Favoring Hillary Clinton", 80, height - 80);
  }
}  
void keyPressed() {
  mapState++;
  if (mapState == 2) {
    mapState = 0;
  }
}

Secondly, I created a text output programming using OOP. The letters spell “Tyranny!” and separate at the start of the program. When I click anywhere on the screen, the letters flock to that location and once the mouse is released the letters scatter in different directions. When any key is pressed, the letters go to the middle to spell “Tyranny!”

Below is the code:

String word = "Tyranny!";
float xDisplace = -110;
Letter[] letters;

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

  letters = new Letter[word.length()];
  for (int i = 0; i < word.length(); i++) {
    letters[i] = new Letter(width / 2 + xDisplace, height / 2, word.charAt(i));
    xDisplace += 40;
  }
}  

void draw() {
  background(255);
  for (int i = 0; i < word.length(); i++) {
    letters[i].run();
    if (mousePressed) {
      letters[i].zoom();
    }
    if (keyPressed) {
      letters[i].returnOrigin();
    }
  }
}

class Letter {
  char letter; 
  float x, y;
  float originX, originY;
  float xMove, yMove;
  float mouseXPos, mouseYPos;
  Letter (float _x, float _y, char _letter) {
    x = _x;
    y = _y;
    originX = x;
    originY = y;
    letter = _letter;
    xMove = random(-3, 3);
    yMove = random(-3, 3);
  }  

  void show() {
    fill(0);
    textSize(43);
    textAlign(CENTER);
    text(letter, x, y);
    if (x >= width) {
      x = 0;
    } else if (x <= 0) {
      x = width;
    } else if (y <= 0) {
      y = height;
    } else if (y >= height) {
      x = 0;
    } 
    println(originX);
  }
  void goNuts() {
    x += xMove;
    y += yMove;
    x += random(-1, 2);
    y += random(-1, 2);
  } 
//move letters to mouse position and randomize movement
  void zoom() {
    if (mouseX == 0 || mouseY == 0) {
    } else {
      mouseXPos = (mouseX - x) / 10;
      mouseYPos = (mouseY - y) / 10;
      x += mouseXPos;
      y += mouseYPos;
      xMove = random(-5, 5);
      yMove = random(-5, 5);
    }
  } 
  void returnOrigin() {
    mouseXPos = (originX - x) / 2;
    mouseYPos = (originY - y) / 2;
    x += mouseXPos;
    y += mouseYPos;
  }  
  void run() {
    this.show();    
    this.goNuts();
  }
}

For this week’s assignment, I decided to work with text instead of data visualization. I started off with creating photos out of text, but then I wasn’t sure if that was enough, so I made a project that took in words from Nick’s post about his snail story. With that, the program counted which words appeared the most in the text. The ones with the most occurrence would appear larger in size compared to the others.

Here are images created from text:

 

PImage timeImage; 
PFont f;
String[] chars = {"t", "i", "m", "e"};

int i = 0;
int incr = 10;
void setup() {
  size(560, 560);
  timeImage = loadImage("time.jpg");
  f = createFont("Monaco", 15);
  textFont(f);
}

void draw() {
  background(0);
  timeImage.loadPixels();
  for (int x = 0; x < timeImage.width; x += incr) {
    for (int y = 0; y < timeImage.height; y += incr) {
      int loc = x + y * timeImage.width;
      i++;
      float red = red(timeImage.pixels[loc]) ;
      float green = green(timeImage.pixels[loc]);
      float blue = blue(timeImage.pixels[loc]);
      fill(color(red, green, blue));
      text(chars[i % chars.length], x, y);
    }
  }
}

 

This is the one from the snail text: To distinguish the words, the bigger text ones shake a bit too. 

String[] textLines;
String[] words;
String fileText;
PFont font;
int len;
int ct = 0;

ArrayList<String> seenWords = new ArrayList<String>();
ArrayList<Integer> wordSize = new ArrayList<Integer>();
ArrayList<Float> xPos = new ArrayList<Float>();
ArrayList<Float> yPos = new ArrayList<Float>();

void setup() {
  fullScreen();
  font = createFont("ZapfDingbatsITC", 32);
  textFont(font);
  textLines = loadStrings("textlalal.txt");
  fileText = join(textLines, "");
  String files = fileText.toLowerCase();
  words = splitTokens(files, ",?!.:\" ");
  len = words.length;
  textAlign(CENTER);
  frameRate(30);
  for (int idx = 0; idx < len; idx++) {
    String word = words[idx];
    int loc = seenWords.indexOf(word);
    if (seenWords.contains(word)) {
        wordSize.set(loc, wordSize.get(loc) + 5);
        textSize(wordSize.get(loc)); 
    } else {
      int wordLen = word.length();
      seenWords.add(word);
      wordSize.add(wordLen + 5);
      xPos.add(width/2 + random(-500, 500));
      yPos.add(height/2 + random(-350, 350));
      textSize(wordLen);
    }
  }
}

void draw() {
  background(0);
  for (int i = 0; i < seenWords.size() - 1; i++) {
    textSize(wordSize.get(i));
    if (wordSize.get(i) > 20) {
      //xPos.set(i, lerp(xPos.get(i), 250, 0.01));
      text(seenWords.get(i), xPos.get(i) + random(-1, 1), yPos.get(i) + random(-1, 1) );
    } else {
      text(seenWords.get(i), xPos.get(i) , yPos.get(i));
    }
  }
}

 

 

This week assignment was to create a generative text. So what I did, taking inspiration by the movement of objects underwater, was to create a type of bubbles with random colors that have a smooth and random motion through the environment. The idea is that some of these bubbles randomly contain the letters and when the mouse is on the screen these bubbles will align to make a word. Some of the features of this art are that it shows deepness, the smaller the bubble is the lighter color it will have, in order to create an illusion that some objects are closer than others.

Potential improvements for this art, is add to the bubbles with letters the methods to allow to show the path of movement when these moves from its original position to the position to generate the code.

class FarCircles{
  float x,y,xSpeed,ySpeed,size;
  PVector loc;
  int R,G,B;
  
  
    FarCircles(int r,int g, int b, float SIZE){
      x = random(0+SIZE, width - SIZE);
      y = random(0-SIZE, height - SIZE);
      loc = new PVector(x,y);
      xSpeed = random(-.1,.1);
      ySpeed = random(-.1,.1);
      R=r;
      G=g;
      B=b;
      size = SIZE;
    }//Far circles
    
    void update(){
      loc.x+=xSpeed;
      loc.y+=ySpeed;
    }
    
    void display(){
      pushMatrix();
      fill(R,G,B);
      circle(loc.x, loc.y, size);
      fill(255);
      circle(loc.x, loc.y, size-5);
      popMatrix();
    }
    
  //size = diameter  
  void checkEdges() {
    if (loc.x+(size/2)>=width || loc.x-(size/2)<=0){
      xSpeed*=-1;
      ySpeed*=-1;
    }
    if (loc.y+(size/2)>height || loc.y-(size/2)<0)
  {
      ySpeed*=-1;
      xSpeed*=-1;
  }
    if(loc.x+(size/2) == (width/2)-150 && loc.y>(height/2)-50 && loc.y<(height/2) + 50){
      xSpeed*=-1;
      ySpeed*=-1;
    }
    if(loc.x-(size/2) == (width/2)+150 && loc.y>(height/2)-50 && loc.y<(height/2) + 50){
      xSpeed*=-1;
      ySpeed*=-1;
    }
    if(loc.y+(size/2) == (height/2)-50 && loc.x>(width/2)-150 && loc.x<(width/2) + 150){
      ySpeed*=-1;
      xSpeed*=-1;
    }
    if(loc.y-(size/2) == (height/2)+50 && loc.x>(width/2)-150 && loc.x<(width/2) + 150){
      ySpeed*=-1;
      xSpeed*=-1;
    }
  }
  
  void textCircles(char character){
    for(int i=0; i<word.length();i++){
      pushMatrix();
      fill(R,G,B);
      circle(loc.x, loc.y, size);
      fill(255);
      circle(loc.x, loc.y, size-5);
      pushMatrix();
      translate(loc.x,loc.y);
      fill(0);
      textSize(76);
      text(character,-26,32);
      popMatrix();
      popMatrix();
    }
    
  } // textCircles
  
    void centerCircle(float newX, float newY){
      loc.x = newX;
      loc.y = newY;
      xSpeed = 0;
      ySpeed = 0;
    }

   
}//class 
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////
String word = "HOLA";
FarCircles[] circles = new FarCircles[35];
FarCircles[] letters =  new FarCircles[word.length()];
void setup() {
  size(640,480);
  noStroke();
  for (int i=0;i<circles.length; i++){
    float size = random(0,84);
      if(size>0 && size<14){
        int array[] = {204, 229,255};
        int R =int( random(0,3));
        int G = int(random(0,3));
        int B = int(random(0,3));
        circles[i] = new FarCircles(array[R],array[G],array[B], size);
      }
      if(size>14 && size<28){
        int array[] = {153, 204,255};
        int R = int( random(0,3));
        int G = int(random(0,3));
        int B = int(random(0,3));
        circles[i] = new FarCircles(array[R],array[G],array[B], size);
      }
      if(size>28 && size<42){
        int array[] = {102, 178,255};
        int R = int(random(0,3));
        int G = int(random(0,3));
        int B = int(random(0,3));
        circles[i] = new FarCircles(array[R],array[G],array[B], size);
      }
      if(size>42 && size<56){
        int array[] = {51, 153,255};
        int R = int(random(0,3));
        int G = int(random(0,3));
        int B = int(random(0,3));
        circles[i] = new FarCircles(array[R],array[G],array[B], size);
      }
      if(size>56 && size<70){
        int array[] = {0, 128,255};
        int R = int(random(0,3));
        int G = int(random(0,3));
        int B = int(random(0,3));
        circles[i] = new FarCircles(array[R],array[G],array[B], size);
      }
      if(size>70 && size<84){
        int array[] = {0, 102,204};
        int R = int(random(0,3));
        int G = int(random(0,3));
        int B = int (random(0,3));
        circles[i] = new FarCircles(array[R],array[G],array[B], size);
      }
  }//loop
  for(int p =0; p<word.length();p++){
        int array2[] = {0, 102,204};
        int R = int(random(0,3));
        int G = int(random(0,3));
        int B = int (random(0,3));
    letters[p] = new FarCircles(array2[R],array2[G],array2[B],84);
  }
}


void draw() {
  
background(255);
 for (int i=0; i<circles.length; i++){
    circles[i].update();
    circles[i].checkEdges();
    circles[i].display();
  }//loop
  

   for (int j=0; j<letters.length; j++){
    letters[j].update();
    letters[j].checkEdges();
    if(mouseOn()==true){
      float w = word.length()*84 + word.length()*2;
      float separation = w/word.length();
      //pushMatrix();
      //translate(width/2, height/2);
      //fill(255);
      //rect( - w/2, -44, w, 84);
      //popMatrix();
      letters[j].centerCircle(width/2-w/2+42+(separation*j),height/2);
    }
    //else{
    //  letters[j].xSpeed = random(-.1,.1);
    //  letters[j].ySpeed = random(-.1,.1);
    //  letters[j].update();
      
    //}
    letters[j].textCircles(word.charAt(j));
  }//loop
  
}


boolean mouseOn(){
  if(mouseX>0 && mouseX< width && mouseY>0 && mouseY<height){
  return true;
  }
  else {
    return false;
  }
}

//void mouseOn(){
//  float w = word.length()*84 + word.length()*2;
//  float separation = w/word.length() -42;
//  if(mouseX>0 && mouseX< width && mouseY>0 && mouseY<height/2){
//    pushMatrix();
//    translate(width/2, height/2);
//    fill(255);
//    rect( - w/2, -44, w, 84);
//    popMatrix();
//    pushMatrix();
//    translate(width/2 - w/2 + 42, height/2);
//    for(int i = 0; i<word.length();i++){
//      letters[i].centerCircle(separation*i,0);
//    }
//    popMatrix();
//  }
//}





//void checkClashes(){
//  FarCircles[] temp = new FarCircles[circles.length];
//  for (int k=0; k<circles.length;k++){
//    circles[k] = temp[k];
//  }
//  for(int i =0; i<circles.length; i++){
//      for(int j =0; j<circles.length; j++){
//        if(i !=j){
//          if( circles[i].loc.x + circles[i].size == circles[j].loc.x - circles[j].size){
//            circles[i].xSpeed*=-1;
//          }//if first x
//          else if( circles[i].loc.x -circles[i].size == circles[j].loc.x + circles[j].size){
//            circles[i].xSpeed*=-1;
//          }//if second x
//          else if( circles[i].loc.y +circles[i].size == circles[j].loc.y - circles[j].size){
//            circles[i].ySpeed*=-1;
//          }//if first y
//          else if( circles[i].loc.x -circles[i].size == circles[j].loc.y +circles[j].size){
//            circles[i].ySpeed*=-1;
//          }//if second y  
//        }//if i =j
//      }// j loop
//  }// i loop

//} //checkclashes

 

This is how many trees there are(or at least how many there were in 2016).

I decided to do a data visualization of the percentage of land area covered by forest per country. The taller the tree, the bigger the percentage.

First I created a branch object, which I made into an array in my tree function, which I then make an array of in my draw function.

ArrayList<Tree> trees;

float count = 0;
int data[];
Tree tree;
void setup() {
  // I want to do three things, 
  //one create one tree for each point of data, 
  //two, make each tree's height dependent on the value of the data point
  //three, be able to switch between data sets with a keypress. (less important)
  size(1200, 400);
  trees = new ArrayList<Tree>();
  //if (mousePressed){
  String[] forest = loadStrings("2016_data.txt");
  //}
  //else {
  //   String[] forest = loadStrings("1990_data.txt");
  //}
  int[] data = new int[forest.length];
  
  for(int i = 0; i < forest.length; i++){
    data[i] = int(forest[i]);
  }
  
  for (int i = 0; i < data.length; i++) {
    int x = int(random(20, width-20));
    int y = int(random(height+4,height-4));
    tree = new Tree(data[i], x, height );//enter height and position of tree
    trees.add(tree);
  }
  //float trunk = 50;
  //float trunk = data.length;
}

void draw() {
  background(10, 20, 15);
  for (Tree tree : trees) {
    tree.update();
    tree.show();
    fill(120,200, 110);
    textSize(20);
    text("How many trees are there?", 30, 20);
    
  }
}

class Tree {
  ArrayList<Branch> branches;
  int trunk, x, y, count;

  Tree(int trunk, int x, int y) {
    branches = new ArrayList<Branch>();
    this.trunk = trunk;
    this.x = x;
    this.y = y;
    this.count = 0;

    PVector a =  new PVector (x, y);
    PVector b = new PVector (x, y-trunk);
    Branch root = new Branch(a, b);
    branches.add(root);
  }

  void update() {
    if (count < 9) {
      for (int i = branches.size() -1; i >= 0; i--) {
        Branch current = branches.get(i);
        //if the current Branch has no children: add them
        if (!current.finished) {
          branches.add(current.branchA());
          branches.add(current.branchB());
        }
        //now that Branch has children
        current.finished = true;
      }
      //new Level added
      count ++;
    }
  }

  void show() {
    for (int i = 0; i < branches.size(); i++) {
      branches.get(i).update();
    }
  }
}

class Branch{
  
  PVector start;
  PVector end;
  boolean finished = false;
  
  Branch(PVector start,PVector  end){
 
    this.start = start;
    this.end = end;
  }
    
  void update() {
    
    stroke(random(150,200),random(200,255),random(100,150));
    line(start.x, start.y, end.x, end.y);
    
  }
  
  
  Branch branchA(){
    PVector direction = PVector.sub(end, start);
    direction.rotate(PI / random(4,20));
    direction.mult(0.75);
    PVector newEnd = PVector.add(end, direction);
    Branch b = new Branch(end, newEnd);
    return b;
  }
  
  Branch branchB(){
    PVector dir = PVector.sub(end, start);
    dir.rotate(- PI / random(4,20));
    dir.mult(0.75);
    PVector newEnd = PVector.add(end, dir);
    Branch b = new Branch(end, newEnd);
    return b;
  
}
}

 

For this week’s project, I decided to base my work on a popular movie, an old one though: V for Vendetta. My work, which uses the manipulation of text, is divided into two parts.

The first part is a big V, but only if you look closely can you see the detail. In a nested for loop, I made the V so that every line would have three “v”s, with each character being less transparent than the one before. This, however, doesn’t show much since the characters are two close together but if you look closely you might spot a slight color difference.

For the next part, I made a simple rotation scheme where I would have it so that the big V would stay there but the characters around it would orbit in a circle so that it would altogether spell out “Vendetta”.

PFont myFont;
char v = 'v';
int z = 15;
int x = 100;
int y = 100;
float a = 400;
float b = 500;
float r = 30;
String s = "ENDETTA";
void setup(){
  size(750,750);
  background(200,0,0);
  myFont = createFont("Helvetica",40);
  textFont(myFont,40);
  textAlign(CENTER);
}

void draw(){
  
  int x = 170;
  int y = 100;
  for(int i=0;i<20;i++){
    
    for(int j=0;j<3;j++){
      //println(z);
      color a = color(19,24,98,z);
      fill(a);
      text(v,x,y);
      x += 3;
      z -= 5;
      
      
    }
    z = 15;
    
    y += 20;
    
  }
  for(int i=0;i<21;i++){
    
    for(int j=0;j<3;j++){
      //println(z);
      color a = color(19,24,98,z);
      fill(a);
      text(v,x,y);
      x += 3;
      z -= 5;
      
      
    }
    z = 15;
    
    y -= 20;
    
  }
  
  text("IS FOR",375,550);
  a = 400;
  b = 500;
  float mb = 0;
  //pushMatrix();
  //translate(400,500);
  translate(350,500);
  for(int i=0;i<s.length();i++){
    char d = s.charAt(i);
    float h = textWidth(d);
    
    mb += h/2;
    float theta = PI + mb/r;
    
    pushMatrix();
    translate(r*cos(theta),r*sin(theta));
    rotate(theta+PI/2);
    text(d,170,170);
    popMatrix();
    mb += h/2;
    
  }
  //popMatrix();
  
  
}

 

Paintings speak better than words. Here is my final creation: