Final Presentation & openframeworks homework

Final Presentation:

cclab-final

OF homework:

I played with the face tracker example and changed the dimensions and the orientation of the face.

Final Documentation : DJ BOX

I tried to make a DJ Box as a controller for the music beats game.  There are lots of games playing with music, but usually they can play with keyboard or touch screen.  While I was playing these games, I thought something physically shaped controller might help the players feel exciting and engaging with the game better. For playing with the dj box, the players can feel like they are DJ which I aimed for the project. Now the players can not just be a player but also be the cool DJ.

I used real record that fixed with 360 rotary encoder and the led buttons that look like beat engineer machine. I used Arduino to make the physical parts, and HTML, Javascript and JQuery to build a digital game website. For communication, I used Node.js.

Here is the video of playing the game.

 

Final Project: Tale of Seven

http://a.parsons.edu/~rayw188/DemoCopy/Tale%20of%20Seven7.html

Final Project

A webcomic made using parallax scrolling and Vogler’s Seven Archetypes. Please See Website Above and powerpoint for explanation.

Final Project Documentation_ Interactive Chair

After my presentation, I made some change about my chair. Instead of making three chairs, I decided to focus on one. I hided all the sensors and arduino below so it can be put in the public space.
Also, I changed the function. The pressure sensors cannot read exactly the weight is so I designed one of them for creating balls, another for controlling color, and the other for controlling height.

int analogPin1 = 0;
int analogPin2 = 1;
int analogPin3 = 2;
int inByte = 0;
int buzzerPin = 8;
int upSound[] = {100, 200, 300, 400, 500, 600, 700, 800};

float xPos = 0;

void setup(){
Serial.begin(9600);
pinMode(buzzerPin, OUTPUT);
establishContact(); while (!Serial) {
; // wait for serial port to connect. Needed for Leonardo only
}
}

void loop(){
if (Serial.available() > 0) {
// get incoming byte:
inByte = Serial.read();
Serial.write(analogRead(analogPin1));
Serial.write(analogRead(analogPin2));
Serial.write(analogRead(analogPin3));

if (inByte == ‘Y’) {
for(int i = 0; i<= 7; i++){
tone(buzzerPin, upSound[i]);
delay(200);

}
noTone(buzzerPin);
}
if (inByte == ‘W’) {
tone(buzzerPin, 700);
delay(100);
noTone(buzzerPin);
}
if (inByte == ‘R’) {
tone(buzzerPin, 900);
delay(100);
noTone(buzzerPin);
}

delay(100); //change the delay time here
}
}

void establishContact() {
while (Serial.available() <= 0) {
Serial.print(‘A’); // send a capital A
delay(300);
}
}

Processing

import processing.serial.*;
Serial myPort; // The serial port

import ddf.minim.*;
Minim minim;
AudioPlayer song1;
AudioPlayer song2;
AudioPlayer song3;

int[] serialInArray = new int[3]; // Where we’ll put what we receive
int serialCount = 0; // A count of how many bytes we receive
int Sensor1 = 0;
int Sensor2 = 0;
int Sensor3 = 0; // Starting position of the ball
int numBalls;
boolean firstContact = false; // Whether we’ve heard from the microcontroller
boolean play = false;
Ball []ball;

void setup() {
size(displayWidth, displayHeight);
noStroke(); // No border on the next thing drawn

minim = new Minim(this);
song1 = minim.loadFile(“4.mp3”);
song2 = minim.loadFile(“5.mp3”);
song3 = minim.loadFile(“6.mp3”);

numBalls = 0;
ball = new Ball[10000];

for(int i=0; i< 10000; i++){
ball[i] = new Ball();
}

// Print a list of the serial ports, for debugging purposes:
println(Serial.list());
String portName = Serial.list()[4];
myPort = new Serial(this, portName, 9600);

}

void draw() {
background(255);
//Sensor1
if(Sensor1 < 50 && Sensor1 > 1){
ball[numBalls] = new Ball();

if(Sensor2 < 150 && Sensor2 >= 120){
ball[numBalls].ballColor = color(random(255), 250, random(150), 180);
}
else if(Sensor2 < 200 && Sensor2 >= 150){
ball[numBalls].ballColor = color(random(255), random(200), 250, 180);
}

if(Sensor3 < 50 && Sensor3 >= 20){
ball[numBalls].vY = random(0,50);
}
else if(Sensor3 < 80 && Sensor3 >= 50){
ball[numBalls].vY = random(0,100);
}
myPort.write(‘Y’);
song1.play();
play = true;
if(play == true){
song1.rewind();
song1.play();
}

numBalls++;
play = false;
}
else if(Sensor1 < 100 && Sensor1 >= 50){
for(int i=0; i<3; i++){
ball[numBalls] = new Ball();
ball[numBalls].bSize = 45;

if(Sensor2 < 150 && Sensor2 >= 120){
ball[numBalls].ballColor = color(random(255), 250, random(150), 180);
}
else if(Sensor2 < 200 && Sensor2 >= 150){
ball[numBalls].ballColor = color(random(255), random(200), 250, 180);
}
if(Sensor3 < 50 && Sensor3 >= 20){
ball[numBalls].vY = random(0,50);
}
else if(Sensor3 < 80 && Sensor3 >= 50){
ball[numBalls].vY = random(0,100);
}
myPort.write(‘W’);
song2.play();
play = true;
if(play == true){
song2.rewind();
song2.play();
}

numBalls++;
play = false;
}
}
else if(Sensor1 < 200 && Sensor1 >= 100){
for(int i=0; i<8; i++){
ball[numBalls] = new Ball();
ball[numBalls].bSize = 65;

if(Sensor2 < 150 && Sensor2 >= 120){
ball[numBalls].ballColor = color(random(255), 250, random(150), 180);
}
else if(Sensor2 < 200 && Sensor2 >= 150){
ball[numBalls].ballColor = color(random(255), random(200), 250, 180);
}
if(Sensor3 < 50 && Sensor3 >= 20){
ball[numBalls].vY = random(0,50);
}
else if(Sensor3 < 80 && Sensor3 >= 50){
ball[numBalls].vY = random(0,100);
}
myPort.write(‘R’);
song3.play();
play = true;
if(play == true){
song3.rewind();
song3.play();
}

numBalls++;
play = false;
}

}

for(int i=0; i < numBalls; i++){
ball[i].drawBall();
ball[i].movement();
}

}

void stop(){
song1.close();
song3.close();
minim.stop();
super.stop();
}

void serialEvent(Serial myPort) {
// read a byte from the serial port:
int inByte = myPort.read();
// if this is the first byte received, and it’s an A,
// clear the serial buffer and note that you’ve
// had first contact from the microcontroller.
// Otherwise, add the incoming byte to the array:
if (firstContact == false) {
if (inByte == ‘A’) {
myPort.clear(); // clear the serial port buffer
firstContact = true; // you’ve had first contact from the microcontroller
myPort.write(‘A’); // ask for more
}
}
else {
// Add the latest byte from the serial port to array:
serialInArray[serialCount] = inByte;
serialCount++;

// If we have 3 bytes:
if (serialCount > 2 ) {
Sensor1 = serialInArray[0];
Sensor2 = serialInArray[1];
Sensor3 = serialInArray[2];

// print the values (for debugging purposes only):
println( Sensor1+ “\t” + Sensor2 + “\t” + Sensor3);

// Send a capital A to request new sensor readings:
myPort.write(‘A’);
// Reset serialCount:
serialCount = 0;
}
}
}

class Ball{

float bSize = 25;
float r = bSize/2;
float endPosX;
float endPosY = displayHeight-(bSize/2);
float ballPosX;
float ballPosY;
float vY =.1;
float gravity = .98;
float weight = .09;
float vX;
float friction = .9;
color ballColor;

public Ball(){
ballPosX = displayWidth/2;
ballPosY = displayHeight;
ballColor = color(255, random(230), random(150), 180);
vX = random(-20,20);
vY = random(0,30);
}

public void drawBall(){
noStroke();
fill(ballColor);
ellipse(ballPosX,ballPosY,bSize,bSize);
}

public void movement(){

// Up/Down Motion
if((ballPosY < endPosY) && (vY > 0)){
vY += gravity; //going down!
} else if((ballPosY > endPosY) && (vY > 0)) {
vY = -vY; //flip to up
} else if((vY <= 0) && (ballPosY > r)) {
vY += gravity; // going up
vY = vY*(1-weight);
} else if(ballPosY <= r) {
vY = -vY; // flip to down
}

ballPosY += vY;
ballPosX += vX;
}
}

Final Project Documentation (yay!)

For my final, I made a 3d illusion that rotates a camera based on the position of your head using face detection. I used an OpenCV  library for processing (https://github.com/atduskgreg/opencv-processing) and sent the position and size of the closest face detected to Unity.

Here’s how it came out:

Here’s the Processing code (which I commented for once):

import oscP5.*;
import netP5.*;
import processing.serial.*;
import gab.opencv.*;
import processing.video.*;
import java.awt.*;

Capture video;
OpenCV opencv;

OscP5 oscP5;
NetAddress myBroadcastLocation;

//my variables
int Index;

float xpos;
float ypos;
float zpos;

float xprev;
float yprev;
float zprev;

float ease = 0.5;

float xaxis = 0;
float yaxis = 0;
float zaxis = 0;

float[] axisArr = new float[3];

float countdown = 255;

//use 30 or 60
int myfps = 60;

//use 1 for 640px by 480px
//use 2 for 320px by 240px
int res = 2;

void setup() {
////
size(640/res, 480/res);
frameRate(myfps);
video = new Capture(this, 640/(2*res), 480/(2*res), myfps);
opencv = new OpenCV(this, 640/(2*res), 480/(2*res));
opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);

video.start();

//init variables
xpos = width/4;
ypos = height/4;
zpos = 0;
xprev = xpos;
yprev = ypos;
zprev = zpos;

//start oscP5, listening for incoming messages at port 12000
oscP5 = new OscP5(this,12000);
//broadcasting on port 8000
myBroadcastLocation = new NetAddress(“127.0.0.1”,8000);

}

//change fps and/or res vars, then call resetup in draw
//lets user pick between lower cpu usage or higher quality tracking
void resetup() {
video.stop();

//resize window
frame.setResizable(true);
frame.setSize(640/res, 480/res);
frame.setResizable(false);
frameRate(myfps);
video = new Capture(this, 640/(2*res), 480/(2*res), myfps);
opencv = new OpenCV(this, 640/(2*res), 480/(2*res));
opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);

video.start();

//re-init variables
xpos = width/4;
ypos = height/4;
zpos = 0;
xprev = xpos;
yprev = ypos;
zprev = zpos;
}

void draw() {
////
background(200);
scale(2);
opencv.loadImage(video);

//draw camera feed
image(video, 0, 0);

//for testing – green outline
/*
noFill();
stroke(0, 255, 0);
strokeWeight(3);
*/

Rectangle[] faces = opencv.detect();
println(faces.length);

//clears saved closest face index
Index = 0;

//loop through array faces[]
for (int i = 0; i < faces.length; i++) {

//for testing – draws rectangles around faces
/*
//println(faces[i].x + “,” + faces[i].y);
//rect(faces[i].x, faces[i].y, faces[i].width, faces[i].height);
*/

//save the index of the closest face to the screen in array faces[]
if(faces[i].width*faces[i].height > faces[Index].width*faces[Index].height) {
Index = i;
}
}

//save closest face’s position in the screen space
if (faces.length>=1) {
xpos = faces[Index].x + (faces[Index].width/2);
ypos = faces[Index].y + (faces[Index].height/2);
zpos = faces[Index].height;
}

//convert the positions to ratios
xaxis = ((xpos/(width/2))-0.5)*2;
yaxis = ((ypos/(height/2))-0.5)*2;
zaxis = ((zpos/(height/2))-0.5)*2;;

//save position ratios in an array to send to Unity
axisArr[0] = xaxis;
axisArr[1] = yaxis;
axisArr[2] = zaxis;

//ease the raw positions
xpos = xprev+((xpos-xprev)*ease);
ypos = yprev+((ypos-yprev)*ease);
zpos = zprev+((zpos-zprev)*(ease/2));
//*depth is eased twice as much because it’s extra jittery

//draw marker overlay
noStroke();
fill(255,100);
rect(0,0,width, height);
ellipse(xpos, ypos, zpos, zpos);
ellipse(xpos, ypos, zpos*1.35, zpos*1.35);

println(axisArr);

//save face position of last frame
xprev = xpos;
yprev = ypos;
zprev = zpos;

//fade in screen from white
fill(255,countdown);
if (countdown>0){
countdown-=5;
}
rect(0,0,width, height);
////

/*Sends axisArr to Unity
UDPHost adress 127.0.0.1 port 8000*/
sendAxis();
}

void sendAxis() {
OscMessage myOscMessage = new OscMessage(“/axisTest”);
myOscMessage.add(axisArr);
oscP5.send(myOscMessage, myBroadcastLocation);

}

void captureEvent(Capture c) {
c.read();
}

 

void oscEvent(OscMessage theOscMessage) {
/* get and print the address pattern and the typetag of the received OscMessage */
println(“### received an osc message with addrpattern “+theOscMessage.addrPattern()+” and typetag “+theOscMessage.typetag());
theOscMessage.print();
}

The code in unity just places an object in 3d space relative to the camera at the head’s x and y positions, using size as the z axis. It communicates with an OSC socket connection. The camera is then set to always face opposite the object representing the player’s head (which is positioned behind the camera).

openFrameworks homework

For this homework, I modified the imageSubsectionExample so that it acts like a magnifying glass.  It can work for texts that are too small to read.

 

 

Code:

//————————————————————–

void testApp::setup(){

ofSetVerticalSync(true);

img.loadImage(“words.jpg”);

ofSetLineWidth(2);

}

 

//————————————————————–

void testApp::update(){

 

}

 

//————————————————————–

void testApp::draw(){

ofBackground(ofColor::black);

 

// draw the original image

ofSetColor(ofColor::white);

img.draw(0, 0);

 

// draw the four rectangles

ofNoFill();

ofSetColor(ofColor::red);

ofRect(mouseX, mouseY, 100, 100);

 

ofSetColor(ofColor::green);

ofRect(mouseX+15, mouseY+15, 75, 75);

 

ofSetColor(ofColor::blue);

ofRect(mouseX + 25, mouseY + 25, 50, 50);

 

ofSetColor(ofColor::magenta);

ofRect(mouseX +35, mouseY + 35, 25, 25);

// draw the four corresponding subsections

ofTranslate(427, 0);

ofSetColor(ofColor::white);

img.drawSubsection(0, 0, 100, 100, mouseX, mouseY);

ofSetColor(ofColor::red);

ofRect(0, 0, 100, 100);

 

ofSetColor(ofColor::white);

img.drawSubsection(0, 100, 100, 100, mouseX+15, mouseY+15, 75, 75);

ofSetColor(ofColor::green);

ofRect(0, 100, 100, 100);

 

ofSetColor(ofColor::white);

img.drawSubsection(0, 200, 100, 100, mouseX + 25, mouseY + 25, 50, 50);

ofSetColor(ofColor::blue);

ofRect(0, 200, 100, 100);

 

ofSetColor(ofColor::white);

img.drawSubsection(0, 300, 100, 100, mouseX + 35, mouseY + 35, 25, 25);

ofSetColor(ofColor::magenta);

ofRect(0, 300, 100, 100);

}

 

//————————————————————–

void testApp::keyPressed(int key){

 

}

 

//————————————————————–

void testApp::keyReleased(int key){

 

}

 

//————————————————————–

void testApp::mouseMoved(int x, int y ){

 

}

 

//————————————————————–

void testApp::mouseDragged(int x, int y, int button){

 

}

 

//————————————————————–

void testApp::mousePressed(int x, int y, int button){

 

}

 

//————————————————————–

void testApp::mouseReleased(int x, int y, int button){

 

}

 

//————————————————————–

void testApp::windowResized(int w, int h){

 

}

 

//————————————————————–

void testApp::gotMessage(ofMessage msg){

 

}

 

//————————————————————–

void testApp::dragEvent(ofDragInfo dragInfo){

 

}

FINAL_Helen

 

 

 

 

 

This is my final work for CClab.

I made an interactive narrative.

This is my presentation pdf.

Click to access FINAL_1210_cclab.pdf

And this is my highlight video of my work.

Thank you.

Open Frame Work_HW_Helen

I did my Openframework! I changed color and position just a little bit, but it was so much fun!

https://vimeo.com/81957697

 

Arduino HW

I upload all my arduino HW in this post.

1. 3 LEDs

int ledPin_red = 11;
int ledPin_yellow = 12;
int ledPin_blue = 13;

void setup(){
Serial.begin(9600);
pinMode(ledPin_red, OUTPUT);
pinMode(ledPin_yellow, OUTPUT);
pinMode(ledPin_blue, OUTPUT);

}

void loop(){

digitalWrite(ledPin_red, HIGH);
delay(100);
digitalWrite(ledPin_red, LOW);
delay(100);
digitalWrite(ledPin_yellow, HIGH);
delay(100);
digitalWrite(ledPin_yellow, LOW);
delay(100);
digitalWrite(ledPin_blue, HIGH);
delay(100);
digitalWrite(ledPin_blue, LOW);
delay(100);

digitalWrite(ledPin_red, HIGH);
digitalWrite(ledPin_yellow, HIGH);
digitalWrite(ledPin_blue, HIGH);
delay(1000);
digitalWrite(ledPin_red, LOW);
digitalWrite(ledPin_yellow, LOW);
digitalWrite(ledPin_blue, LOW);
delay(1000);

}

2. 3 LEDs and 3 Buttons

int ledPin_red = 11;
int ledPin_yellow = 12;
int ledPin_blue = 13;

int buttonPin_r = 4;
int buttonPin_y = 8;
int buttonPin_b = 10;

boolean pushed_R = false;
boolean pushed_Y = false;
boolean pushed_B = false;

void setup(){
Serial.begin(9600);
pinMode(ledPin_red, OUTPUT);
pinMode(ledPin_yellow, OUTPUT);
pinMode(ledPin_blue, OUTPUT);

pinMode(buttonPin_r, INPUT);
pinMode(buttonPin_y, INPUT);
pinMode(buttonPin_b, INPUT);

digitalWrite(buttonPin_r, HIGH);
digitalWrite(buttonPin_y, HIGH);
digitalWrite(buttonPin_b, HIGH);

}

void loop(){

static int buttonState_r;
static int buttonState_y;
static int buttonState_b;

buttonState_r = digitalRead(buttonPin_r);
buttonState_y = digitalRead(buttonPin_y);
buttonState_b = digitalRead(buttonPin_b);

if(!buttonState_r){
pushed_R = !pushed_R;
if(pushed_R){
digitalWrite(ledPin_red, HIGH);
delay(100);
}else if(!pushed_R){
digitalWrite(ledPin_red, LOW);
delay(100);
}
}
if(!buttonState_y){
pushed_Y = !pushed_Y;
if(pushed_Y){
digitalWrite(ledPin_yellow, HIGH);
delay(100);
}else if(!pushed_Y){
digitalWrite(ledPin_yellow, LOW);
delay(100);
}
}
if(!buttonState_b){
pushed_B = !pushed_B;
if(pushed_B){
digitalWrite(ledPin_blue, HIGH);
delay(100);
}else if(!pushed_B){
digitalWrite(ledPin_blue, LOW);
delay(100);
}
}

}

https://vimeo.com/81955621

3. serial input

int ledPin [] = {8,9,10,11};\
int buzzerPin = 2;
int incomingByte = 0;

void setup(){
Serial.begin(9600);

for(int i=0; i<4; i++)
pinMode(ledPin[i], OUTPUT);

pinMode(buzzerPin, OUTPUT);

}

void loop(){

if(Serial.available() >0){
incomingByte = Serial.read();

if(incomingByte ==’ ‘){
delay(500);
}else if(incomingByte == ‘r’){
digitalWrite(ledPin[0], HIGH);
tone(buzzerPin, 1000);
delay(500);
noTone(buzzerPin);
digitalWrite(ledPin[0], LOW);
}else if(incomingByte == ‘y’){
digitalWrite(ledPin[1], HIGH);
tone(buzzerPin, 1500);
delay(500);
noTone(buzzerPin);
digitalWrite(ledPin[1], LOW);
}else if(incomingByte == ‘g’){
digitalWrite(ledPin[2], HIGH);
tone(buzzerPin, 2000);
delay(500);
noTone(buzzerPin);
digitalWrite(ledPin[2], LOW);
}else if(incomingByte == ‘b’){
digitalWrite(ledPin[3], HIGH);
tone(buzzerPin, 2500);
delay(500);
noTone(buzzerPin);
digitalWrite(ledPin[3], LOW);
}
Serial.print(char(incomingByte));
}

}

Final – Don’t Grind Your Gears

Here is the presentation:

http://lucyaimeemorcos.files.wordpress.com/2013/12/dontgrindyourgearsfinal.pdf

Here is the working video:

https://vimeo.com/81953258

Here is the code, which incorporates the prewritten code by the maker and my own additions to cater it towards my project:

//COPYRIGHT (C) 2013, ADVANCER TECHNOLOGIES, ALL RIGHTS RESERVED

// Developed by Brian E. Kaminski – Advancer Technologies

// http://www.AdvancerTechnologies.com

//***********************************************

void setup();
void loop();
boolean UpdateSensorState();
void SendSensors();

//Setup serial key to signify a mouse left click
byte MOUSE_LEFT_CLICK = 0x1;

const int sensorPin = A0;
const int buzzPin = 8; //8
const int vibePin = 3;

int iThreshold = 150;
boolean bPrevSensorState=false;
boolean bCurrSensorState=false;

void setup()
{
pinMode(buzzPin, OUTPUT);
pinMode(vibePin, OUTPUT);
pinMode(sensorPin, INPUT);

Serial.begin(115200);
delay(100);
}

void loop()
{
UpdateState();
SendSerial();
}

void UpdateState()
{
//SENSOR – RIGHT
int val = analogRead(sensorPin);
if(val >= iThreshold)
{
bPrevSensorState = bCurrSensorState;
bCurrSensorState = true;
}
else
{
bPrevSensorState = bCurrSensorState;
bCurrSensorState = false;
}

delay(10);
}
void SendSerial()
{
byte press[7] = {0xFD,0x05,0x02,0x01,0x00,0x00,0x00};
byte release[7] = {0xFD,0x05,0x02,0x00,0x00,0x00,0x00};

if(bCurrSensorState && !bPrevSensorState)
{
tone(buzzPin,500, 1000);
digitalWrite(vibePin, HIGH);
Serial.write(press, 7);
}
else if(!bCurrSensorState && bPrevSensorState)
{

digitalWrite(vibePin, LOW);
Serial.write(release, 7);
}
}