Author: ad3866

Project Title: rump weets

Project Statement of Purpose

Trump’s Tweets are all the talk these days, and I think it would be a fun experience for people to make his words even more ridiculous. I was inspired by a post in the Facebook group “Sounds weirdly specific, but okay” and hope to take this idea and transform it into an interactive experience. Users would be able to erase letters or words to create a completely new Tweet. My target audience is anyone who appreciates memes/humor and has some knowledge of Trump’s Tweets

Project Title: Line Rider

Project Statement of Purpose

I loved playing Line Rider with my brothers growing up and would love to bring it to life in a physical simulation. I intend on using multiple sensors to draw the line and hope to make it a multiplayer game. My target audience is definitely people who also played the game when they were younger, but also anyone who would enjoy it. 

Project Title: I’m a Keeper

Project Statement of Purpose

Soccer is a huge part of my life and I would love to create an experience that would allow others to enjoy it as well. I’ve never been a goalkeeper, but think it would be the simplest role to replicate in a game. I hope to create a game where the user has to catch soccer balls coming their way on the screen using motion sensors. My target audience is anyone who loves soccer or sports in general.

Step One

void amy(float x, float y, float size, color c) {
  stroke(c);
  strokeWeight(7);
  fill(255);
  //stamp
  rect(x-size*.5,y-size*.5,size*2,size*1.95);  
  //top radical
  strokeWeight(5);
  noFill();
  line(x+size*.05,y,x+size*.95,y);
  line(x+size*.3,y-size*.1,x+size*.3,y+size*.1);
  line(x+size*.7,y-size*.1,x+size*.7,y+size*.1); 
  //vertical lines
  line(x,y+size*.25,x,y+size); 
  line(x+size,y+size*.25,x+size,y+size);
  line(x+size*.5,y+size*.25,x+size*.5,y+size);
  //horizontal lines
  line(x,y+size*.25,x+size,y+size*.25);
  line(x,y+size,x+size,y+size);  
  line(x,y+size*.6,x+size,y+size*.6); 
}

Step Two

void setup() {
  size(700,700);
  background(255);
  
  for(int i=0; i<100; i++){
    float r = random(175,255);
    float g = random(75);
    float b = random(75);
    amy(random(width),random(height),random(50,100), color(r,g,b));    
  }
}

void draw() {
  for(int i=0; i<100; i++){
    float r = random(175,255);
    float g = random(75);
    float b = random(75);
    amy(random(width),random(height),random(50,100), color(r,g,b));    
  }
}

void amy(float x, float y, float size, color c) {
  stroke(c);
  strokeWeight(7);
  fill(255);
  //stamp
  rect(x-size*.5,y-size*.5,size*2,size*1.95);  
  //top radical
  strokeWeight(5);
  noFill();
  line(x+size*.05,y,x+size*.95,y);
  line(x+size*.3,y-size*.1,x+size*.3,y+size*.1);
  line(x+size*.7,y-size*.1,x+size*.7,y+size*.1); 
  //vertical lines
  line(x,y+size*.25,x,y+size); 
  line(x+size,y+size*.25,x+size,y+size);
  line(x+size*.5,y+size*.25,x+size*.5,y+size);
  //horizontal lines
  line(x,y+size*.25,x+size,y+size*.25);
  line(x,y+size,x+size,y+size);  
  line(x,y+size*.6,x+size,y+size*.6); 
}

void setup() {
  size(700,700);
  background(255);
}

void draw() {
  for(int i=0; i<100; i++){
    float r = random(175,255);
    float g = random(75);
    float b = random(75);
    amy(random(width),random(height),random(50,100), color(r,g,b));    
  }
}

void amy(float x, float y, float size, color c) {
  stroke(c);
  strokeWeight(7);
  fill(255);
  //stamp
  rect(x-size*.5,y-size*.5,size*2,size*1.95);  
  //top radical
  strokeWeight(5);
  noFill();
  line(x+size*.05,y,x+size*.95,y);
  line(x+size*.3,y-size*.1,x+size*.3,y+size*.1);
  line(x+size*.7,y-size*.1,x+size*.7,y+size*.1); 
  //vertical lines
  line(x,y+size*.25,x,y+size); 
  line(x+size,y+size*.25,x+size,y+size);
  line(x+size*.5,y+size*.25,x+size*.5,y+size);
  //horizontal lines
  line(x,y+size*.25,x+size,y+size*.25);
  line(x,y+size,x+size,y+size);  
  line(x,y+size*.6,x+size,y+size*.6); 
}

Step Three

float[] x = new float[100];
float[] y = new float [100];
float[] size = new float[100];
color[] c = new color[100];


void setup() {
  size(700,700);
  background(255);
  
  for(int i=0; i<x.length; i++){
    x[i] = random(width);
    y[i] = random(height);
    size[i] = random(50,100);
    c[i] = color(random(175,255),random(75),random(75)); 
  }
}

void draw() {
  for(int i=0; i<x.length; i++) {
    amy(x[i],y[i],size[i],c[i]);
  }
}

void amy(float x, float y, float size, color c) {
  stroke(c);
  strokeWeight(7);
  fill(255);
  //stamp
  rect(x-size*.5,y-size*.5,size*2,size*1.95);  
  //top radical
  strokeWeight(5);
  noFill();
  line(x+size*.05,y,x+size*.95,y);
  line(x+size*.3,y-size*.1,x+size*.3,y+size*.1);
  line(x+size*.7,y-size*.1,x+size*.7,y+size*.1); 
  //vertical lines
  line(x,y+size*.25,x,y+size); 
  line(x+size,y+size*.25,x+size,y+size);
  line(x+size*.5,y+size*.25,x+size*.5,y+size);
  //horizontal lines
  line(x,y+size*.25,x+size,y+size*.25);
  line(x,y+size,x+size,y+size);  
  line(x,y+size*.6,x+size,y+size*.6); 
}

Step Four

float[] x = new float[100];
float[] y = new float [100];
float[] size = new float[100];
color[] c = new color[100];
float[] speedX = new float[100];
float[] speedY = new float[100];

void setup() {
  size(700,700);
  background(255);
  
  for(int i=0; i<x.length; i++){
    x[i] = random(width);
    y[i] = random(height);
    size[i] = random(50,100);
    speedX[i] = random(-10,10);
    speedY[i] = random(-10,10);
    c[i] = color(random(175,255),random(75),random(75)); 
  }
}

void draw() {
  background(255);
  for(int i=0; i<x.length; i++) {
    amy(x[i],y[i],size[i],c[i]);
    
    x[i] = x[i] + speedX[i];
    y[i] = y[i] + speedY[i];
      
    if (x[i] > width || x[i]< 0) {
      speedX[i] = -speedX[i];
    }
    if (y[i] > height || y[i]< 0) {
      speedY[i] = -speedY[i];
    }
  }
}

void amy(float x, float y, float size, color c) {
  stroke(c);
  strokeWeight(7);
  fill(255);
  //stamp
  rect(x-size*.5,y-size*.5,size*2,size*1.95);  
  //top radical
  strokeWeight(5);
  noFill();
  line(x+size*.05,y,x+size*.95,y);
  line(x+size*.3,y-size*.1,x+size*.3,y+size*.1);
  line(x+size*.7,y-size*.1,x+size*.7,y+size*.1); 
  //vertical lines
  line(x,y+size*.25,x,y+size); 
  line(x+size,y+size*.25,x+size,y+size);
  line(x+size*.5,y+size*.25,x+size*.5,y+size);
  //horizontal lines
  line(x,y+size*.25,x+size,y+size*.25);
  line(x,y+size,x+size,y+size);  
  line(x,y+size*.6,x+size,y+size*.6); 
}

Optional

float[] x = new float[100];
float[] y = new float [100];
float[] size = new float[100];
color[] c = new color[100];
float[] speedX = new float[100];
float[] speedY = new float[100];

void setup() {
  size(700,700);
  background(255);
  
  for(int i=0; i<x.length; i++){
    x[i] = random(width);
    y[i] = random(height);
    size[i] = random(50,100);
    speedX[i] = random(-10,10);
    speedY[i] = random(-10,10);
    c[i] = color(random(175,255),random(75),random(75)); 
  }
}

void draw() {
  background(255);
  for(int i=0; i<x.length; i++) {
    //my added interaction
    amy(x[i],y[i],mouseX,c[i]);
    
    x[i] = x[i] + speedX[i];
    y[i] = y[i] + speedY[i];
      
    if (x[i] > width || x[i]< 0) {
      speedX[i] = -speedX[i];
    }
    if (y[i] > height || y[i]< 0) {
      speedY[i] = -speedY[i];
    }
  }
}

void amy(float x, float y, float size, color c) {
  stroke(c);
  strokeWeight(7);
  fill(255);
  //stamp
  rect(x-size*.5,y-size*.5,size*2,size*1.95);  
  //top radical
  strokeWeight(5);
  noFill();
  line(x+size*.05,y,x+size*.95,y);
  line(x+size*.3,y-size*.1,x+size*.3,y+size*.1);
  line(x+size*.7,y-size*.1,x+size*.7,y+size*.1); 
  //vertical lines
  line(x,y+size*.25,x,y+size); 
  line(x+size,y+size*.25,x+size,y+size);
  line(x+size*.5,y+size*.25,x+size*.5,y+size);
  //horizontal lines
  line(x,y+size*.25,x+size,y+size*.25);
  line(x,y+size,x+size,y+size);  
  line(x,y+size*.6,x+size,y+size*.6); 
}

Question 1: In your own words, please explain the difference between having your for loop from Step 2 in setup() as opposed to in draw().

When the for loop is in setup, it will only create 100 and then stop, but when the for loop is draw, it will create 100 over and over again. Things in setup() will only happen once whereas in draw() it will repeat.

Question 2: What is the benefit of using arrays?  How might you use arrays in a potential project?

You can create and adjust many different shapes and its attributes instead of having to write it out over and over again. It streamlines the process and gives you more freedom to create multifaceted shapes/designs.

Chronus Visit

Visiting the Chronus exhibition was very interesting and I don’t think I would have gotten as much out of it had I not been taking this course. Because we are how to use a lot of the same kinds of tools, I looked at each piece with a curious eye and wondered how it was made. I think that the technological components made each piece even more engaging and inherently interactive because they are not standalone, static pieces that you may find in other exhibitions. 

Example One: “Now You Are In the Conversation”

I searched ITP’s project archive for a good example of interactivity and came across Chelsea Chen’s work “Now You Are In the Conversation.” I think this is a perfect example because it highlights a common trend in today’s society–smartphones rendering real life experiences secondary to the art itself. Chen programmed her project to stop working if it detected the human gesture of someone taking out their phone to take a photo or video. This project is not only extremely thoughtful and timely, but also emphasizes the conversational aspect of interaction. By this I do not merely mean the title, but how it actually forces users to interact with the artwork. What’s interesting is this interaction isn’t even necessarily an action or movement, but the act of being engaged and giving something meaningful attention itself. A video of Chen’s project can be found here.

Example Two: “Megatron/Matrix” and “Electronic Superhighway”

It feels blasphemous to critique an artist as respected as Nam June Paik, but I will excuse myself since this is only a critique of the interactivity of his work. I struggled thinking of artwork that was not interactive after focusing so much on interactivity, but I thought of video art. Most of the time, video is not interactive because usually the user or viewer just watches or listens rather than truly engaging. These two video installations, while extremely immersive, are not interactive because there is no two sided conversation between the art and the viewer. A video of these two pieces can be found here.

Interaction Defined

In our group project, we defined interaction as a continuous conversation between two or more corresponding elements. I still lean on Crawford’s understanding of analysis and focus on the listening, thinking, and speaking aspects of interaction. It’s not simply act and react, but rather thoughtful continuous conversation. Chen’s project, “Now You Are In the Conversation” is very interactive because even though there is limited movement, the user actually influences the activity of her project and vice versa. Paik’s work is thought-provoking, but there is no form of interaction involved. 

Animated Sketch from Recitation 5

void setup(){
  size(1300, 700);
}

//colors
//(196, 37, 27) red
//(247,214,55) yellow

void draw() {
  background(142, 159, 167);
  noFill();
  strokeWeight(15);
  stroke(196, 37, 27, 100);
  
  int a = 100;
  int b = 1100;
  int c = 800;
  int d = -700;
  
  for (int i = 0; i <= 15; i++){
  a = a + 30;
  b = b + 30;
  c = c + 30;
  d = d + 30;
  
  bezier(0,0, a+mouseX,b+mouseY, c-mouseX,d-mouseY, 1300,700);
  }
}

Post Recitation HW:

Step One

void setup() {
  size(600,600);
  background(255);
}

void draw() {
  noFill();
  strokeWeight(20);
  ellipseMode(CENTER);
  ellipse(width/2,height/2,300,300);
}

Step Two

float size = 100;
float sizeSpeed = 3;

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

void draw() {
  background(255);
  noFill();
  strokeWeight(20);
  ellipseMode(CENTER);
  ellipse(width/2,height/2,size,size);
  
  size = size + sizeSpeed;

  if (size > 325 || size < 100) {
  sizeSpeed = -sizeSpeed;
  }
}

Step Three

float size = 100;
float sizeSpeed = 3;

int hue = 0;
int hueSpeed = 2;

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

void draw() {
  background(255);
  noFill();
  colorMode(HSB);
  strokeWeight(20);
  stroke(hue,255,255);
  ellipseMode(CENTER);
  ellipse(width/2,height/2,size,size);
  
  size = size + sizeSpeed;
  
  if (size > 325 || size < 100) {
    sizeSpeed = -sizeSpeed;
  }
  
  hue = hue + hueSpeed;
  
  if (hue > 360 || hue < 0) {
    hueSpeed = -hueSpeed;
    //can also do this
    //hue=0;
  }
}

Step Four

float size = 100;
float sizeSpeed = 3;

int hue = 0;
int hueSpeed = 2;

int x = 300;
int y = 300;

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

void draw() {
  background(255);
  noFill();
  colorMode(HSB);
  strokeWeight(20);
  stroke(hue,255,255);
  ellipseMode(CENTER);
  ellipse(x,y,size,size);
  
  size = size + sizeSpeed;
  
  if (size > 325 || size < 100) {
    sizeSpeed = -sizeSpeed;
  }
  
  hue = hue + hueSpeed;
  
  if (hue > 360 || hue < 0) {
    hueSpeed = -hueSpeed;
    //can also do this
    //hue=0;
  }
  
  if (keyPressed){if (key==CODED){
    if(keyCode==UP){
      y = y-10;
    }
    if (keyCode==DOWN){
      y = y+10;
    }
    if(keyCode==RIGHT){
      x = x+10;
    }
    if (keyCode==LEFT){
      x = x-10;
    }
   }
  }
  
  if (x>width){
    x = width;
  }
  if (x<0){
    x = 0;
  }
  if (y>height){
    y = height;
  }
  if (y<0){
    y = 0;
  }
}

my motif

I chose this image because it felt like controlled chaos to me. While I liked the other examples with more fundamental shapes like squares or rectangles, I wanted to explore what we can create with lines and curves. 

my sketch

I originally set out wanting to copy the original image exactly, but along the way I stumbled into this. In other words, I couldn’t get it exactly like the original, so I started experimenting with other options. I think that once I learn more skills in Processing I’ll be able to get closer to the original, but for now maybe free-hand drawing would be easier. I do think that drawing in Processing is a great tool for generative art, though. For example, a few lines of code I’m able to create many curves/lines/shapes whereas drawing by hand would take much longer. 

code

size(1300, 700);
background(142, 159, 167);

//colors
//(196, 37, 27) red
//(247,214,55) yellow

noFill();
strokeWeight(15);
stroke(196, 37, 27, 100);

// how i originally drew the curves
// bezier(0,0, 100,1100, 800,-700, 900,600);
// bezier(0,0, 100+30,1100+30, 800+30,-700+30, 900,600);
// bezier(0,0, 100+60,1100+60, 800+60,-700+60, 900,600);
// bezier(0,0, 100+90,1100+90, 800+90,-700+90, 900,600);
// bezier(0,0, 100+120,1100+120, 800+120,-700+120, 900,600);
// bezier(0,0, 100+150,1100+150, 800+150,-700+150, 900,600);
// bezier(0,0, 100+180,1100+180, 800+180,-700+180, 900,600);

//easier version i learned from a friend
int a = 100;
int b = 1100;
int c = 800;
int d = -700;

for (int i = 0; i <= 15; i++){
  a = a + 30;
  b = b + 30;
  c = c + 30;
  d = d + 30;

  bezier(0,0, a,b, c,d, 1300,700);
}