Reading Light: Flip Flop

For this assignment, I wanted to create a generative drawing based on light read by my light sensor.  To do this, I had to connect a light sensor to my Lilypad Arduino and then use Processing to create the drawing, with aspects affected by the values read by the sensor.  I uploaded the example code AllInputsFirmata into my Lilypad which allows it to connect with Processing, then used this code for Processing:
import processing.serial.*;
import cc.arduino.*;
Arduino arduino;

float rotacActual=0;
float perlinPos=0;
float perlinVel=0.1;

int sensorValue;

void setup() {
size(1000, 1000, P3D);
frameRate(10);
background(0);

arduino = new Arduino(this, Arduino.list()[2], 57600);
arduino.pinMode(3, Arduino.INPUT);

}

void draw() {

int sensorValue = arduino.analogRead(3);
println(sensorValue);

// fill(0, 0.1);
translate(width/2, height/2, -100);

float modifica=noise(perlinPos)*50;
translate(0, -100);
float transporta=noise(perlinPos*perlinVel)*400;
float escala=noise(transporta)*150;

pushMatrix();
//rotateX(noise(rotacActual)*3);
rotateY(rotacActual*sensorValue/1000);
rotateZ(rotacActual);
translate(0, transporta);
stroke(255, 100);

float val1=-sensorValue+escala;
float val2=sensorValue-escala+modifica;
line(val1, 0, val2, 0);

//noStroke();
fill(255);
pushMatrix();
translate(val1, 0);
popMatrix();

pushMatrix();
translate(val2, 0);
popMatrix();

popMatrix();

perlinPos +=perlinVel;
rotacActual +=0.025;

}
void mousePressed() {
saveFrame();
}

Here’s a video of the code :

The values alter the drawing by changing the lengths of the lines being created, and if there is a drastic change it will alter the direction they are placed as well.  For example, If you try the code in a darker room, the lines will be printed shorter, and in a lighter room they will be much longer.  You can play with this to get some variations, such as:

Screen Shot 2015-11-19 at 1.40.05 PM

Screen Shot 2015-11-26 at 12.10.11 AM

Afterwards, I decided to print them onto a black tote bag that I have using a fabric printer.  To do that, you have to remove the background in Photoshop before printing (unless you want to keep the black background and print it on something else). To do this, simply double click on the layer and the blending settings will pop up.  Under “Advanced blending” drag the arrow on the black side of the gradient towards the center–that way, all of the values darker than that will be removed from the image.

Screen Shot 2015-11-26 at 12.13.19 AM

After you have your file ready,  you are ready to fabric print!  Press the fabric and add a fabric fixative to help the ink set in, put it in the printer and go! (or ask Amaury to help you)

 

 

 

 

 

3030black copy

Unfortunately I can’t print it yet because I am waiting for the fabric primer to arrive in order to print on the fabric that I have, but when I do it will look something like this.

Arduino Lilypad Project: Photo Booth

Source

 

Materials:

Arduino Lilypad

3-4 Alligator clips

1 Pressure sensor

1 Resistor

 

Software:

Processing

Arduino

Webcam

 

Processing:

import cc.arduino.*;
import org.firmata.*;
import processing.video.*;
import processing.serial.*;
Serial myPort; // Create object from Serial class
int val; // Data received from the serial port

Capture video;
int a = 1024; // width of window
int b = 768; // height of window
int x = 100; // x- position text
int y = 700; // y- position text
int capnum = 0;
int countdowntimer = 10;
int globalframecount = 0;
PImage aj;
PImage bj;
PImage cj;
PImage dj;
color black = color(0);
color white = color(255);
int numPixels;

void setup() {
String portName = Serial.list () [2];
myPort = new Serial (this, portName, 9600);
print(Serial.list ());
frameRate (25);
size(1024, 768); // Change size to 320 x 240 if too slow at 640 x 480
strokeWeight(5);

// This the default video input, see the GettingStartedCapture
// example if it creates an error
video = new Capture(this, width, height, 30);

// Start capturing the images from the camera
video.start();

numPixels = video.width * video.height;
noCursor();
smooth();
}

void draw() {
if ( myPort.available() > 0) {
val = myPort.read();
}
if (val>0) {
globalframecount = 1;
}
println(val);
if (video.available()) {
video.read();
video.loadPixels();
int threshold = 127;
float pixelBrightness;
loadPixels();
for (int i = 0; i<numPixels; i++) {
pixelBrightness = brightness(video.pixels[i]);
if (pixelBrightness > threshold) {
pixels [i] = white;
} else {
pixels[i] = black;
}
}
updatePixels();
int testValue = get(mouseX, mouseY);
float testBrightness = brightness(testValue);
if (testBrightness > threshold) { // If the test location is brighter than
fill(black); // the threshold set the fill to black
} else { // Otherwise,
fill(white); // set the fill to white
}

}

PFont fontA = loadFont(“Serif-48.vlw”);
textFont(fontA);
noFill();

switch(val) {

case ‘s’:
globalframecount = 1;
// background(0);

break;

case ‘t’:
//null
break;
default:
//println(“Zulu”); // Prints “Zulu”
break;
}

if (globalframecount == 25) {
countdowntimer = 9;
}
if (globalframecount == 50) {
countdowntimer = 8;
}
if (globalframecount == 75) {
countdowntimer = 7;
}
if (globalframecount == 100) {
countdowntimer = 6;
}
if (globalframecount == 125) {
countdowntimer = 5;
}
if (globalframecount == 150) {
countdowntimer = 4;
}
if (globalframecount == 175) {
countdowntimer = 3;
}
if (globalframecount == 200) {
countdowntimer = 2;
}
if (globalframecount == 225) {
countdowntimer = 1;
}
// image (video, 0, 0);

if ((globalframecount < 250) & (globalframecount > 0)) {
textFont(fontA, 30);
fill(0);
text (“Preview! Get ready for your photo in “+str(countdowntimer), x+2, y);
text (“Preview! Get ready for your photo in “+str(countdowntimer), x, y+2);
text (“Preview! Get ready for your photo in “+str(countdowntimer), x-2, y);
text (“Preview! Get ready for your photo in “+str(countdowntimer), x, y-2);
textFont(fontA, 30);
fill(255);
text (“Preview! Get ready for your photo in “+str(countdowntimer), x, y);
//text (countdowntimer, width-250, y);
globalframecount++;
}

if ((globalframecount >= 250) & (globalframecount < 500)) {
// image (video, 0, 0);

if ((globalframecount > 250) & (globalframecount < 311))
{
textFont(fontA, 100);
fill(0);
text (str(countdowntimer), width/2+2, height/2);

text (str(countdowntimer), width/2, height/2+2);

text (str(countdowntimer), width/2-2, height/2);

text (str(countdowntimer), width/2, height/2-2);

fill(255);
text (str(countdowntimer), width/2, height/2-2);
}
if (globalframecount == 250)
{
countdowntimer = 3;
}

if (globalframecount == 270)
{
countdowntimer = 2;
}

if (globalframecount == 290)
{
countdowntimer = 1;
}

if (globalframecount == 312) {
background(255);
}
if (globalframecount == 313) {
saveFrame(capnum+”.jpeg”);
aj = loadImage(capnum+”.jpeg”);
capnum++;
}

if ((globalframecount > 314) & (globalframecount < 373))
{
textFont(fontA, 100);
fill(0);
text (str(countdowntimer), width/2+2, height/2);

text (str(countdowntimer), width/2, height/2+2);

text (str(countdowntimer), width/2-2, height/2);

text (str(countdowntimer), width/2, height/2-2);

fill(255);
text (str(countdowntimer), width/2, height/2-2);
}
if (globalframecount == 314)
{
countdowntimer = 3;
}

if (globalframecount == 335)
{
countdowntimer = 2;
}

if (globalframecount == 355)
{
countdowntimer = 1;
}

if (globalframecount == 374) {
background(255);
}

if (globalframecount == 375) {
saveFrame(capnum+”.jpeg”);
bj = loadImage(capnum+”.jpeg”);
capnum++;
}

if ((globalframecount > 375) & (globalframecount < 436))
{
textFont(fontA, 100);
fill(0);
text (str(countdowntimer), width/2+2, height/2);

text (str(countdowntimer), width/2, height/2+2);

text (str(countdowntimer), width/2-2, height/2);

text (str(countdowntimer), width/2, height/2-2);

fill(255);
text (str(countdowntimer), width/2, height/2-2);
}
if (globalframecount == 376)
{
countdowntimer = 3;
}

if (globalframecount == 401)
{
countdowntimer = 2;
}

if (globalframecount == 420)
{
countdowntimer = 1;
}

if (globalframecount == 438) {
background(255);
}

if (globalframecount == 439) {
saveFrame(capnum+”.jpeg”);
cj = loadImage(capnum+”.jpeg”);
capnum++;
}

if ((globalframecount > 440) & (globalframecount < 497))
{
textFont(fontA, 100);
fill(0);
text (str(countdowntimer), width/2+2, height/2);

text (str(countdowntimer), width/2, height/2+2);

text (str(countdowntimer), width/2-2, height/2);

text (str(countdowntimer), width/2, height/2-2);

fill(255);
text (str(countdowntimer), width/2, height/2-2);
}
if (globalframecount == 440)
{
countdowntimer = 3;
}

if (globalframecount == 460)
{
countdowntimer = 2;
}

if (globalframecount == 480)
{
countdowntimer = 1;
}

if (globalframecount == 497) {
background(255);
}

if (globalframecount == 498) {
saveFrame(capnum+”.jpeg”);
dj = loadImage(capnum+”.jpeg”);
capnum++;
}

if (globalframecount == 499) {
fill(255);
background(0);
rect(width/11, height/10, (width-240), (height-100));
image(aj, width/8, height/8, width/3, height/3);
image(bj, 4*(width/8), height/8, width/3, height/3);
image(cj, width/8, 4*(height/8), width/3, height/3);
image(dj, 4*(width/8), 4*(height/8), width/3, height/3);
fill(0);
text (“take a picture it will last longer”, x, y);
saveFrame(“multipage”+capnum+”.jpeg”);
globalframecount = -1;
}
//delay(50);
globalframecount++;
}
}

 

Arduino:

int buttonPin = A2; // the number of the pushbutton pin
int buttonState = 0; // variable for reading the pushbutton status

void setup() {
pinMode(buttonPin, INPUT);
Serial.begin(9600);
}

void loop() {

buttonState = digitalRead(buttonPin);
Serial.write(buttonState);
delay(100);
}

IMG_3540

 

Flip Flop Constellations Generative Drawing

For this last exercise, I wanted to develop a project I made last Semester. It was about representing my family tree in a new way, using the zodiac sign’s constellation of each member of my family. I represented them all using in total 52 LEDs that represented the constellations of these zodiac signs : Leo, Aquarius, Pisces, Virgo, Sagittarius, Libra. 

Here’s a picture of the work I made earlier:

Screen-Shot-2015-05-17-at-4.20.00-PM-2k6zmdz

I took pictures of each constellations and created patterns on Illustrator:

I re-used the 52 LEDs and connected them to a Lylipad. The goal was to be able to control the intensity of the lights. And depending on the intensity, one of the 7 drawings (see above) would appear on the Processing code I made. It generates colorful drawings at a certain speed.

 

This is the code I made for Processing:

 

import processing.serial.*;

import cc.arduino.*;
import org.firmata.*;

Arduino arduino;

int number= 0;

int analogInPin = 5;
int analogOutPin = 10;

int sensorValue = 0;
int outputValue = 0;

PImage[] imgs = new PImage[7];
void setup() {
size (800, 800);
stroke(255);
background(random(256));
smooth();

println(Arduino.list());

arduino = new Arduino(this, “/dev/tty.usbserial-AI02L4YN”, 57600);
arduino.pinMode(analogInPin, Arduino.OUTPUT);
arduino.pinMode(analogOutPin, Arduino.INPUT);

for ( int i = 0; i< imgs.length; i++ )
{
imgs[i] = loadImage( “mask-0” + i + “.png” );
}

//control the frame rate with the intensity of the lights
frameRate(50);
}

void draw() {

sensorValue = arduino.analogRead(analogInPin);
println(sensorValue);
// drawing rectangles
int randomX;
int randomY;
int randomH;
int randomW;

//random size of rect
randomH = int(random(130));
randomW = int(random(130));

//random rect start
randomX = int(random(800));
randomY = int(random(800));

//random color
int r = int(random(256));
int g = int(random(256));
int b = int(random(256));

stroke(r, g, b);
fill (r, g, b);
strokeWeight(2);
rect(randomX, randomY, randomW, randomH);
// if intensity between x and x then upload the image “belier”
if (sensorValue == 0 && sensorValue < 146) {
image (imgs[0], 0, 0, imgs[0].width/4, imgs[0].height/4);
} else if (sensorValue > 146 && sensorValue < 292) {
image (imgs[1], 0, 0, imgs[1].width/4, imgs[1].height/4);
} else if (sensorValue > 292 && sensorValue < 438 ) {
image (imgs[2], 0, 0, imgs[2].width/4, imgs[2].height/4);
} else if (sensorValue > 438 && sensorValue < 584 ) {
image (imgs[3], 0, 0, imgs[3].width/4, imgs[3].height/4);
} else if (sensorValue > 584 && sensorValue < 730 ) {
image (imgs[4], 0, 0, imgs[4].width/4, imgs[4].height/4);
} else if (sensorValue > 730 && sensorValue < 876 ) {
image (imgs[5], 0, 0, imgs[5].width/4, imgs[5].height/4);
} else if (sensorValue > 876 && sensorValue < 1023 ) {
image (imgs[6], 0, 0, imgs[6].width/4, imgs[6].height/4);
}
}
//creates rectangles at mouse point when clicked
void mousePressed() {
rect(int(random(150)), int(random(150)), mouseX, mouseY);
}

void keyPressed() {
if (key == ‘s’) {
println(“Saving…”);
String s = “led_astro_drawing” + nf(number, 4) + “.jpg”;
save(s);
number++;
println(“Done saving.”);
}
}

 

And this is the result I got:

 

Finally, I decided to print them on fabrics following the idea that even though we can share the same Zodiac Sign we are all different and we all interpret it differently. That’s why the representation of each zodiac sign can never be the same.

Capture d’écran 2015-11-26 à 17.18.18

Flower Vibe T-shirt Flip Flop

For this assignment I want to make a T-shirt full of flowers to create a spring vide T-shirt for the spring. When the winters coming springs are not far….

So by create a model of print picture with full of flowers i start with processing.

 

1 Draw a flower add a pot in the middle

 

strokeWeight (10.0);

stroke(color(255,0,0));

 

translate(50,50);

for(int i=0;i<10;i++){

rotate(TWO_PI/10);

line(0,0,30,0);

}

ellipse(0,0,15,15);

 

2 Add color

 

strokeWeight (10.0);

stroke(color(255,0,0));

 

translate(50,50);

for(int i=0;i<10;i++){

rotate(TWO_PI/10);

line(0,0,30,0);

}

strokeWeight(0);

fill(color(255,255,0));

ellipse(0,0,15,15);

 

 

3 Set up random color

 

int getRandomColor(){

return color(random(120,255),random(255),random(255));

}

void setup(){

strokeWeight (10.0);

stroke(getRandomColor());

 

translate(50,50);

for(int i=0;i<10;i++){

rotate(TWO_PI/10);

line(0,0,30,0);

}

strokeWeight(0);

fill(getRandomColor());

ellipse(0,0,15,15);

}

 

4 Set up the size of flower

 

int getRandomColor(){

return color(random(120,255),random(255),random(255));

}

void setup(){

float flowerSize = 15.0;

strokeWeight (flowerSize);

stroke(getRandomColor());

 

translate(50,50);

for(int i=0;i<10;i++){

rotate(TWO_PI/10);

line(0,0,3*flowerSize,0);

}

strokeWeight(0);

fill(getRandomColor());

ellipse(0,0,1.5*flowerSize,1.5*flowerSize);

}

 

5 Get a bigger canvas

 

int getRandomColor(){

return color(random(120,255),random(255),random(255));

}

 

void drawFlower(float x, float y, float flowerSize){

strokeWeight (flowerSize);

stroke(getRandomColor());

 

translate(x,y);

for(int i=0;i<10;i++){

rotate(TWO_PI/10);

line(0,0,3*flowerSize,0);

}

strokeWeight(0);

fill(getRandomColor());

ellipse(0,0,1.5*flowerSize,1.5*flowerSize);

}

 

void setup(){

drawFlower(20,50,5.0);

 

}

 

6 Set up random color

 

int getRandomColor(){

return color(random(120,255),random(255),random(255));

}

 

void drawFlower(float x, float y, float flowerSize){

strokeWeight (flowerSize);

stroke(getRandomColor());

 

translate(x,y);

for(int i=0;i<10;i++){

rotate(TWO_PI/10);

line(0,0,3*flowerSize,0);

}

strokeWeight(0);

fill(getRandomColor());

ellipse(0,0,1.5*flowerSize,1.5*flowerSize);

}

 

void setup(){

size(800,600);

background(0);

}

void draw(){

if(keyPressed == true){

drawFlower(random(width),random(height),random(5,25));

}

}

 

Then push play we have the print picture with full of flowers for the shirt.

Because the colors and sizes are random so every time we play it and get the print picture will look different, so each of the flower vibe T-shits will be one and only.

Screen Shot 2015-11-26 at 下午12.05.11

 

Then add more designs on the shirt . And print it out.

 

Screen Shot 2015-12-02 at 下午10.24.35

And here we are a unique “Flower Vibe” T-shirt.

Screen Shot 2015-12-02 at 下午10.19.00

Dasha – Flip Flop

For this flip flop project I started with a lilypad and a code that I found online and then modified. The code creates generated hair-like text.

I wanted to use light sensors to control the code. One light sensor would restart the generative text, going through 4 different versions of movement and 4 different colors, the other sensor would change the colors by making them lighter or darker depending on the light value.

IMG_6412 IMG_6415

These are the kind of graphics that I ended up with and I created 12 different ones to then print on T-shirts.

screen0008

Here are some of the process pictures of the shirts after printing:FullSizeRender IMG_6896

 

Code:

import processing.pdf.*;

import processing.serial.*;
import cc.arduino.*;
Arduino arduino;
int lightReading=0;
int lightReading2=0;

int maxParticles = 1000; // the maximum number of active particles
ArrayList <Particle> particles = new ArrayList <Particle> (); // the list of particles
int drawMode = 0; // cycle through the drawing modes by clicking the mouse
int colorMode = 0;
color BACKGROUND_COLOR = color(255);
color PGRAPHICS_COLOR = color(255);
float fc001;
PGraphics pg;

color c;
int number;
void setup() {
size(1400, 720, P2D);
smooth(16); // higher smooth setting = higher quality rendering
// create the offscreen PGraphics with the text
pg = createGraphics(width, height, JAVA2D);
pg.beginDraw();
pg.textSize(300);
pg.textAlign(CENTER, CENTER);
pg.fill(PGRAPHICS_COLOR);
pg.text(“AMTeam”, pg.width/2, pg.height/2);
pg.endDraw();
background(BACKGROUND_COLOR);
arduino = new Arduino(this, Arduino.list()[1], 57600);
arduino.pinMode(2, Arduino.INPUT);
arduino.pinMode(3, Arduino.INPUT);
}

void draw() {
lightReading=arduino.analogRead(3);
fc001 = frameCount * 0.01;
addRemoveParticles();
// update and display each particle in the list
for (Particle p : particles) {
p.update();
p.display();
}

if (lightReading <600) {
drawMode = ++drawMode%4; // cycle through 4 drawing modes (0, 1, 2, 3)
colorMode = ++colorMode%4;
//stroke(color(random(255), lightReading2/4, random(255), 125));
background(BACKGROUND_COLOR); // clear the screen

// Set color
//colorMode = (int) random(4);

if (drawMode == 2) image(pg, 0, 0); // draw text to the screen for drawMode 2
//particles.clear(); // remove all particles
delay(100);
}
println();

lightReading2=arduino.analogRead(2);
fc001 = frameCount * 0.01;

switch(colorMode) {
case 0:
c = color(lightReading2/4, 3, 16, 125);
break;
case 1:
c = color(155, lightReading2/4, 17, 125);
break;
case 2:
c = color(lightReading2/4, 87, lightReading2/4, 125);
break;
default :
c = color(183, 207, lightReading2/4, 125);
}

//colorChange();
// update and display each particle in the list
for (Particle p : particles) {
p.update();
p.display();
}
//if (lightReading <500){
//colorMode = ++colorMode%4; // cycle through 4 drawing modes (0, 1, 2, 3)
//background(BACKGROUND_COLOR); // clear the screen
////particles.clear(); // remove all particles
//delay(100);
//}
}

//void mousePressed() {

// drawMode = ++drawMode%4; // cycle through 4 drawing modes (0, 1, 2, 3)
// background(BACKGROUND_COLOR); // clear the screen
// if (drawMode == 2) image(pg, 0, 0); // draw text to the screen for drawMode 2
// //particles.clear(); // remove all particles
//}

void addRemoveParticles() {
//remove particles with no life left
for (int i=particles.size()-1; i>=0; i–) {
Particle p = particles.get(i);
if (p.life <= 0) {
particles.remove(i);
}
//for (int i=particles.size()-1; i>=0; i–) {
//Particle p = particles.get(i);
//if (lightReading <800) {
// particles.remove(i);
//}
}
// add particles until the maximum
while (particles.size () < maxParticles) {
particles.add(new Particle(c));
}
}

void keyPressed(){
if(key == ‘s’){
println(“Saving…”);
String s = “screen” + nf(number,4) +”.jpg”;
save(s);
number++;
println(“Done saving.”);
}
}

 

///////////class – Particle
class Particle {
PVector loc;
float maxLife, life, lifeRate;

color c;

Particle(int c) {
getPosition();
// set the maximum life of the Particles depending on the drawMode
switch(drawMode) {
case 0: maxLife = 1.25; break;
case 1: maxLife = 1.0; break;
case 2: maxLife = 0.75; break;
case 3: maxLife = 0.5; break;
}
// randomly set a life and lifeRate for each Particle
updateColor(c);
life = random(0.5 * maxLife, maxLife);
lifeRate = random(0.01, 0.02);

}

void updateColor(color col) {
c = col;
}

//void updateColor(int colorMode) {
//
//}

void update() {
// the velocity/direction of each Particle is based on a flowfield using Processing’s noise() method
// drawMode 0: no extras (an xy-position will always return the same angle)
// drawMode 1: dynamic noise (an xy-position will return a slightly different angle on every frame)
// drawMode 2: rotation (the angle of each xy-position is globally rotated)
// drawMode 3: dynamic noise + rotation (combines drawModes 1 & 2)
float angle = noise(loc.x * 0.01, loc.y * 0.01, drawMode==1 || drawMode==3 ? fc001 : 0) * TWO_PI;
PVector vel = PVector.fromAngle(angle + (drawMode==2 || drawMode==3 ? fc001 : 0));
loc.add(vel);
life -= lifeRate; // decrease life by the lifeRate (the particle is removed by the addRemoveParticles() method when no life is left)
}

void display() {
//fill(255); // white fill
//stroke(lightReading2/4, 70, 120, 125);
stroke(c);
float r = 8 * life/maxLife; // radius of the ellipse
ellipse(loc.x, loc.y, r, r); // draw ellipse
}

// get a random position inside the text
void getPosition() {
while (loc == null || !isInText (loc)) loc = new PVector(random(width), random(height));
}

// return if point is inside the text
boolean isInText(PVector v) {
return pg.get(int(v.x), int(v.y)) == PGRAPHICS_COLOR;
}
}

 

Breathalyzer /// Carlotta FlipFlop

Breath12592

For this project, I created a Breathalyzer which draws colorful shapes as you exhale on it. The drawings vary depending on whether you had alcohol or smoked before.
I used an MQ2 gaz sensor, a pushbutton, an arduino and processing.
After saving a few of everyone’s breath drawings, I reassembled them in one file, which I printed on fabric to use as handkerchiefs.

Breath7128

Alcohol Value Reached

Breath103709

Decreasing Value From Alcohol to Normal

Breath5274

Smoke Value Reached

Breath32395

Breath Without Alcohol or Smoke.

 

 

I lasercut a box to put the sensor, adding a button that when pressed saves the screenshot.
Another hole on the side is used to pass the arduino serial cable.

Screen Shot 2015-12-03 at 09.50.22

The connexions to the MQ2 are as follow. My sensor had a four connexions: VCC (5V), GND, SIG (A0 pin) and NC. NC doesn’t need to be connected. The resistor used for the button is 10k Ohms.

MQ2 Sketch

20151203_093115                  20151203_093100

 

After saving the images and recomposing them, the final result is printed on fabric (I used polyester).

received_10153727828552970

 

20151203_093317 20151203_093434_001 20151203_093300 20151203_093330 20151203_093349 20151203_093404 20151203_093418

 

self portrait

 

lines

For the flip flop project I programmed a pulse sensor to initiate a processing sketch. The concept of this project was to emulate an internal self portrait. The idea is that you are drawing with your heart.

Step 1. Connect the heart sensor to an Arduino, and begin working on the code. The pulse sensor I used can be found here [you can also find the code to get started on their site]. To connect the pulse sensor, connect the black wire into ground, and the red into 5V, and the purple into A3.

Step 2. Once the pulse sensor is detected and you are able to receive information in the console, link to processing.

Step 3. Creating a sketch in processing. I really wanted the sketch to be minimal so I decided to do a simple sketch. For every heart beat detected, a random line is drawn.

Step 4. I quickly learned that the pulse sensor was not the most accurate sensor, so in order to get rid of ghost heart beats, I put in a line of code to filter out phantom beats.

Check out the code here!

Now that the code is all set it was time to add another element of flipping and flopping. Initially we have a physical interaction of a person wearing a pulse sensor – which is also a digital experience. We take the measure of the physical world and interpret it via a sketch, and lastly we take the sketch and bring it back into the physical world. You can find the steps for that below:

Step 1: Wear the pulse sensor and begin drawing with your pulse.

Step 2: Open the automatically saved PDF, from your code’s folder, and import it into Illustrator.

Step 3: In Illustrator expand, rasterize and image trace your file.
Object > Expand
Object > Rasterize
Object > Image Trace > Make and Expand

Step 4; Print on Cutting Master 3 with any type of writing utensil . In this case I used a fine point Staedtler pen. Below are the settings I used; speed: 34, acceleration: 2, cut force: 16.

Below is a quick video demonstrating the plotter in action!

 

Flip Flop: Generative Puzzle

For the flip flop project, I decided to create a generative design in Processing, utilize a sensor with the lilypad, and then ultimately produce a puzzle-with a piece for each of my classmates-out of my design.

So, I first found a code for a generative pattern to be created. I found a very simple one that just created rectangles and circles, and so when you pressed on the sensor, a rectangle is created, and more are produced depending on how hard you press on the sensor. Also, when you move the mouse, circles are created, just adding another element to the design.

Here is the Lilypad and sensor I used:

IMG_4151

Here is a video of the sensor to Processing process:

Click here for video

And here is the code I used:
import processing.serial.*;
import cc.arduino.*;

Arduino arduino;
int value;

void setup() {
size(640, 360);
background(10);
println(Arduino.list());
arduino = new Arduino(this, Arduino.list()[2], 57600);
arduino.pinMode(3, Arduino.INPUT);
noStroke();
}

void draw() {
// Call the variableEllipse() method and send it the
// parameters for the current mouse position
// and the previous mouse position
value=arduino.analogRead(3);
variableEllipse(mouseX, mouseY, pmouseX, pmouseY);
fill(random(0,800), random(0,30), random(0,500),value/4);
rect(value/4,mouseX,200,20);

}
// The simple method variableEllipse() was created specifically
// for this program. It calculates the speed of the mouse
// and draws a small ellipse if the mouse is moving slowly
// and draws a large ellipse if the mouse is moving quickly

void variableEllipse(int x, int y, int px, int py) {
float speed = abs(x-px) + abs(y-py);

ellipse(x, y, speed, speed);
}

and this:

import cc.arduino.*;
import org.firmata.*;

// setup – runs one time
void setup()
{
// set a stage size of 500 x 500 pixels
size (500,500);

// smooth all drawing
smooth();

// don’t draw an outline around your shapes
noStroke();

// draw all ellipses from their center point
ellipseMode(CENTER);
}

// draw – runs once a frame
void draw()
{
// fill all shapes with a solid black color with a very low opacity
fill(0,0,0,10);

// draw a rectangle that fills the whole screen
// don’t draw this rectangle if you don’t want to erase the screen each time
rect(0,0,width,height);

// fill all shapes with a white color from this point forward
fill(255);

// draw a small ellipse (20×20) where the mouse is
ellipse(mouseX, mouseY, 20, 20);
}

So, once I came up with a sketch that I thought looked aesthetically pleasing, I took a screenshot, cropped it, and put it into Illustrator to create a puzzle. It is a tangram-type puzzle, and here is what the final looked like:

tangram

I then wanted to laser cut each of the 12 pieces so everyone could have one, but I left Paris before I could, so I am extremely grateful to Ivan and Martin who laser cut it for me. I don’t have the images (yet), but I am sure the laser cut pieces look great!

That’s it..now onto the final project!

Flip Flop project// Hotline bling glitch by Sheena Fong

My project was inspired by Drake’s song Hotline bling. Instead of making colour changing backgrounds like the music video, you can dance to glitches instead. The idea is to dance with a light sensor attached lily pad, and change the projection colour by shining light onto the sensor. Most preferably with a mobile phone. Because, you know, it’s a song about a hotline/phone.

Process

Processing

First I had to write up the code for Processing. The idea behind this code, is to have two different colour glithces. The first one is for when sensor detects no light, and the other is for when it senses light. The code also records every single glitch into its processing folding. Which I will later use to make a flip book as the physical object.

The code is attached in my insturctables post.

Lily Pad

After I have figured out the basic code for processing, I have figure out the lily pad connection with the sensor. So after testing a few times with different connections, I finalized a connection that would work with the lily pad. here is a graph of how it is being connected.

lilypad_bb

 

After that I had to upload the code on Arduino, so that it can link the lily pad with processing.

Screen Shot 2015-12-17 at 9.13.16 AM

Setting up

Setting up was easy. I just had to put a projector in front of a white wall after dark. I tried a few different distance and I think 15 feet is a good distance. The camera I used was a Canon 60D with a standard lens. A wide angle lens would have been even better. After a few test run projecting the glitches onto the wall and on Dasha( the greatest dancer!) We began to film.

Filming

So once Dasha is ready, I begin to play the song on my speakers, so she can dance to the beat, and there you go! The hotline bling glitch is complete!

Screen Shot 2015-11-25 at 8.26.15 PM

Screen Shot 2015-11-25 at 8.28.14 PM

Flip Book

Here is a video of the binding process with the same binder we have at school.

To make the physical object for the box, I collected all the glitches from the filming process, and separated them by colour. Then I printed them out, 4 per A4 paper. cut them out and made them into flip books.

20151125_233409

Here are the two colours when I printed them.

20151125_233415 20151125_233419

Flipping through the books, to make it easy to flip the edges need to be cut properly. And turned out, the book was too big in size and it needed to be cut down for the actual box. So the final product isn’t the complete screen shot, but a fraction of it. Though if I have to do it again, I would print it small so each page is a complete screen shot.

Thoughts

This was a fun project, and I really enjoyed doing it. Not only was it something in trend, but it also includes my love for glitches. In the future, I would love to do  more interactive projection art. It is the best kind of project when there can be participation from the audience! Also If I will continue on this project, I would make the light sensor easier to hold, because during filming, the biggest problem we had was the sensor falling off the lily pad. Perhaps I should make a box to contain it, so that it can stay intact when it is in use. All in all, I think this is one of my more successful project, and I am happy to share it with the internet. Below is a link to the insturctables website, I hope you will have fun making it too!

http://www.instructables.com/id/Hotline-Bling-Glitch-With-Arduino