All posts by Maddie Moore

Rainy Day Flower Video

April 28, 2014Final Project, UncategorizedMaddie Moore

For my final, I went back and forth between a few ideas, but ultimately, I decided to address the two elements that I had wanted to try but hadn’t figured out yet: movie and minim. The video is simple because my intention was to include more opportunities for user interaction, but at least it is functional. I had to make the choice between something that works and something that is complex…and I chose something that works. I used some random video that I shot the other day on an iPhone (this is not the video I had originally planned to use) because it is pretty and simple. I chose Youth Lagoon’s “17” to accompany it, as both the movie and the music are nice and calm. To add a bit more complexity, I added a mouseClick function, which simultaneously pauses the movie and the music. This turns the project into a music video player! When the mouse is released, both the movie and music return. I have a key pressed function that evaluates the brightness of the video and then colors the sky blue while the key is pressed to give the appearance of a rainy day/thunderstorm. For this part, I hoped to manipulate the video by tracking someone’s movement with the webcam, but ultimately, I couldn’t figure out how to do this. Thought that I could change the pitch and/or volume of the music that way, or the playback speed of the video. Since I struggled to translate the data from the computer’s vision into manipulation of the video on screen, I replaced that portion with a keyPressed function so when the spacebar is pressed, the video speeds up and the sky turns blue like a rainstorm! I know this looks like a pretty simple project, but for my final, I really wanted to make something entirely functional and visually appealing.

import processing.video.*;
Movie myMovie;

import ddf.minim.*;
Minim minim;
AudioPlayer song;

void setup() {
  size(960, 540);
  myMovie = new Movie(this, "TreeCircle.mov");
  myMovie.loop();

  minim=new Minim(this);
  song= minim.loadFile("17.mp3");
  song.play();

}

void draw() {
  image(myMovie, 0,0, 960, 540);

    }

void mousePressed() {
  myMovie.pause();
  song.pause();
}

void mouseReleased() {
  myMovie.play();
  song.play();

}

void keyPressed() {
 for (int i = 0; i < myMovie.pixels.length;  i++) {  //you can ask the pixel array how long it is
    if ( brightness(myMovie.pixels[i]) > 200) {  //check the brightness of the pixel
      myMovie.pixels[i] = color(0, 200, 250,150);  //
      myMovie.speed(4.0);
    }}}

// Called every time a new frame is available to read
void movieEvent(Movie m) {
  m.read();

}

void stop() {
  song.close();
  minim.stop();

  super.stop();
}

import processing.video.*;

Movie myMovie;

import ddf.minim.*;

Minim minim;

AudioPlayer song;

void setup() {

size(960, 540);

myMovie = new Movie(this, "TreeCircle.mov");

myMovie.loop();

minim=new Minim(this);

song= minim.loadFile("17.mp3");

song.play();

}

void draw() {

image(myMovie, 0,0, 960, 540);

}

void mousePressed() {

myMovie.pause();

song.pause();

}

void mouseReleased() {

myMovie.play();

song.play();

}

void keyPressed() {

for (int i = 0; i < myMovie.pixels.length; i++) { //you can ask the pixel array how long it is

if ( brightness(myMovie.pixels[i]) > 200) { //check the brightness of the pixel

myMovie.pixels[i] = color(0, 200, 250,150); //

myMovie.speed(4.0);

}}}

// Called every time a new frame is available to read

void movieEvent(Movie m) {

m.read();

}

void stop() {

song.close();

minim.stop();

super.stop();

}

Parsing from “I TRIED EATING GOURMET DOG FOOD, AND NOW I HATE MYSELF”

April 14, 2014UncategorizedMaddie Moore

I read this Vice article and figured it might be fun to parse. I enjoyed playing with the aesthetic features in particular, so it’s quite similar to the example we worked with in class, but I gained a more solid understanding of the code since I was using something that already works. I guess the moral of the story here is don’t eat dog food, even if it’s gourmet. To emphasize that point, I used a photo from the article for the background image.

String[] vice;    // The array to hold all of the text
PImage dogfood;
PImage ew;
PImage dog;
boolean pressed=true;
String delimiters = " ,.?!;:[]";

IntDict words;

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

  // Load vice into an array of strings
  String url = ("dogfoodeater.rtf");
  String[] rawtext = loadStrings(url);//comes in as an array (reads every line as seperate array)

  // Join the big array together as one long string
  String everything = join(rawtext, "dogfoodeater.rtf" );//undoes the array-ness of it and makes it one big thing

  // All the lines in vice are first joined as one big String and then split up into an array of individual words. 
  // Note the use of splitTokens() since we are using spaces and punctuation marks all as delimiters.  
  vice = splitTokens(everything, delimiters);

  // Make a new empty dictionary every entry has a name and a value
  words = new IntDict();

  for (int i = 0; i < vice.length; i++) {
    String s = vice[i].toLowerCase();
    words.increment(s); 
  }

  // Sort so that words that appear most often are first
  words.sortValuesReverse();

  dogfood=loadImage("http://assets.vice.com/content-images/contentimage/147711/DSC03667.jpg");
  dogfood.resize(600,600);
  ew=loadImage("http://assets.vice.com/content-images/contentimage/147713/DSC03691.jpg");
  ew.resize(600,600);
  dog=loadImage("http://www.iluvpugdogs.com/wp-content/uploads/2013/02/7.jpg");
  dog.resize(70,70);

 if (pressed==true){
    background(dogfood);
  }
  else {
    pressed=false;
    background(ew);
  }
}

void draw() {
image(dog, mouseX,mouseY);

background(dogfood);

 if (pressed==true){
    background(dogfood);
  }
  else {
    pressed=false;
    background(ew);
  }

  // Display the text and total times the word appears
  int h = 20;
  String[] keys = words.keyArray();

  for (int i = 0; i < height/h; i++) {
    String theword = keys[i];
    int count = words.get(theword);

    fill(mouseX, mouseY, count/.3, 150);
    rect(20, i*20, count*5, h-4);
    fill(255);
    text(theword, 30+count*5,i*h+h/2);
    stroke(255);

   image(dog, mouseX,mouseY);
  }
}

String[] vice; // The array to hold all of the text

PImage dogfood;

PImage ew;

PImage dog;

boolean pressed=true;

String delimiters = " ,.?!;:[]";

IntDict words;

void setup() {

size(600,600);

// Load vice into an array of strings

String url = ("dogfoodeater.rtf");

String[] rawtext = loadStrings(url);//comes in as an array (reads every line as seperate array)

// Join the big array together as one long string

String everything = join(rawtext, "dogfoodeater.rtf" );//undoes the array-ness of it and makes it one big thing

// All the lines in vice are first joined as one big String and then split up into an array of individual words.

// Note the use of splitTokens() since we are using spaces and punctuation marks all as delimiters.

vice = splitTokens(everything, delimiters);

// Make a new empty dictionary every entry has a name and a value

words = new IntDict();

for (int i = 0; i < vice.length; i++) {

String s = vice[i].toLowerCase();

words.increment(s);

}

// Sort so that words that appear most often are first

words.sortValuesReverse();

dogfood=loadImage("http://assets.vice.com/content-images/contentimage/147711/DSC03667.jpg");

dogfood.resize(600,600);

ew=loadImage("http://assets.vice.com/content-images/contentimage/147713/DSC03691.jpg");

ew.resize(600,600);

dog=loadImage("http://www.iluvpugdogs.com/wp-content/uploads/2013/02/7.jpg");

dog.resize(70,70);

if (pressed==true){

background(dogfood);

}

else {

pressed=false;

background(ew);

}

void draw() {

image(dog, mouseX,mouseY);

background(dogfood);

if (pressed==true){

background(dogfood);

}

else {

pressed=false;

background(ew);

}

// Display the text and total times the word appears

int h = 20;

String[] keys = words.keyArray();

for (int i = 0; i < height/h; i++) {

String theword = keys[i];

int count = words.get(theword);

fill(mouseX, mouseY, count/.3, 150);

rect(20, i*20, count*5, h-4);

fill(255);

text(theword, 30+count*5,i*h+h/2);

stroke(255);

image(dog, mouseX,mouseY);

}

Characteristics of Computational Media

April 14, 2014CharacteristicsMaddie Moore

As we concluded on the first day of class, “computational media” is a relatively vague term. However, participation in this class has given me a more specific sense of what the field can offer and the sort of skills that are required to create computational media projects. Initially, I could not identify the difference between digital media and computational media. However, what I’ve discovered is that the latter involves a much deeper understanding of how computers work, even in their most basic forms. In particular, the Arduino demonstrated how physical computers can be in their interactions with the “real world.” Both Arduino and Processing revealed the tedious nature of coding, but they demonstrate a certain learnable reasoning that is involved in the reading and writing code. I’m still baffled by the way in which computers can seemingly understand any variable imaginable, but I guess that’s what allows us to use them as creative tools. To sum up the characteristics of computational media, I guess I’d say that the key elements are code and an original idea. The element of creativity and innovation separates it from basic programming and computation so that the computer functions like any other medium and artists’ tool, just like paint & a brush or pencil and paper. It simply carries out a coded concept in electronic form. For that reason, I’ve developed genuine respect for computational media as a form of artistic creation.

Janky Sticker Tracking

April 7, 2014PixelsMaddie Moore

My intention this week was to use color tracking to track the weird sticker I found. Simply by copying and pasting the color tracking code and making a few small adjustments, I was able to get my camera to track the weird sticker I found successfully. I learned a lot from this, and started to understand the code, but it’s nothing new. However, what I hoped for was to use a mouse click to change the background entirely so that the only thing we see is the color that’s being tracked. That way, it can sort of be used as a little identification card so if someone wears it in a crowd of people, we only see the sticker/or the tracker. Another step to this would be to track the movement of whoever is wearing the sticker by drawing a line from their various positions. Unfortunately, I couldn’t figure out how to activate this. Here’s the basic code for the color tracing though (it’s not exactly original though!)

import processing.video.*;

// Variable for capture device
Capture video;

// A variable for the color we are searching for.
color trackColor; 

void setup() {
  size(320, 240);
  video = new Capture(this, width, height);
  video.start();
  // Start off tracking for red
  trackColor = color(255, 0, 0);
}

void draw() {
  // Capture and display the video
  if (video.available()) {
    video.read();
  }
  video.loadPixels();
  image(video, 0, 0);

  // Before we begin searching, the "world record" for closest color is set to a high number that is easy for the first pixel to beat.
  float worldRecord = 500; 

  // XY coordinate of closest color
  int closestX = 0;
  int closestY = 0;

  // Begin loop to walk through every pixel
  for (int x = 0; x < video.width; x ++ ) {
    for (int y = 0; y < video.height; y ++ ) {
      int loc = x + y*video.width;
      // What is current color
      color currentColor = video.pixels[loc];
      float r1 = red(currentColor);
      float g1 = green(currentColor);
      float b1 = blue(currentColor);
      float r2 = red(trackColor);
      float g2 = green(trackColor);
      float b2 = blue(trackColor);

      // Using euclidean distance to compare colors
      float d = dist(r1, g1, b1, r2, g2, b2); // We are using the dist( ) function to compare the current color with the color we are tracking.

      // If current color is more similar to tracked color than
      // closest color, save current location and current difference
      if (d < worldRecord) {
        worldRecord = d;
        closestX = x;
        closestY = y;
      }
    }
  }

  // We only consider the color found if its color distance is less than 10. 
  // This threshold of 10 is arbitrary and you can adjust this number depending on how accurate you require the tracking to be.
  if (worldRecord < 5) { 
    // Draw a circle at the tracked pixel
    fill(trackColor);
    strokeWeight(4.0);
    stroke(0);
    ellipse(closestX, closestY, 16, 16);
  }
}

void mousePressed() {
  // Save color where the mouse is clicked in trackColor variable
  int loc = mouseX + mouseY*video.width;
  trackColor = video.pixels[loc];

}

import processing.video.*;

// Variable for capture device

Capture video;

// A variable for the color we are searching for.

color trackColor;

void setup() {

size(320, 240);

video = new Capture(this, width, height);

video.start();

// Start off tracking for red

trackColor = color(255, 0, 0);

}

void draw() {

// Capture and display the video

if (video.available()) {

video.read();

}

video.loadPixels();

image(video, 0, 0);

// Before we begin searching, the "world record" for closest color is set to a high number that is easy for the first pixel to beat.

float worldRecord = 500;

// XY coordinate of closest color

int closestX = 0;

int closestY = 0;

// Begin loop to walk through every pixel

for (int x = 0; x < video.width; x ++ ) {

for (int y = 0; y < video.height; y ++ ) {

int loc = x + y*video.width;

// What is current color

color currentColor = video.pixels[loc];

float r1 = red(currentColor);

float g1 = green(currentColor);

float b1 = blue(currentColor);

float r2 = red(trackColor);

float g2 = green(trackColor);

float b2 = blue(trackColor);

// Using euclidean distance to compare colors

float d = dist(r1, g1, b1, r2, g2, b2); // We are using the dist( ) function to compare the current color with the color we are tracking.

// If current color is more similar to tracked color than

// closest color, save current location and current difference

if (d < worldRecord) {

worldRecord = d;

closestX = x;

closestY = y;

}

// We only consider the color found if its color distance is less than 10.

// This threshold of 10 is arbitrary and you can adjust this number depending on how accurate you require the tracking to be.

if (worldRecord < 5) {

// Draw a circle at the tracked pixel

fill(trackColor);

strokeWeight(4.0);

stroke(0);

ellipse(closestX, closestY, 16, 16);

}

void mousePressed() {

// Save color where the mouse is clicked in trackColor variable

int loc = mouseX + mouseY*video.width;

trackColor = video.pixels[loc];

}

Don’t Let Go of Nirvana

March 31, 2014TelecommunicationMaddie Moore

This week, I used the force sensor to link the Arduino with my enlightenment scene in Processing. Basically, when the user holds onto the force sensor, Nirvana stays on the screen. However, if the user becomes distracted and let’s go, the screen reverts to the image of Buddha trying to meditate. I like this version better because it allows the user to physically engage with the quest for Nirvana. Continue reading Don’t Let Go of Nirvana →

Buddha Avoiding Temptations

March 24, 2014Many ThingsMaddie Moore

Continue reading Buddha Avoiding Temptations →

Omnipotent Creepy Clown

March 10, 2014AnimationMaddie Moore

For this little exercise, my idea was to have a circus tent in the background with a clown that appears. However, the result is a massive clown that bounces around the screen. His movement is programmed, but can be manipulated by the placement of the mouse. One of the things I’d like to change is the size of the clown. I’d also like to learn how to make him multiply with a mouseClick.

Here’s my code:

PImage clown;

float size = 10;
float posX = 10;
float posY = 20;
float speedX = 3;
float speedY = 3;
void setup(){
size(600,400);
clown = loadImage(“circus-clown.jpeg”);

}

void draw(){
background(loadImage(“3_circus_tent_8x12.jpg”));
posX = posX + speedX;
posY = mouseY + speedY;

if(posX > width ||posX < 0){
speedX = speedX * -1;
}
if(posY > height ||posY < 0){
speedY = speedY * -1;

}
image(clown, posX-40, posY-20);

}

Apartment and the Sun

February 24, 2014UncategorizedMaddie Moore

This week, I really enjoyed getting to work with Processor (though my artistic abilities are clearly sub-par)! To begin, I just started making basic shapes, which resulted in a very simple looking apartment building. However, this actually took quite a bit of time initially, because I suck at math and the windows were rather tricky! Afterwards, I just messed around by exploring the Processing Language Reference and made a little outer space scene that includes a rotating sphere, a.k.a. “the sun,” as well as the first three planets in our solar system (Mercury, Venus, and Earth). They sort of revolve around the sun in some sort of bizarre way when you drag your mouse across it, but to create this, I mostly copied and pasted the example code and then played with the colors and placement of the shapes, so I still have no clue how the rotation, etc. actually works.

The code for the apartment building is here:

size(640,360);
background(150,150,230);

stroke(255,200,10);
fill(255,255,0);
ellipse(450,50,50,50);

stroke(255,0,0);
fill(255,255,0);
rect(170,60,200,290);

fill(0,150,200,20);
rect(185,270,40,80);

fill(255);
stroke(0,0,255);
rect(250,280,60,30);

stroke(0,0,255);
line(280,280,280,310);

stroke(0,0,255);
line(250,295,310,295);

stroke(255,0,0);
fill(0,150,200,20);
rect(185,170,40,80);

fill(255);
stroke(0,0,255);
rect(250,190,60,30);

stroke(0,0,255);
line(280,190,280,220);

stroke(0,0,255);
line(250,205,310,205);

stroke(255,0,0);
fill(0,150,200,20);
rect(185,70,40,80);

fill(255);
stroke(0,0,255);
rect(250,90,60,30);

stroke(0,0,255);
line(280,90,280,120);

stroke(0,0,255);
line(250,105,310,105);

And here is the code for the rotating sphere/planet scene:

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

void draw() {
background(100,0,240);
stroke(200,100, 0);
translate(150, 150, 0);
rotateX(mouseY * 0.05);
rotateY(mouseX * 0.05);
fill(mouseX * 10, 200, 100);
sphereDetail(mouseX / 4);
sphere(140);

stroke(200,100, 0);
translate(500, 200, 0);
rotateX(mouseY * 0.05);
rotateY(mouseX * 0.05);
fill(mouseX * 120, 10, 100);
sphereDetail(mouseX / 4);
sphere(40);

stroke(0);
fill(150);
rect(350,120,20,10);

stroke(100,100,0);
fill(200,200,0);
ellipse(500,50,50,50);

stroke(20,100,250);
fill(0,200,200);
ellipse(580,80,60,60);

}

Is this seat free?

February 10, 2014Mstr Atoms and BitsMaddie Moore

In this very very basic project, this switch reveals if a seat is available or occupied, using similar lighting signals to a taxi. When the seat is free, the switch is not activated and the light remains on and blinking. When someone sits down, the switch is activated, turning the switch off. The code I used for this is the same one that we used in class. The photo shows the Arduino set up but does not include the switch (I left that at home). The red and black wires are connected to the switch when it is attached.

Teacup Switch

February 2, 2014The Rest Of YouMaddie Moore

This switch will protect the wooden table by revealing if people are using coasters or not. The bottom rim of the teacup is lined with copper ribbon so if the user fails to use a coaster, the switch is activated when the cup touches the table (where the wires are located), completing the circuit and turning on the LED. It’s not entirely realistic, seeing that the teacup has to land directly on the wires in order to activate the switch, but at least it works as long as the cup touches the wires somehow, regardless of the exact position it is set down in.

ICM

Creative Computing

All posts by Maddie Moore

Rainy Day Flower Video

Parsing from “I TRIED EATING GOURMET DOG FOOD, AND NOW I HATE MYSELF”

Characteristics of Computational Media

Janky Sticker Tracking

Don’t Let Go of Nirvana

Buddha Avoiding Temptations

Omnipotent Creepy Clown

Apartment and the Sun

Is this seat free?

Teacup Switch