ELLIPSE (the supreme shape)

Discussion of my work process and how I worked out all my designs:

ellispe_documention

import processing.serial.*;
Serial myPort;
Draw myDraw;
Pulse myPulse;
Random myRandom;
Stretch myStretch;
ArrayList<Sphere> mySphere;  
ArrayList<Flow> flows;

boolean ellipse = true;

float values ;
float xPos;
float yPos;

float prevValues = 0;

void setup() {
  background(0);
 fullScreen(P3D);
//  size(800, 800, P3D);

  myDraw = new Draw(width/2,width/2);
  myPulse = new Pulse(width/2,height/2);
  myRandom = new Random(width/2,height/2);
  myStretch = new Stretch();
  mySphere = new ArrayList<Sphere>();
  flows = new ArrayList<Flow>();
  String portName = "/dev/cu.usbserial-DA01LJI0";
  myPort = new Serial(this, portName, 9600);
  myPort.bufferUntil('\n');
}

void draw() { 
  noCursor();
  println(values,xPos,yPos);
  if (values == 0) {
    central();
  }
  if (values == 3) {
    ellipse = false;
    disco_ball();
  }
  if (values == 5) {
    myDraw.shape_draw();
    myDraw.update(xPos,yPos);

    ellipse = false;
  }
  if (values == 7) {
    ellipse = false;
    myStretch.stretch();
    myStretch.update(xPos,yPos);
  }
  if (values == 9) {
    ellipse = false;
    myPulse.pulse();
    myPulse.update(xPos,yPos);
  }
  if (values == 11) {
    ellipse = false;
   myRandom.random_circle();
    myRandom.update(xPos,yPos);
  }
  if (values == 13) {
    ellipse = false;  
  flows.add(new Flow()); 
    for (int i = flows.size()-1; i>=0; i--) {
      Flow s = flows.get(i);
      s.update(xPos,yPos);
      s.render();
      if (s.isDead()) {
        flows.remove(i);
     }
    }
  }
  if (values == 15) {
    ellipse = false ;
   myPulse.pulse();
    myPulse.update(xPos,yPos);
  }
  
  
  
  if (values != prevValues){
    clear();
  }
  
  prevValues = values;

  }


void central() {
  pushMatrix();
  background(0);
  noFill();
  stroke(255);
  strokeWeight(1.5);
  ellipse(width/2, height/2, 300, 300);
  popMatrix();
}

void serialEvent(Serial myPort) {
  String inString = myPort.readStringUntil('\n');

  inString = trim(inString);
  String[] james = split(inString, ',');
 
  if (james[0] != null) {
    values = float(trim(james[0]));
  }
  //X position
  if (james[1] != null) {
    james[1] = trim(james[1]);
    xPos = float(james[1]);
   // println(xPos);
    xPos = map(xPos,0,1023,0,width);

  }
  //Y position
  if (james[2] != null) {
    james[2] = trim(james[2]);
    yPos = float(james[2]);
    yPos = map(yPos,1023,0,100,height-100);
  }
  myPort.write('x');
}


void disco_ball(){
  pushMatrix();
 background(0);
  translate(width/2,height/2,0);
  mySphere.add(new Sphere());
   for (int i = mySphere.size()-1; i>=0; i--) { // manipulate the objects
    Sphere s = mySphere.get(i);
    s.update(xPos,yPos);
    s.render();

    if (s.isDead()) {
      mySphere.remove(i);
    }
  }
  popMatrix();
}

 

 

ArrayList<Sphere> spheres;  
class Sphere {
  float xPos;
  float yPos;
  float xSpeed;
  float ySpeed;
  float diam;
  float alpha;
  float moving_x;
  float moving_y;
  Sphere() {
    alpha = random(127, 350);
    xPos = width/4-475;
    yPos = height/4-300;
    xSpeed = random(-10., 10.);
    ySpeed = random(-10., 10.);
    diam = 150;
  }
  boolean isDead() {
    if (alpha <= 0) {
      return true;
    } else {
      return false;
    }
  }
  void render() {
    strokeWeight(2);
    alpha -=3;
    diam = diam-3.5;
    float yellow = map(diam,100,200,255,0);
    float interesting = map(moving_y,0,height,yellow,0);
    stroke(255, 255,interesting,alpha);
    float cool = map(moving_x,0,width,0,255);
    fill(0,cool);
    pushMatrix();
    translate(xPos,yPos,yPos);
    sphere(diam);
    popMatrix();
  }
  void update(float x, float y) {
   moving_x = x;
    moving_y = y;
    xPos+=xSpeed;
    yPos+=ySpeed;
  }
}
class Draw {
  int num_vertex;
  float radius;
  float centerX;
  float centerY;
  float Xmove;
  float Ymove;
  float[] x = new float[num_vertex];
  float[] y = new float[num_vertex];
  float angle = radians(30); 

  Draw(float _x,float _y) {
    Xmove = _x;
    Ymove = _y;
    smooth();
    noFill();
    centerX = width/2; 
    centerY = height/2; 
    num_vertex = 12;
    radius = 150;
  }
void update(float xPos,float yPos){
  Xmove = xPos;
  Ymove = yPos;
  
}
  void shape_draw() {
    noFill();
    stroke(0);
    strokeWeight(1);
    ellipse(width/2, height/2, 300, 300);
    for (int i=0; i<num_vertex; i++) {
      x = append(x, cos(angle*i) * radius);
      y = append(y, sin(angle*i) * radius);
    }
    stroke(255, 255, random(0, 250), 80);
    if (Xmove != 0 || Ymove != 0) { //WHERE I CHANGED OUT THE MOUSE X AND Y
      centerX += (Xmove-centerX) * 0.05;
      centerY += (Ymove-centerY) * 0.05;
    } 

    for (int i=0; i<num_vertex; i++) { // cause random movements for verteces within these parameters
      x[i] += random(-1.25, 1.25);
      y[i] += random(-1.25, 1.25);
    }
    beginShape();
    curveVertex(x[num_vertex-1]+centerX, y[num_vertex-1]+centerY);

    for (int i=0; i<num_vertex; i++) { // for every vertex make a point about the center
      curveVertex(x[i]+centerX, y[i]+centerY);
    }
    curveVertex(x[0]+centerX, y[0]+centerY);
    curveVertex(x[1]+centerX, y[1]+centerY);
    endShape();
  }
}
class Flow {
  // variables for the object
  float xPos;
  float yPos;
  float xSpeed;
  float ySpeed;
  float alpha;
  float size;
  float moving_x;
  float moving_y;

  Flow() {
    background(0);
    alpha = random(0, 255);
    xPos = 0;
    yPos = 0;
    xSpeed = random(-20,20);
    ySpeed = 20;
  }

  boolean isDead() {
    if (alpha <= 0) {
      return true;
    } else {
      return false;
    }
  }
 void update(float new_x, float new_y) {
    moving_x = new_x;
    moving_y = new_y;
   xPos+=xSpeed;
    yPos+=ySpeed;
  }
  
  void render() {
    fill(0);
    noStroke();
    ellipse(width/2,height/2,300,300);
    alpha -=1;
    size +=1;
    fill(255,255,alpha,alpha);
    for(float a = 0; a <=width;a=a+100){
    pushMatrix();
    float rotationx = map(moving_x,0,width,-PI/8,PI/8);
    float rotationy = map(moving_y,0,height,-PI/8,PI/8);
    rotateX(rotationx);
    rotateY(rotationy);
    ellipse(xPos+a,yPos,size,size);
    popMatrix();  
    }
  }
}
class Pulse {
float parameter_x;
float parameter_y;
float movex;
float movey;

Pulse(float movementsx, float movementsy){
  movex = movementsx;
  movey = movementsy;
}

void update(float xPos,float yPos){
  movex = xPos;
  movey = yPos;
  
}

void pulse(){
 if((xPos <970 && xPos>964) &&(yPos<538 && yPos>534)){
 parameter_x = random(50,350);
 parameter_y = height/2;
}else{
   parameter_x = movex;
  parameter_y = movey;
  if(parameter_x > 350){
  parameter_x = 300;  
  }
}
   pushMatrix();
   smooth();
  frameRate(15);
   strokeWeight(2.5);
   stroke(255,255,random(0,300)); 
   pushMatrix();
   fill(0,20);
   rect(-100,-100,width+200,height+200);
   popMatrix();
    translate(width/2,height/2);
    int resolution = (int)map(parameter_y,100,height-100,2, 30);
    float radius = parameter_x-width/2+400;
    float angle = TWO_PI/resolution;
    beginShape();
    for (int i=0; i<=resolution; i++){
      float x =  cos(angle*i) * radius;
      float y =  sin(angle*i) * radius;
      vertex(x, y);
    }
    endShape(); 
    popMatrix();
}
}
class Random{
  float x_go;
  float y_go;
  
  Random(float movementx,float movementy){
    x_go = movementx;
    y_go = movementy;
  }
void update(float xPos,float yPos){
  x_go = xPos;
  y_go = yPos;  
}
  
  void random_circle(){
  smooth();
  background(0);
  frameRate(45);
  pushMatrix();
  fill(0,50);
  rect(0,0,width,height);
  popMatrix();
  noStroke();
  float fadeX = (float)x_go/width;
  float angle = radians(360/float(300));
  for (int i=0; i<300; i++){
    float circleX = width/2 + cos(angle*i)*150;
    float circleY = height/2 + sin(angle*i)*150;
    float randomX = random(0,width);  
    float randomY = random(0,height);
    float x = lerp(randomX,circleX, fadeX);
    float y = lerp(randomY,circleY, fadeX);  
  
float blue = map(y_go,0,width-50,0,255);
    fill(255,255,blue,200);
 ellipse(x,y,random(0,20),random(0,20));
  }
}
}
class Stretch{
  float xmove;
  float ymove;
  
  void update(float xPos,float yPos ){
   xmove = xPos;
   ymove = yPos;
  }
  
void stretch(){
  background(0);
  strokeCap(SQUARE);
  smooth();
  noFill();
float rotationx = map(xPos,0,width,-PI/6,PI/6);
float rotationy = map(yPos,0,height,-PI/6,PI/6);
rotateX(rotationx);
rotateY(rotationy);

float blue = map(xPos,0,width,0,240);
stroke(255,255,blue,100);

  translate(width/2,height/2);
  int circleResolution = (int) map(yPos, 0,height, 50,120);
  float radius = xPos-width/2 + 50;
  float angle = TWO_PI/circleResolution;

  strokeWeight(yPos/80+5);

  beginShape();
  for (int i=0; i<=circleResolution; i++){
    float x = cos(angle*i) * radius;
    float y = sin(angle*i) * radius;
    rect(0,0,x,y);
    line(0,0,x,y);
  }
  endShape();
  
}
  
}

4 of my demos in video:

video-1450330326

 

 

 

On Computational Media

I’ve been told consistently by my relatives how I need to exercise both sides of my mind: the creative right side, and the analytical left side.  But instead of trying to find a blend of the two, I thought my choice stemmed between the black and white logical fields, and the colorful, ambiguous artistic world. Now I’m realizing that computational media and the interaction between art and technology is not only a new option to integrate both sides, but it’s essential to the progression of technology as a whole.

I see technology as a medium for communicating artistic ideas into an applicable format. Companies using design to improve the interaction between people understand the value of visual appeal. Art creates an experience behind engineered objects. Art communicates and transmits ideas through media, and technology adds to the functionality of this interaction. When it comes to the importance of fields like Interactive Media, I’ve found that I’m not the only student searching to infuse art into the technological world. As the technological world progresses, the demand for simplicity in technology is more and more imperative. We engineer for convenience, to enable, and to open doors for people to study and learn more about the world. The tools we use to do so demand art not only for ease in functionality, but for the communication art offers. We can use art to ask questions and consider ambiguity, and we can use art to build on opportunity in other fields.

I’d argue computational media is only in its earliest stages for the potential it has both in art and in computer engineering. But the more its fostered, the more doors I think it opens up for artists and engineers to learn skills they wouldn’t have otherwise considered. I saw a future holding a paintbrush, and I am, except I’m writing code to make a paintbrush on a computer. If nothing else, the skills learned by studying computational media can be applied to any new fields. I didn’t realize mathematicians needed to be creative, nor did I realize artists need to know how to properly manipulate sine and cosine on 3D planes to create amazing designs. It’s like we’ve just realized peanut butter and jelly work super well together.

Arguably computational media may not be considered as necessary to other computer scientists or artists as it does in my eyes. But from seeing the opportunity computational media offers me, I’m happy to lock myself away in a lab for several hours with a group of other interactive media artists. I’m happy to make amazing, beautiful, broken things in that lab, and if nothing else, I find enough intrinsic motivation to continue pursuing computational media until the world agrees with me of its importance.

Distortion Machine

I wrote a program that has the user choose a certain theme, and then the output is a distortion using tints and image overlays for some interesting effects. I liked the idea of having a choice in switching between themes and creating distortions; it’s something I want to include in my final project, perhaps as a heavily distorted background to the interactive designs.

import processing.video.*;
PImage gradient;
PImage madonna;
PImage marley;
PImage merica;
PImage new_media;
int home = 0;

Capture video;
void setup(){
 size(640,480);
 gradient = loadImage("GRADIENT.jpg");
 madonna = loadImage("MADONNA.jpg");
 marley = loadImage("MARLEY.jpg");
 new_media = loadImage("NEW_MEDIA.jpg");
 video = new Capture(this, width,height);
 video.start();
}
void draw(){
 if (video.available()){
 video.read();
 }
if(home == 0){
main_screen();
}
hover();
}

void main_screen(){
background(20);
textSize(20);
PFont myFont = createFont("AnonymousPro",50);
textFont(myFont);
text("CHOOSE YOUR MOOD",50,100);
image(gradient,30,150,100,100);
image(madonna,150,150,100,100);
image(marley,270,150,100,100);
image(new_media,390,150,100,100);
}

void hover(){
 if((mouseX >= 30 )&&(mouseX <= 130) && (mouseY >= 150 )&&(mouseY <= 250 )){
 home = 1;
 gradient();
 }
 
 if((mouseX >= 150 )&&(mouseX <= 250) && (mouseY >= 150)&&(mouseY <= 250 )){
 home = 1;
 madonna();
 }
 if((mouseX >= 270)&&(mouseX <= 370) &&(mouseY >= 150 )&&(mouseY <= 250 )){
 home = 1;
 bob_marley();
 }
 if((mouseX >= 390)&& (mouseX <= 490) &&(mouseY >= 150 )&&(mouseY <= 250)){
 home = 1;
 new_media_pink();
 }
 
 if(mousePressed == true){
 home = 0;
 }
}

 void gradient(){
 video.loadPixels();
 tint(255,127, 0, 127);
 for(int i = -150;i<width;i+=100){
 tint(255+i,127+i,0,127);
 image(video,i,0);
 }
 }
 
 void new_media_pink(){
 video.loadPixels();
 tint(255,150, 0, 225);
 image(video,-100,0);
 tint(255,127, 0, 225);
 image(video,-50,0);
 tint(255,100, 50, 175);
 image(video,100,0);
 tint(255,50, 100, 125);
 image(video,50,0);
 tint(255,25, 150, 75);
 image(video,0,0);
 }
 
 void bob_marley(){
 video.loadPixels();
 for(int i = 0;i<width;i+=30){
 for(int j=0;j<height;j+=40){
 tint(i,j, 0, 127);
 image(video,i,j,30,40);
 }
 }
 }
 
 void madonna(){
 video.loadPixels();
 for(int i = 0;i<width;i+=30){
 tint(255,127, 50, 127);
 image(video,i-30,0,i,60);
 tint(210,127, 100, 127);
 image(video,i-30,60,i,90);
 tint(170,127, 150, 127);
 image(video,i-60,150,i-30,130);
 tint(130,127, 200, 127);
 image(video,i-60,280,i-30,200);
 }
 }

Album_Cover 2015-11-23_0106

Wannabe Mateo

I made a snake game.

You push the buttons to move the snake and try not to die.

 

Also there’s a cool space background just to make things more interesting.

Snake_Space

 

import processing.serial.*;
Serial myPort;

ArrayList<Sphere> spheres;

int xPos = 400;
int yPos = 300;
int Xspeed = 1;
int Yspeed;
int diam = 10;
float []  coordinatesX = {};
float [] coordinatesY = {};
int game = 0;

void setup(){
  size(800,600);
  background(30);
  fill(255);
  String portName = "/dev/tty.usbserial-DA01LJI0";
  myPort = new Serial(this,portName, 9600);
  myPort.bufferUntil('\n');

spheres = new ArrayList<Sphere>();

}
void draw(){
  
  background(30);
  spheres.add(new Sphere());
   for (int i = spheres.size()-1; i>=0; i--) { // manipulate the objects
    Sphere s = spheres.get(i);
    s.update();
    s.render();
    //s.bounds();
    if (s.isDead()) {
      spheres.remove(i);
    }
  }
  
 game = 1;
  if(game == 1){ 
    fill(255); 
    stroke(255);
    xPos = constrain(xPos,0,800);
    yPos = constrain(yPos,0,600);
    xPos += Xspeed;
    yPos += Yspeed;
  

    for (int i = 0; i < coordinatesX.length; i++){
      
      rect(coordinatesX[i],coordinatesY[i],diam,diam);
      
      if ((xPos == coordinatesX[i] && yPos == coordinatesY[i]) || xPos == 0 || xPos == 800 || yPos == 0 || yPos == 600 ){
        game = 2;
  }
  }
  rect(xPos,yPos,diam,diam);
  //'UP' command
 
  coordinatesX = append(coordinatesX,int(xPos));
  coordinatesY = append(coordinatesY,int(yPos));
 
  if(game == 2){
    background(30);
    textSize(20);
    text("Bruh you dead.",200,height/2);
    yPos = 0;
    xPos = 0;
    fill(30);
  }
}
}
void serialEvent(Serial myPort) {
  String input = myPort.readString();
  String[] numbers = split(input, ',');
  float[] values = float(numbers);
  
//'UP' command
   if(values[2] == 1){
    Yspeed= -3;
    Xspeed=0;
  }
//'DOWN' command
    if(values[1] == 1){
      Yspeed = 3;
      Xspeed = 0;
    }
//'LEFT' command
    if(values[3] == 1){
      Yspeed = 0;
      Xspeed = -3;    
    }
    if(values[0] == 1){
      Yspeed = 0;
      Xspeed = 3; 
    }
    myPort.write('x');
  }


class Sphere {
  // variables for the object
  float xPos;
  float yPos;
  float xSpeed;
  float ySpeed;
  float diam;
  float alpha;

  Sphere() {
    alpha = random(250,  255);
    xPos = 400;
    yPos = 300;
    xSpeed = random(-7.,7.);
    ySpeed = random(-7.,7.);
    diam = 100;
    
  }

  boolean isDead() {
    if (alpha <= 0) {
      return true;
    } else {
      return false;
    }
  }
  // declare all my functions
  void render() {
    alpha -=3;
    diam--;
    fill(210, alpha);
    //for(int i = 0; i<100;i = i+5){
    ellipse(xPos, yPos, xSpeed, ySpeed );
   // ellipse(xPos-i,yPos+i,xSpeed,ySpeed);
   // ellipse(xPos+i,yPos-i,xSpeed,ySpeed);
   // ellipse(xPos-i,yPos-i,xSpeed,ySpeed);
   // }
   
   if (mousePressed == true){
    for(int i = 0; i<100;i = i+50){
      ellipse(xPos+i, yPos+i, xSpeed, ySpeed );
       ellipse(xPos-i,yPos+i,xSpeed,ySpeed);
      ellipse(xPos+i,yPos-i,xSpeed,ySpeed);
       ellipse(xPos-i,yPos-i,xSpeed,ySpeed);
    }
   }
     
  }

  void update() {
    xPos-=xSpeed;
    yPos-=ySpeed;  
    
      
    
      
      
    
  }

  void bounds() {
    if (xPos >= width || xPos <= 0) {
      xSpeed = xSpeed * -1;
    }
    if (yPos >= height || yPos <= 0) {
      ySpeed = ySpeed * -1;
    }
  }

}

This is the code for Arduino:

void setup() {
  // put your setup code here, to run once:
pinMode(2,INPUT); //GREEN
pinMode(3,INPUT); //YELLOW
pinMode(5,INPUT); //RED
pinMode(7,INPUT); //BLUE


Serial.begin(9600);
Serial.println("0,0,0,0");
}

void loop() {
  // put your main code here, to run repeatedly:
  if (Serial.available() > 0) {
 int processing = Serial.read();

 Serial.print(digitalRead(2));
 Serial.print(",");
 delay(1);

 Serial.print(digitalRead(3));
 Serial.print(",");
 delay(1);

 Serial.print(digitalRead(5));
 Serial.print(",");
 delay(1);

 Serial.println(digitalRead(7));
 delay(1);

}
}

 

 

Distort Word Art

I went on to the site: http://www.creativeapplications.net/processing/100-abandoned-artworks-processing/ to start finding interesting repetition patterns in animations. The videos on that page feature these subtle movements using the same shape over and over again, so I took my Snow code and essentially reworked it so that it made a simple distortion pattern across the screen. It looks like diagonal lines of dots moving around randomly, but it’s actually several columns of dots aligned together, and they move around in a synced way to give the illusion of these flowing lines. Then, I added some word art, because I thought this would be an interesting way to show a characteristic of the word “DISTORT”. By using animation and visualization, this word is kind of expressed through the piece.

12226862_1243710488977984_1496701494_n

class Snow {
  float ySpeed;
  float xPos;
  float yPos;
  float opacity;
  float snowflake;
  Snow() {
    ySpeed = 0;
    xPos = 1;
    yPos = 1;
  }
  
  void snowball() {
    fill(240, opacity);
    
    for(float a = 0; a<=width;a=a+1){
      ellipse(xPos+a, yPos+a, 2, 2);
      ySpeed = random(-3,3);
      yPos += ySpeed;
    
    }
  }
    void bounds() {
      if (yPos >= height || yPos <= 0) {
        ySpeed = ySpeed * -1;
    }
  }
      
    
    
  
  void opacity(){
    opacity = map(yPos,0, height,255,0);
}
 
}

Snow[] unicorn;
String distort = "DISTORT";

void setup() {
  size(800, 600);
  background(35);
  noStroke();
  fill(250);
  unicorn = new Snow[20];
  for(int q = 0;q<unicorn.length; q++){
    unicorn[q] = new Snow(); 
  }  
}

void draw() {  
 text(distort,200,height/2);
  textSize(100);
  PFont font = createFont("AppleSDGothicNeo-Thin-48",64);
  
 for(int q = 0;q<unicorn.length; q++){
    unicorn[q].snowball();
    unicorn[q].opacity();
 }
    
  fill(35,10);
  rect(0,0,width,height);
  
}

 

Snow Globe

I felt inspired by some visual artists that used simple animations to create interesting effects in otherwise still art pieces. It’s sort of like the idea of a snow globe, changing around a still scenery. I decided to make an art piece that essentially replicated this.

I created a class that loops 100 times to create snow falling at different speeds down the screen, with an umbrella girl I drew from another drawing program I made. The user’s cursor is a snowflake. It’s like a simple interactive desktop image. I’m hoping to add to this by having snowflakes fall out of the cursor as it moves across the screen.

 

Screen Shot 2015-11-02 at 1.58.45 PM

PImage Umbrella;

class Snow {
  float ySpeed;
  float diam;
  float xsky;
  float yPos;
  float opacity;
  float snowflake;

  Snow() {
    ySpeed = 0;
    diam = 0;
    xsky = 0;
    yPos = 0;
  }
  
  void drawing(){
    fill(35,1);
    strokeJoin(BEVEL);
    rect(600,330,100,200);
    fill(35,2);
    rect(600+10,330+10,100-20,200-20);
    fill(35,3);
    rect(600+20,330+20,100-40,200-40);
    fill(190,180);
  }
  void snowball() {
    fill(210, opacity);
    xsky = random(1, width);
    ellipse(xsky, yPos, diam, diam);
  }
  void falling() {
    ySpeed = random(-1, 12);
    yPos += ySpeed;
    if (yPos >= height) {
      yPos = 0;
    }
  }

  void snowsize() {
    diam = random(1, 25);
  }
  void opacity(){
    opacity = map(yPos,0, height*0.87,210,0);
}
  void cursory(){
    fill(225);
    pushMatrix();
    stroke(225,opacity);
    snowflake = 30;
    line(mouseX,mouseY,mouseX+snowflake,mouseY-snowflake);
    line(mouseX,mouseY-snowflake,mouseX+snowflake,mouseY);
    line(mouseX+snowflake/2,mouseY-snowflake,mouseX+snowflake/2,mouseY);
    line(mouseX,mouseY-snowflake/2,mouseX+snowflake,mouseY-snowflake/2);
    popMatrix();
    
    
    if(mousePressed == true){
      line(pmouseX,pmouseY,pmouseX+snowflake*2,pmouseY-snowflake*2);
      line(pmouseX,pmouseY-snowflake*2,pmouseX+snowflake*2,pmouseY);
      line(pmouseX+snowflake*2/2,pmouseY-snowflake*2,pmouseX+snowflake*2/2,pmouseY);
      line(mouseX,pmouseY-snowflake*2/2,pmouseX+snowflake*2,pmouseY-snowflake*2/2);
    }
    noStroke();
}
}


Snow[] unicorn;

void setup() {
  size(800, 600);
  background(35);
  noStroke();
  fill(250);
  Umbrella = loadImage("Umbrella.png");
  unicorn = new Snow[100];
  for(int q = 0;q<unicorn.length; q++){
    unicorn[q] = new Snow();
    
  }
    
}

void draw() {  
 image(Umbrella,600,330);
 noCursor();
 for(int q = 0;q<unicorn.length; q++){
    unicorn[q].snowball();
    unicorn[q].snowsize();
    unicorn[q].falling();
    unicorn[q].opacity();
    unicorn[q].cursory();
    //unicorn[q].drawing();
 }
    
  fill(35,10);
  rect(0,0,width,height);
}

 

Graphic Recreation

I chose to try and recreate the Manfred Mohr Computer Graphic in two different ways; first by using for loops to create the black patterning, and the second way by using a pattern as a drawing tool to create the image.

 

Original piece
Original piece

 

Drawing tools used to recreate the piece
All drawing tools used to recreate the piece

 

Image created with looping
Image created with looping and erasing back the pattern. Coding for this is posted below:
void setup(){
  size(600,800);
  background(250);
  for(int j = 0; j <800; j+=5){
  for (int i = 0; i <600; i+=5) {
    line(i,0+j,5+i,5+j);
    line(i,5+j,5+i,0+j);
  }  
  }
  for(int j = 0; j<800; j+=5){
  for(int i = 0; i<600; i+=5){
    if(j % 50 == 0){
  for(int w = 0; w<15; w+=5){
      line(i,w+j,5+i,(w+5)+j);
    line(i,(w+5)+j,5+i,w+j);
  }
    }
  }
  }
   for(int j = 0; j<800; j+=15){
  for(int i = 0; i<600; i+=15){
    if(j % 15 == 0){
    strokeWeight(1.5);
      line(i,j,5+i,5+j);
    line(i,5+j,5+i,j);
    }
  }
   }
    for(int j = 0; j<800; j+=10){
  for(int i = 0; i<600; i+=10){
    if(j % 30 == 0){
      strokeWeight(2.5);
      stroke(225);
      line(i,j,5+i,5+j);
    line(i,5+j,5+i,j);
    
    }
  }
    }
   
}
void draw(){
float x = mouseX;
float y = mouseY;
if (mousePressed == true){
  stroke(250);
  line(x,y,x+5,y-5);
  line(x,y-5,x+5,y); 
  line(x+5,y,x+10,y-5);
  line(x+5,y-5,x+10,y);
  line(x+10,y,x+15,y-5);
  line(x+10,y-5,x+15,y);
  line(x+15,y,x+20,y-5);
  line(x+15,y-5,x+20,y);
  line(x+20,y,x+25,y-5);
  line(x+20,y-5,x+25,y);
  line(x+25,y,x+30,y-5);
  line(x+25,y-5,x+30,y);
  line(x+30,y,x+35,y-5);
  line(x+30,y-5,x+35,y);
  line(x+35,y,x+35,y-5);
  line(x+35,y-5,x+35,y);
  
  line(x,y,x+5,y+5);
  line(x,y+5,x+5,y);
  line(x+5,y,x+10,y+5);
  line(x+5,y+5,x+10,y);
  line(x+10,y,x+15,y+5);
  line(x+10,y+5,x+15,y);
  line(x+15,y,x+20,y+5);
  line(x+15,y+5,x+20,y);
  line(x+20,y,x+25,y+5);
  line(x+20,y+5,x+25,y);
  line(x+25,y,x+30,y+5);
  line(x+25,y+5,x+30,y);
  line(x+30,y,x+35,y+5);
  line(x+30,y+5,x+35,y);
  
  line(x,y+5,x+5,y+10);
  line(x,y+10,x+5,y+5);
  line(x+5,y+5,x+10,y+10);
  line(x+5,y+10,x+10,y+5);
  line(x+10,y+5,x+15,y+10);
  line(x+10,y+10,x+15,y+5);
  line(x+15,y+5,x+20,y+10);
  line(x+15,y+10,x+20,y+5);
  line(x+20,y+5,x+25,y+10);
  line(x+20,y+10,x+25,y+5);
  line(x+25,y+5,x+30,y+10);
  line(x+25,y+10,x+30,y+5);
  line(x+30,y+5,x+35,y+10);
  line(x+30,y+10,x+35,y+5);
  
  line(x,y+10,x+5,y+15);
  line(x,y+15,x+5,y+10);
  line(x+5,y+10,x+10,y+15);
  line(x+5,y+15,x+10,y+10);
  line(x+10,y+10,x+15,y+15);
  line(x+10,y+15,x+15,y+10);
  line(x+15,y+10,x+20,y+15);
  line(x+15,y+15,x+20,y+10);
  line(x+20,y+10,x+25,y+15);
  line(x+20,y+15,x+25,y+10);
  line(x+25,y+10,x+30,y+15);
  line(x+25,y+15,x+30,y+10);
  line(x+30,y+10,x+35,y+15);
  line(x+30,y+15,x+35,y+10);
  }
}

And this is just a small graphic I made while playing around with ProcessingScreen Shot 2015-10-26 at 1.42.15 PM

Cross Hatching

For my self-portrait project, I wanted to make a machine that in a way replicated the shading tool cross-hatching to create new shades and dimension into images. I coded lines that crossed together at various lengths and amounts, then turned these into 4 main drawing tools. You access the erasing shade by pressing ‘c’, the small white shading tool with ‘b’, and the dark cross hatching with ‘v’. Finally, if you press and hold the mouse, you activate the large ‘X’ tool for some interesting shades and patterns. With these four drawing tools, I played around to make the side of a face with new values and seeing how the overlap of these tools combined created new dimension.

 

Self_Portait

void setup(){
 size(1000,1000);
 background(225);
}
void draw(){
float x = mouseX;
float y = mouseY;
if (keyPressed){
  if(key =='v' || key == 'V'){
  stroke(0);
  line(x,y,x+30,y-30);
  line(x+10,y,x+40,y-30);
  line(x+20,y,x+50,y-30);
  line(x+30,y,x+60,y-30);
  line(x+5,y-15,x+35,y+5);
  line(x+5,y-25,x+40,y);
  line(x+15,y-25,x+45,y-5);
  line(x+25,y-25,x+50,y-10);
  line(x+35,y-25,x+55,y-15);
  }
}
if(mousePressed == true){
  stroke(0);
  line(x,y,x+60,y-60);
  line(x,y-60,x+60,y);
  }

if(keyPressed){
  if(key == 'b' || key == 'B'){
  stroke(255);
  line(x,y,x+5,y-5);
  line(x,y-5,x+5,y);
  }
}

if(keyPressed){
  if(key == 'c' || key == 'C'){
  stroke(225);
  line(x,y,x+30,y-30);
  line(x+10,y,x+40,y-30);
  line(x+20,y,x+50,y-30);
  line(x+30,y,x+60,y-30);
  line(x+5,y-15,x+35,y+5);
  line(x+5,y-25,x+40,y);
  line(x+15,y-25,x+45,y-5);
  line(x+25,y-25,x+50,y-10);
  line(x+35,y-25,x+55,y-15);
  }
}
}

 

Icarus

I initially wanted to imitate the graceful movement of a bird’s wings flapping to a certain pattern. However due to my materials and construction efforts, instead I made an extremely aggressive bird, which is fitting as October 31st is approaching anyway.

The setup with the coding is very basic; I simply wrote two loops for two servo motors to move up and down at progressing speeds. It’s slightly slower as the servos move upwards in an attempt to replicate the pattern of bird wings flapping. Then, I attached the cardboard wings and tried creating a stable structure to support these motors. The construction is definitely lacking; tape is far too weak to hold up against the consistently moving motors, which proved rather heavy for the support. If anything, the construction was the most challenging. However, for getting the idea across for the movement, the project was relatively successful. I would like to continue working with servo motors in the future to make more graceful structures; so this will definitely be something I revisit.

 

#include <Servo.h>

Servo servo;
Servo servo2;
int position = 0;

void setup() {
  // put your setup code here, to run once:
servo.attach(9);
servo2.attach(10);
}

void loop() {
  // put your main code here, to run repeatedly:
for (position = 0; position <=180; position +=1){
   servo2.write(position);
  delay(2);
}

for(position = 180; position>=0; position -=1){
  servo2.write(position);
  delay(1);
}
 
for (position = 0; position <=180; position +=1){
   servo.write(position);
  delay(2);
}

for(position = 180; position>=0; position -=1){
  servo.write(position);
  delay(1);
}

}

 

 

Martino

Martino is a robot that detects the pressure applied to his hand and outputs a response to yes or no questions by the user. I wanted to create a sort of character out of the Magic 8 ball idea, where the user interacts with this character to get a response. The pressure applied changes the output of the message too, so the harder someone presses, the more likely they’re going to get a negative response.

I actually used Martino all weekend with different friend groups, and we’d program different games and things and outputs with new sensors as well as randomized messages. The coding for this below is the simple Magic 8 ball trick with 11 responses based on the pressure of holding his hand. The coding itself is so basic that it can be easily manipulated for a much wider variety of cases, and I focused on keeping everything on the breadboard because it allows for a wider variety of opportunities with new analog inputs and changing the messages. By limiting the size, it was easier for me to bring Martino and change his functions in different scenarios.

I’m still developing the idea, because the soft potentiometer is unstable in its output ranges. I remapped the ranges to between 0 – 250, so the user is more likely to get a randomized response. I coded 11 messages in between increments of 25 in the range. Right now I’m also adding trials, so that after several trials, the answers become less informative if the user asks too many questions.

I added a potentiometer to adjust the brightness of the screen, and added the Liquid Crystal library into the coding to print out the messages. There’s a gap of 24 spaces in my messages in order for the message to print on both lines. I also have the delays to give the user time to ask the question before the answer is given. Below is a quick video, where I change the pressure when I’m holding Martino’s hand to change the output, and also the additional coding.

Martino_Diagram

#include <LiquidCrystal.h>

LiquidCrystal lcd(12,11,5,4,3,2);
const int potentiometer = 0;
void setup() {
  // put your setup code here, to run once:
Serial.begin(9600);
lcd.begin(16,2);
}

void loop() {
  // put your main code here, to run repeatedly:
int pressure = analogRead(potentiometer);
pressure = map(pressure,0,1023,0,300);
delay(2000);
Serial.println(pressure);
delay(1000);

if (pressure < 25){
  lcd.print("Yes, obviously.");
  delay(25000);
  lcd.noDisplay();
}
if (pressure > 25 && pressure <50){
  lcd.print("Why do you wanna                         know?"); 
  delay(25000);
  lcd.noDisplay();
}
if (pressure > 50 && pressure <75){
  lcd.print("Call your mother                         and ask her.");
  delay(25000);
  lcd.noDisplay();
}
if (pressure > 75 && pressure <100){
  lcd.print("*shrugs*");
  delay(25000);
  lcd.noDisplay();
}
if (pressure > 100 && pressure < 125){
  lcd.print("It's worth a                            shot.");
  delay(25000);
  lcd.noDisplay();
}
if (pressure > 125 && pressure <150){
  lcd.print("#don'tcountonit");
  delay(25000);
  lcd.noDisplay();
}
if (pressure > 150 && pressure <175){
  lcd.print("Take a walk and                          try again");
  delay(25000);
  lcd.noDisplay();
}
if (pressure > 175 && pressure <200){
  lcd.print("Probably no...                           yeah no.");
  delay(25000);
  lcd.noDisplay();
}
if (pressure >200 && pressure <225){
  lcd.print("You ask dumb                            questions.");
  delay(25000);
  lcd.noDisplay();
}
if (pressure > 225 && pressure <250){
  lcd.print("You don't wanna                         know my answer.");
  delay(25000);
  lcd.noDisplay();
}
if (pressure > 250){
  lcd.print("...NO. Why would                        you even ask?");
  delay(25000);
  lcd.noDisplay();
}
}