ICM: Midterm

I didn’t get nearly enough time as I would have liked to work on the code for this midterm, so this post will mostly be about the concept and the things I still need to make/fix.  And again, my code doesn’t work online, probably something with saving graphics, so I’m going to just post some documentation of me just playing with it on the computer.

[yframe url=’http://www.youtube.com/watch?v=9L9thvJGPfQ’%5D

I’m interested in a few things with this: user generated art/collage, generative art and acts of documentation.  This piece sort of defies documentation.  Only one image file is used, which is constantly replaced.  Unless you video record everything you did, the images and animations created with this sketch will only exist once.  I also like the idea that the user is presented with a blank canvas and has to discover what the interaction is.  Because there is a refresh button, the user has the opportunity to then apply what they’ve learned to their next interaction.  There isn’t really a point other than to engage the user in creating an image or collage that moves.  This will become more clear when I refine the interactions and display of the objects.

Problems:

The refresh button looks shitty and I couldn’t figure out how to make it display from the beginning.  I think a bar across the top would be better.

The rotations interaction is a stand in since I ran out of time to really think about the interaction.  I had imagined creating some sort of figure using the original drawing as the unit element by attaching the units and giving them some properties in relationship to each other or the mouse.  I imagine something similar to the cool robot thing Kaitlin showed me last week.

[yframe url=’http://www.youtube.com/watch?v=vg6k3H-Pm04′%5D

The drawing itself is pretty shitty.  Not really sure how to approach this—kind of a big problem unto itself.

Should I introduce color?  Could be cool.

So there is a lot of conceptual work to be done.

As well as code:

There are a lot of variable hardcoded and the drawing interaction is defined in the main sketch.  The only other class or “object” I created was the button.  Everything else happens on the mains sketch page, partly because I had no idea what the fuck I was doing when I started.  The code generally needs to be cleaned up.

Working with PGraphics and PImage is annoying.  I think I can do everything I want to with PGraphics, but needed PImage to get it this time around.  I want to cut or crop the images so that they don’t have giant fields of transparent space, which makes them impossible to control as though they were discreet objects.  Should be able to do with this with some pixels effect but the method to do that is eluding me.

Mousepressed is also annoying.  Not sure where to go with that, I currently have like five mousepressed statements when I’m sure I only need one with a bunch of else ifs.

There interaction/rotating thing is done with pretty shitty code but it’s not what I’m going for anyway.

So, there’s a lot of work left to do.

Here’s my code since uploading/javascript are not working right now:

boolean drawn = false;
boolean clear; 
PImage img;
PGraphics pg;
color transparent = color(255, 0, 0, 1);
color black = color(0);
color white = color(255);

Button refresh;

void setup() {
  size(600, 600);
  background(255);
  pg = createGraphics(width, height, P2D);
  refresh = new Button();
}

void draw() {

  if (mousePressed && refresh.over() == true) {
    clear();
  } 

  if (mousePressed && drawn == false && refresh.over() == false) {
    makeDrawing();
  }

  if (drawn == true && clear == false) {
    background(255);
    animate();
    refresh.display();
  }
}

void mouseReleased() {
  if (drawn == false && refresh.over() == false) {
    drawn = true;
    buildGuy();
  }
}

void makeDrawing() {
  fill(0);
  noStroke();
  ellipse(mouseX, mouseY, 20, 20);
}

void buildGuy() {
  this.loadPixels();
  pg.beginDraw();
  pg.loadPixels();
  for (int i = 0; i < width; i++) {
    for (int j = 0; j < height; j++) {
      if (this.get(i, j) == black) {
        //        img.set(i, j, black);
        pg.pixels[i + j * width] = black;
      } 
      else if (this.get(i, j) == white) {
        //        img.set(i, j, transparent);
        pg.pixels[i + j * width] = transparent;
      }
    }
  }
  pg.updatePixels();
  pg.endDraw();
  pg.save("frame1.png");
  img = loadImage("frame1.png");
}

void animate() {
  //image(img, mouseX - img.width/2, mouseY - img.height/2);

  float dx = mouseX - width/2;
  float dy = mouseY - height/2;
  float angle = atan2(dy, dx); 
  pushMatrix();
  translate(mouseX, mouseY);
  rotate(angle);
  image(img, 0, 0);
  popMatrix();

  pushMatrix();
  translate(width, height/2);
  rotate(angle);
  image(img, 0, 0);
  popMatrix();

  pushMatrix();
  translate(width, height);
  rotate(angle);
  image(img, mouseX, mouseY);
  popMatrix();

}

void clear() {
  background(255);
  drawn = false;
}

Button class:

class Button {

  float x, y, w, h;
  String title;
  boolean over = false;
  color bkg = color(255, 0);

  Button() {
    w = 50;
    x = width - w - 2;
    y = 2;
    h = 15;
    title = "refresh";
  }

  void display() {

    stroke(0, 0, 0);
    fill(bkg);
    rect(x, y, w, h);

    if (over()) {
      bkg = color(200, 0, 0, 63);
    } 
    else {
      bkg = color(255);
    }

    stroke(0, 0, 0);
    fill(bkg);
    rect(x, y, w, h);

    fill(0);
    text(title, x +1, y+h-1);
  }

  boolean over() {

    if (mouseX > x && mouseX < x + w &&       mouseY > y && mouseY < y + h) {
      return true;

    } 
    else {
      return false;
    }
  }
}
Advertisements

Author: owen ribbit

poop

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s