Author: Dhabia AlMansoori

Final Project

After all the mental breakdowns and the literal physical pain, this semester has come to a close. My final project wanted to raise some sort of awareness on the environment and on the dangers of consumption and greed. Although it did come out a bit more comical than I intended it to,  I think my final project was a success as it made people laugh, have fun and more importantly, think.

These are all the paintings for the interface, done with watercolors:

The box went from this:

To this:

I still think it would’ve looked nicer with wood, but for something DIY-ed I think it looks really good.

This is the code for my final project, never thought I’d say this in my life but I’m glad the code got deleted because I actually learned a lot while working and figuring things out. The funniest thing was attempting to add the sounds to the program last minute, and it actually worked!!!!

import processing.sound.*;
SoundFile beep;
SoundFile happy;
SoundFile scary;

import processing.video.*;
import jp.nyatla.nyar4psg.*;


PImage background;
PImage background2;
PImage tree;
PImage tree2;
PImage bush;
PImage mushroom;
PImage factory;
PImage waterBottle;
PImage TrashCan;
PImage bags;
PImage bear;
PImage dBear;
PImage lily;
PImage lily2;
PImage fish1;
PImage fish2;
PImage fish3;
PImage deadFish1;
PImage deadFish2;
PImage deadFish3;
PImage bird;
PImage bird2;
PImage bird3;
PImage bird4;
PImage deadBirdPic; 
PImage deadBirdPic2;


Movie Apocalypse;


int value = 0;


Capture cam;


MultiMarker nya;


int[] objects = {1, 2, 3, 4, 5, 6, 7, 8, 9, 0};
int i = objects.length;


boolean b = true;
boolean backgroundB = false;
boolean factoryPic = false;
boolean trashCan = false;
boolean bag = false;
boolean bottle =false;
boolean apocalypse = false;
boolean deadBird = true; 
boolean treesGone = true; 
boolean deadBear = true;
boolean fish = true; 
boolean Badmusic = false;

void setup() {
  //size(1920, 1080, P3D);
  fullScreen(P3D, 2);
  colorMode(RGB, 100);
    String[] cameras = Capture.list();
  //printArray(cameras);
  cam = new Capture(this, cameras[0]); 
  //cam=new Capture(this, 1280,700);
  nya=new MultiMarker(this, 1920, 1080, "camera_para.dat", NyAR4PsgConfig.CONFIG_PSG);
  
  Apocalypse = new Movie(this, "fire.mov");
  
    beep = new SoundFile(this, "beep.wav");
    scary = new SoundFile(this, "thunder.wav");
    happy = new SoundFile(this, "nature.wav"); 
    
  background = loadImage("background.png");
  background2 = loadImage("background2.png");
  
  factory = loadImage("factory4.png");
  TrashCan = loadImage("trashcan.png");
  bags = loadImage("bags.png");
  waterBottle = loadImage("waterBottle.png");
  

  tree = loadImage("tree.png");
  bush = loadImage("bush.png");
  tree2 = loadImage("tree2.png");
  bear = loadImage("bear.png");
  dBear = loadImage("deadBear.png");
  
  bird = loadImage("bird.png");
  bird2 = loadImage("bird2.png");
  bird3 = loadImage("bird3.png");
  bird4 =loadImage ("bird4.png");
  deadBirdPic = loadImage("deadBird.png");
  deadBirdPic2 = loadImage("deadBird2.png");
  
  fish1 = loadImage("fish1.png");
  fish2 = loadImage("fish2.png");
  fish3 = loadImage("fish3.png");
  deadFish1 = loadImage("deadfish1.png");
  deadFish2 = loadImage("deadfish2.png");
  deadFish3 = loadImage("deadfish3.png");
  lily = loadImage("lily1.png");
  lily2 = loadImage("lily2.png");
  
  
  fish1.resize(80,100);
  fish2.resize(80,100);
  fish3.resize(100,80);
  deadFish1.resize(120,80);
  deadFish2.resize(120,80);
  deadFish3.resize(120,80);
  
  tree.resize(600, 750);
  tree2.resize(500,600);
  bush.resize(200,400);
  
  bear.resize(280, 400);
  dBear.resize(450,180);
  
  bird.resize(200, 200);
  bird2.resize(200, 200);
  bird3.resize(200,100);
  bird4.resize(200,200);
  deadBirdPic.resize(200,100);
  deadBirdPic2.resize(300,100);
  factory.resize(350, 550);
  TrashCan.resize(400,600);
  bags.resize(500,400);
  //dBear.resize(,)
  factory.resize(400, 600);
  for (int c = 0; c < i; c++) {
    nya.addNyIdMarker(c, 80);
  }

  cam.start();
  background(background);
  noCursor();
}

void draw() {
  if (cam.available()!=true) {
    return;
  }
  cam.read();
  nya.detect(cam);
  background(background);

  image(Apocalypse, 0, 0);

  //if (b) {
  //  pushStyle();
  //  imageMode(CORNER);
  //  pushMatrix();
  //  //translate(1280/2,700/2);
  //  nya.drawBackground(cam);
  //  popMatrix();
  //  popStyle();
  //}

  //Apocalypse.resize(displayWidth,displayHeight); how do i make the video fullscreen?
  //use some app and rezise and change the Apocalypse video before class on Monday please please please Dhabiaaaa
  
  for (int c = 0; c < i; c++) {
    if ((!nya.isExist(c))) {
      //println(nya.getNyId(c));
      
      //println("returning");
      continue;
    }

    if (c==1) {
      if (!beep.isPlaying() && deadBear==true){
        beep.play();
      }
      else{
        beep.stop();
      }
      //Bear turns to carpet code 
      deadBear = false;
      break;
    }
    
    if (c==2 && treesGone == true) {
       treesGone = false;
      if (!beep.isPlaying()){
        beep.play();
      }
      else{
        beep.stop();
      }   //tree falls code because of table or chair or maybe both????
    }
    
    if (c==3 && trashCan == false) {
      if (!beep.isPlaying()){
        beep.play();
      }
      else{
        beep.stop();
      }
      trashCan = true;
     }
          
    if (c==4&& factoryPic==false) {
      factoryPic = true;
      if (!beep.isPlaying()){
        beep.play();
      }
      else{
        beep.stop();
      }
    }

    if (c==5 && fish == true) {
      if (!beep.isPlaying()){
        beep.play();
      }
      else{
        beep.stop();
      }      //fish
      fish = false;
    }
    
    if (c==6 && deadBird == true) {
      if (!beep.isPlaying()){
        beep.play();
      }
      else{
        beep.stop();
      }      //bird dies 
      deadBird = false;
    }
    
    if (c==7 && bag == false) {
      if (!beep.isPlaying()){
        beep.play();
      }
      else{
        beep.stop();
      }      bag = true;
    }
    
    
    if (c==8 && backgroundB ==false) {
      if (!beep.isPlaying()){
        beep.play();
      }
      else{
        beep.stop();
      }      backgroundB = true;
    }
    
    if (c==9) {
      
    }
    
    if (c==0 && apocalypse == false) {
      if (!beep.isPlaying()){
        beep.play();
      }
      else{
        beep.stop();
      }      //don't forget to rezie the video + add a text that says, real life has no reset button
      Apocalypse.loop();
      apocalypse=true;
    }
    

  }


  
  if (backgroundB){
    background(background2);
    
  }
  
  if (bag && apocalypse == false){
    image(bags, 1100, 250); //fix
  }
  

  
  if (!deadBird && apocalypse==false){
    image(deadBirdPic, 80,780);
    image(deadBirdPic2, 600, 450);
  }
  if (deadBird && apocalypse==false){
  image(bird, 800, 100);
  image(bird2, 100, 50);
  image(bird3, 1000, 50);
  image(bird4, 500, 50);
  }
  if (fish && apocalypse == false){
    image(fish1,700,750);
    image(fish2,500,740);
    image(fish3,900,730);
    image(lily,1000,740);
    image(lily2,800,720);

  }
  if (!fish && apocalypse == false){
    image(deadFish1,700,750);
    image(deadFish2,1100,730);
    image(deadFish3,900,730);
  }
  if (treesGone && apocalypse == false){
  image(tree2,1000,100);    
  image(tree, 1300, 0);
  image(bush,1300,500);
  //Add more trees
  }
  if (deadBear && apocalypse == false){
   image(bear, 250, 600);  
  }

  
  if (trashCan && apocalypse == false){
    image(TrashCan, 1400, 550); //fix

  } 
  
    if (factoryPic) {
    image(factory, 0, 0);
  }
  
    if (!deadBear && apocalypse == false){
    image(dBear,100,500);
  }
  
  if (!apocalypse){
    if (!happy.isPlaying()){
      happy.loop();
    }
  }
  
  if (apocalypse) {
    if (happy.isPlaying()){
      scary.loop();
    if (scary.isPlaying()){
      happy.stop();
    }
      
    }
    image(Apocalypse, 0, 0);
    textSize(80);
    text("Real life has no reset button", 50, 80);
    factoryPic = false;
    treesGone = false; 
    deadBird=true; 

  }
}


void keyPressed() {
  if (keyPressed) {
    if (key == 'b' || key == 'B') {
      b = !b;
    }
  }
}


void movieEvent(Movie m) {
  m.read();
}

 

User-testing

SORRY FOR THE LATE BLOG POST – I FORGOT.  I REALLY POSTED IT LAST NIGHT AND THEN JUST- forgot. sigh. All of my users are on the thread below:

 

Rick told me to add beeping sounds and signifiers, so I’ll try that.

Prototyping My Final Project

What I have now is definitely somewhat of a prototype, although I think I might have to work extra hard this weekend to have everything done by Monday – I do not want to pull an allnighter on Wednesday and panic before the showcase.

Physical Aspect

I made a prototype of the physical aspect of it. It looks quite nice, but I am going to remake it for better matching and to better the overall aesthetics of the box.

Coding Aspect

The code I have right now is a major improvement than what I had back on Sunday. I can make the png images appear when scanning the markers. I have also managed to draw every marker separately. I managed to also load the factory image (the only one I made into a png so far) and assign it to a marker (Marker number 4).

Things I will need help with: How can I make it so the building stays and does not disappear once a marker is removed from the camera? Do I have to make a boolean variable for every single marker?

Computer Vision for Artists and Designers

The reading starts off discussing how computer vision technologies have become more and more accessible than in the past. They were restricted to military and law-enforcement use but now they’re available for artists and people of all crafts to enjoy and make something really beautiful. Some of the artworks reminded me of things we saw in class and discussed in the past like the belt installation. We saw one before that was the same concept but with mirrors, and we did something sort of similar with the googly eyes in processing.   The reading discussed the technical aspects of computer vision a lot and was sort of dense,  but it helped when it came to the various aspects of computer vision when it comes to detections, tracking, and interaction. The part of the reading that intrigued me the most was the one on the Suicide Box and how it recorded 17 suicide cases whereas the police only recorded 13. It showed how much social awareness artworks made with computer vision can raise.

Final Project Update – Crisis? I think so.

The screen and buikding aspect – I took measurements of the screen and I am going to start building the box Tuesday afternoon. I’m not stressed about this at all, I think the box is going to turn out very pleasing aesthetically and visually. I know how high the screen will be off the desk, and its h x l measurements.

The Coding aspect – Remember when I mentioned those mental breakdowns? They’re hitting a bit too early with this project. All the code I spent time with the professor writing is gone. I didn’t save it, my laptop ran out of charge and now I have to remember what we did and try to do it again tonight. I – will not say anything else about that. Will probably have to book an appointment (or several) with a few lab instructors tomorrow and get it sorted out.

As for the visual aspect of the process, it is going well, I found a way to turn the drawings into vectors and to cut them perfectly for the interface.

Finalized Project

For the concept, I am doing the following:

I am going to have a physical house, with a window that will basically be somehow attached to a screen. So when you look at the window, you are looking straight at the screen. The house is going to look like a dollhouse of some sorts and the user’s objective is to basically decorate/ furnish the house.

For my program, I am doing the following: 

There has to be some sort of environment, with objects like trees and animals and ponds. They all have to be there on the screen and each object would be connected to a specific pressure sensor. The pressure sensors will all have physical objects placed on them, when a physical object is removed from its place on its sensor, the correlating object on the screen will disappear. 

The three hardest aspects  and why I chose them: 

1- The coding/ programming aspect: I struggle with coding a lot and I think it’s what will take the longest amount of time out of most aspects of the project to tackle.

2-The screen aspect: I need to somehow perfect the screen into a window for my house. It’s going to be somewhat confusing and hard to figure out the parameters and how the box will be stable next to the box. 

3-The building aspect: Achieving balance and harmony across dimensions and materials.

Equipment needs: 

  • Wooden Box
  • Screen
  • Pressure sensors
  • Fabrics
  • Paint
  • Miniature furniture

Physical construction:

To be announced

Electronics:

To be announced

Physical Computing – harder than it seems… or maybe not so much so

 

Physical computing means building interactive physical systems by the use of software and hardware that can sense and respond to the analog world. – wikipedia

This is the Wikipedia definition of physical computing, but it is a very general, very vague one. Starting this course, I had a general idea on what we might be doing, but I never really expected to connect so much with “emotion” and with “being”. My previous notion of interactive art consisted of the following: “Make something move with code and wire”. The layers were not quite clear and it was a sort of “black box”. Now that we are almost at the end of the semester, with so much basic knowledge about physical computing, I can finally see all the layers that might be there in, say, for example, an interactive installation.

Is it helping me become a better person? I don’t know if it’s helping me become a better person, but it’s helping me evolve into a different type of artist. When I think about what type of projects I want to do in the future, I no longer think exclusively of paintings and “archivable” art. I think of interactive installations I want to build and causes I want to help with these installations.

Is it adding something to my life? Yes, it is adding skills to my list of “things I can pull off under extreme stress, pressure, and approaching deadlines”. It is giving me an extension, or rather a whole other creative outlet. While coding is never going to make me as emotional as painting does, it is a big part of interactive art and helps bring things to life.

 What are am I getting out of it? Currently, I would say the satisfaction of getting this course over with and (hopefully) passing. In the future perhaps a job, and maybe a medium through with I can make a change in the world, regardless of how small it may be. All big change starts with small attempts towards a larger goal.

What do others get from it? The experience. Everyone has their own interpretations of a piece. Which is what makes physical computing so special. It takes people beyond just the visuality of the project. You can touch it (not in all cases of course). In other words, you get to be “one with the piece”.

Final Project Blog Post – Dhabia

For my final project, I want to do something that gives digital output, with a physical input. I call this idea: “Wreck this Virtual Habitat”.

As for the use if sensors, I was thinking I could incorporate maybe pressure sensors, by having a pressure sensor with a lot of coins on it, and the more coins you remove from the pressure sensor, the more the environment gets ruined.


Serial Communication : Save Our Planet

Code Sampled From : http://www.adrianglasser.com/EnVisionWorkshop/topics/topic_08.html

I wanted to make something with a message towards good and what is in dire need of immediate good treatment and aid? Our planet.

Arduino Code:

#include <Servo.h> 

Servo myservo;  

                

int pos = 0;    
int ServoPin = 10; 
int ServoAngle; 

void setup() {
  // start serial port at 9600 bps:
  Serial.begin(9600);
  myservo.attach(ServoPin);  
}

void loop() {
  if (Serial.available() > 0) {
    // read the incoming byte:
    ServoAngle = Serial.read(); 
    myservo.write(ServoAngle); 
  }
}

Processing Code:

int new_angle, this_angle, temp_angle;
int e_rad = 100, e_ctr_x = 250, e_ctr_y = 200;
int l_length = 100;
int r_ctr_x = e_ctr_x, r_ctr_y = e_ctr_y;
color angle_color = 200;
PImage bg;

Serial port;  
Serial type;

void setup() {
    bg = loadImage("trees.jpg");

  size(800, 533); 
  new_angle = 90;
    printArray(Serial.list());
  String portname=Serial.list()[3];
  println(portname);
  port = new Serial(this,portname,9600);
  this_angle = 90;
  strokeWeight(15);  
}

void draw() {
  background(bg);  
  textSize(60);
  text("D to destroy, C to Clean" ,0,100);
  if (this_angle < new_angle) {
    //println("1) ", new_angle, angle);
    this_angle = this_angle + 5;
  }
  if (this_angle > new_angle) {
    //println("2) ", new_angle, angle);
    this_angle = this_angle - 5;
  }
  angle_color = int((float(this_angle)/180) * 255);
  fill(255, angle_color, 0);
  ellipse(e_ctr_x, e_ctr_y, e_rad, e_rad);
  //calculate the outer point of the lever arm
  int x2 = int(cos(radians(this_angle)) * l_length + e_ctr_x);
  int y2 = int(sin(radians(this_angle)) * l_length + e_ctr_y);
  //println(x2, y2);
  line(e_ctr_x, e_ctr_y, x2, y2);

  if (temp_angle != this_angle) {
    port.write(this_angle);  //write the servo angle to the serial port
    temp_angle = this_angle;
    println(this_angle);
  }
}
void keyPressed(){
  switch(key) {
  case 'd':
    new_angle = 0;
  break;
  case 'c':
    new_angle = 180;
  break;
  }
  //println(new_angle);
}

This is what the interface looks like on the computer (the processing screen):

When you click C, the servo turns to the clean ocean, full of animals and plants and the text turns to yellow. When you click D, the servo turns to the polluted ocean scene and the text turns to red.