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.
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();
}
}
}
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:
While reading the text talking about waze application, the ideas were interesting to me to read but an application that looks at the traffic and tells you the best route didn’t seem new to me because from what I remember theres an application like this in Iran. This idea of the app becoming more useful the more people were using it was interesting to me but made me wonder if there were privacy issues with it. (The house price increases it talked about would be a perfect example of a privacy issue. Using people’s data against them.) It might be an obvious thing to others but what caught my attention was that at one point referred to this increase in effectiveness with the increase of users as the “network effect”. And it made me think back on the fact that social media networks are very much dependent on this. The best social media platform would be nothing without a network of people. You go on Facebook to connect with other people but if those people weren’t there it would serve no benefit.
I love the statement that design depends on constraints. It was also very interesting to read about origins of plywood, because we are currently making skateboards in another class, which are made of plywood. In the case of fashion vs. disability, I feel that even though it is unfortunately true that disability is seen by some as something to be hidden, and fashion could definitely be a tool to embrace each person’s unique attributes, fashion can also sometimes be too over the top. I’ve had 3 different glasses designs over the years and had never thought of glasses as design meeting disability, but this is definitely true, and each design can make a person be perceived completely differently.
“Digital information isn’t just the lifeblood for new kinds of science; it’s the second fundamental force (after exponential improvement) shaping the second machine age because of its role in fostering innovation”
This reading really delved into the importance and rapid development of digital information and databases, and how they’ve become defining forces in the shaping of a more innovative modern age. Analyzing examples regarding GPS location information, and in particular the Waze app, proved how extensive the effects of using a digital data are. GPS apps like Waze nowadays, follow really intricate digital processes; providing their users with accurate data, routes, estimated arrival times, etc. Their extensive use of sensor data is quite essential to the success of these apps, and can prove quite advantageous to their users, as it can prevent them from going over speed limits and being late to work. It was also quite interesting how these modern apps could possibly overcome the shortcomings of traditional GPS systems, due to their reliance on user-provided data.
Something that I have personally notices, is that when we use the GPS system back home in Jordan, the data regarding routes might not always be accurate. This is due to the nature of the infrastructure in Amman, since it is constantly changing, and routes are often redirected. Hence, I believe it is vital in some cases to use apps like Waze in a dynamic and continuously developing world, which heavily rely on input from users, in order to ensure the accuracy of data.
I’ll start of with a quote: “[Hal Varian] keep saying that the sexy job in the next ten years will be statisticians. And I’m not kidding.”. Hal Varian is Google’s chief economist. He may be right since the data in the world is growing exponentially which make the good job to take this data in account and keep track of it. It doesn’t mean that the person will just be keeping track of the size of the data, it also means that he will be working with this data, which can be photos, statistics, bank information and etc. I personally have never used Waze, since we have an alternative back in Russia (2GIS). I don’t personally know how it work (could be that they are just taking an existing database of traffic and uploads it to the app.
