Author Archives: Yu Sheng

Mood Display Board

I’m very inspired by the website called “We feel fine.”

mobs-bigmontages-big

It is a website that collects people’s posts about feelings from the internet. I want to do a physical mood display. Different color pastels represent different moods. User can pick up the color that stands for current feeling, and use it as a brush to write or draw anything on the screen. After that, users can also take a photo with what they write or draw and save it for keeping or sharing later:)

MoodDisplayBoard_480p

The complete code:

Arduino:

int potVal;

void setup() {
// put your setup code here, to run once:
Serial.begin(9600);
}

void loop() {
// put your main code here, to run repeatedly:
potVal = analogRead(A0);
Serial.println(potVal);
delay(2);
}

 

Processing:

// Smoother color tracking
// based on Dan Shiffman & Dan O’Sullivan’s examples

import processing.video.*;

// Variable for capture device
Capture video;

PGraphics drawing; /// a contect to hold the “drawing”
PImage vidMirror;

import processing.serial.*;
Serial mySerial;
float diam;

// A variables for the color we are searching for.
color trackColor;
float thresh = 20;
int avgX, avgY; //this is what we are trying to find
int prevAvgX, prevAvgY;

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

// instance of the drawing
drawing = createGraphics(width, height);

vidMirror = new PImage(video.width, video.height);

println(Serial.list());
// Print out the list and look for port your Microcontroller is on
// Finding the Arduino is not easy because they have weird names like “/dev/tty.usbmodem1421″ or COM1
String portName = Serial.list()[2];
mySerial = new Serial(this, portName, 9600);

mySerial.readStringUntil(‘\n’);
}

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

for(int x = 0; x < video.width; x++){
for(int y = 0; y < video.height; y++){
vidMirror.pixels[x+y*video.width] = video.pixels[(video.width-(x+1))+y*video.width];
}
}

vidMirror.updatePixels();
image(vidMirror,0,0);

//we are going to find the average location of changed pixels so
//we will need the sum of all the x find, the sum of all the y
// find and the total finds
int totalFoundPixels= 0;
int sumX = 0;
int sumY = 0;

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

// colors we are looking for
float r2 = red(trackColor);
float g2 = green(trackColor);
float b2 = blue(trackColor);

// Using euclidean distance to compare colors
float difference = 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 (difference < thresh) {
sumX = sumX + x;
sumY= sumY + y;
totalFoundPixels++;
}
}
}

// average the locations of all the pixels that were close enough.
if (totalFoundPixels > 0) {
avgX = sumX/totalFoundPixels;
avgY = sumY/totalFoundPixels;
// Draw a circle at the tracked pixel
fill(trackColor);
strokeWeight(3.0);
stroke(0, 127);
ellipse(avgX-10, (avgY-10), 20, 20);
}

drawing.beginDraw();
drawing.stroke(trackColor);
drawing.strokeWeight(diam);
drawing.line(prevAvgX, prevAvgY, avgX, avgY);
drawing.endDraw();
blend(drawing, 0, 0, width, height, 0, 0, width, height, ADD);

prevAvgX = avgX;
prevAvgY = avgY;
}
void serialEvent(Serial _port){
if (mySerial == null) return; //this is a hack to cover a bug where the port does not get set up in time.
//this says if the port is not set up yet, bail (for now.)
String input = mySerial.readStringUntil(‘\n’);
if (input != null) { //if a ‘\n’ character has in fact now arrived
input = input.trim(); //Take off the ‘\n’ character, get rid off the white space
diam = float(input); //Turn it into number
println(diam);
}
}

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

void keyPressed() {
//for adjusting things on the fly
if (key == ‘q’){
video.stop();
save(int(random(10))+”.jpg”);
}

if (key == ‘[‘) {
thresh–;
println(“Threshold ” + thresh);
} else if (key == ‘]’) {
thresh++;
println(“Threshold ” + thresh);
}
}

What Computing Means to Echo

Although my life is so closely tied with the “New Media,” I felt like it was my first time to exactly know the definition of it after reading Manovich’s writing on new media.

The article reminds me of the programs’ name change issue happened at my previous college, California College of the Arts(CCA). We once had a heated discussion among the design program about changing the name from “Graphic Design” to “Visual Communication.” Since the majority considered that the term “graphic” is out of fashion and not a well presentation of today’s graphic design. Indeed, “graphic” literally means “of or relating to the art of printing” from the dictionary. However, nowadays graphic design is not limited to two-dimensional form (e.g poster, book), it is largely involved with new media. Graphic designers have worked on designing website, app, motion graphic, and interactive installation. The boom of new media also forces the school to update the courses in order to meet the industry’s need, there are more digital based design courses are taught at school compared to two years ago when I graduated.

“Media Arts” was another program that changed name but fail to meet the industry need. The funny effect is that after the program decided to change the name to “Film,” many students in the second year of the program switched major, as well as the first year students who intended to attend the program. The number of enrolled new students also dramatically dropped. School was surprised to find that how much students and parents care about “Media.” Students and parents considered that “media arts” is a much popular profession and a trendy study field.

I often heard form my graphic design friends complained to me that they were asked question about their website/app coding skill in job interviews, which they considered was not designer’s scope. Designer should only design the website, not code it. After attending this class and reading the article I realize it is a totally wrong concept, since if you do not have the basic understanding of programming a website, you definitely cannot design an appropriate interface for it.

Triangular Portrait

Hi all,

I experimented with making a portrait by using triangles.

Here is the code:

PImage img;

void setup() {
size(300, 335);
img = loadImage(“portrait.jpg”);
img.filter(POSTERIZE, 10);
smooth();
}

void draw() {
background(255);

loadPixels();

for (int y = 0; y < img.height; y+=10 ) {
for (int x = 0; x < img.width+5; x+=5) {
int loc = x + y*img.width;

stroke(img.pixels[loc]);
fill(img.pixels[loc]);

if (x %10 == 0) triangle(x-5, y, x, y+10, x+5, y);
else triangle(x-5, y+10, x, y, x+5, y+10);
}
}
}

void mousePressed() {
save(int(random(10))+”.jpg”);
}

Here is the image:

 

 

4

I also add a save function. If I press the mouse when it is running,  a image will be saved in the folder. The file name is random number from 0-10.

After doing this, I tried to modify my code to see if I could make the code to show the process of paint with triangles. And I think the “save” function will be very nice for showing the whole image development. I haven’t worked it out, but if anyone knows any reference that is close to this idea, please let me know:)

 

Bubble Catcher from Echo

Hi all,

My Bubble Catcher game is based on the example from the book “Learning Processing,” Chapter 10, written by Daniel Shiffman.

BubbleCatcher

Here is the code:

Catcher catcher; // a catcher object
Timer timer; // a timer
Bubble[] bubbles; // an array of bubbles

int totalBubbles = 0;

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

catcher = new Catcher(40); // catcher’s width 40;
timer = new Timer(500); // a timer that goes off every 0.5 second
bubbles = new Bubble[1000];

timer.start();
}

void draw(){
background(0);
noStroke();
fill(255);
catcher.position(mouseX, mouseY);
catcher.display();

if ( timer.isFinished()){
bubbles[totalBubbles] = new Bubble();
totalBubbles++;
if(totalBubbles >= bubbles.length){
totalBubbles = 0;
}
timer.start();
}

for (int i = 0; i < totalBubbles; i++){
bubbles[i].move();
bubbles[i].display();
if (catcher.intersect(bubbles[i])){
bubbles[i].caught();
}
}
}

class Bubble{

float x,y;
float speed;
float r;
color c;

Bubble(){
r= 8;
x= random(width);
y= -r*2;
speed=random(1,5);
c = color(random(255),random(255),random(255));
}

void move() {
y += speed;
}

boolean reachedBottom() {
if (y > height + r*2){
return true;
}else{
return false;
}
}

void display() {
fill(c);
noStroke();
for (int i =2; i < r; i++){
ellipse (x, y, i*2, i*2);
}
}

void caught(){
speed = 0;
y = -700; // set the location off the screen
}
}

class Catcher{
float h;
float x,y;
color c;

Catcher(float tempH){
h=tempH;
x=0;
y=0;
c=color(255);
}

void position(float tempX, float tempY) {
x = tempX;
y = tempY;
}

void display(){
noStroke();
fill(c);
rect(x, y, h, h);
}

boolean intersect (Bubble d){
float distance = dist (x, y, d.x, d.y);
if (distance < h + d.r){
return true;
} else {
return false;
}
}
}

class Timer{

int savedTime;
int totalTime;

Timer(int tempTotalTime) {
totalTime = tempTotalTime;
}

void start(){
savedTime = millis();
}

boolean isFinished() {
int passedTime = millis()-savedTime;
if (passedTime > totalTime) {
return true;
} else {
return false;
}
}

}

Right now, it is an endless bubble catching game. I tried to code that when the catcher misses the bubble and the bubble hit the ground, the screen will show the game is over, but I haven’t worked out yet:(

Bouncing Balls from Echo

Hi all,

One Bouncing Ball: I started with one bouncing ball. I want the ball to drop from the top of the canvas, and gradually stop bouncing. When pressing mouse, the ball will start bouncing again, and the ball’s diameter, color and speed will change.

BoucingBall1_Echo(1080)

float xPos = 250;
float yPos = 0;
float diam = 50;
float ySpeed = 2;

color ballColor=color(random(255),random(ySpeed),random(255));

void setup() {
size(500,400);
noStroke();
smooth();
}

void draw() {
background(0);
ellipse(xPos, yPos, diam, diam);
fill(ballColor);

ySpeed = ySpeed + 0.75;
yPos = yPos + ySpeed;
if (yPos > height – diam) {
yPos = height – diam;
ySpeed = ySpeed * -0.9;
}
if (yPos <= 0) {
ySpeed = -ySpeed;
}
}
void mousePressed() {
ySpeed = random(2, 10);
yPos=0;
xPos=250;
diam=random(30,70);
ballColor=color(random(ySpeed),random(255),random(255));
}

Two Bouncing Balls: Then I tried to code two bouncing balls, the code is based on the previous one and the code from last class. Basically, when the two bouncing balls meet, the background will flash red. Also, when pressing mouse, two balls’ diameters and colors will change.

TwoBoucingBalls_Echo(720)

float xPos = 250;
float yPos = 0;
float diam = 50;
float ySpeed = 2;
float xPos2 = 350;
float yPos2 = 25;
float xSpeed2 = 3;
float ySpeed2 = 4;

color ballColor1=color(random(255),random(ySpeed),random(255));
color ballColor2=color(random(ySpeed),random(255),random(255));

void setup() {
size(500,400);
noStroke();
smooth();
}

void draw() {
background(0);
fill(ballColor1);
ellipse(xPos, yPos, diam, diam);
fill(ballColor2);
ellipse(xPos2, yPos2, diam, diam);

ySpeed = ySpeed + 0.75;
yPos = yPos + ySpeed;

xPos2 = xPos2 + xSpeed2;
yPos2 = yPos2 + ySpeed2;

if (yPos > height – diam) {
yPos = height – diam;
ySpeed = ySpeed * -0.9;
}
if (yPos <= 0) {
ySpeed = -ySpeed;
}

if (xPos2 > width-diam/2 || xPos2 < diam/2) {
xSpeed2 = -xSpeed2;

}
if (yPos2 > height-diam/2 || yPos2 < diam/2) {
ySpeed2 = -ySpeed2;
}

if(dist(xPos, yPos, xPos2, yPos2)<=diam){
ySpeed=ySpeed-2*ySpeed;
xSpeed2=xSpeed2-2*xSpeed2;
ySpeed2=ySpeed2-2*ySpeed2;
}

if(dist(xPos, yPos, xPos2, yPos2)<=diam){
background(#F70505);
}
}

void mousePressed(){
ySpeed = random(2, 10);
xPos=250;
yPos=0;
xSpeed2=2;
ySpeed2=4;
xPos2=350;
yPos2=25;
diam=random(30,50);
ballColor1=color(random(255),random(ySpeed),random(255));
ballColor2=color(random(ySpeed),random(255),random(255));
}

Two Crazy Bouncing Balls: When I coded the two bouncing balls, I accidentally messed up the code a little bit. I got a crazy version of bouncing balls. When two balls hit each time, one of the balls will speed up and finally goes crazy. Here are my crazy balls:

TwoBouncingBall2Crazy_Echo

float xPos = 250;
float yPos = 0;
float diam = 50;
float ySpeed = 2;
float xPos2 = 350;
float yPos2 = 25;
float xSpeed2 = 3;
float ySpeed2 = 4;

color ballColor1=color(random(255),random(ySpeed),random(255));
color ballColor2=color(random(ySpeed),random(255),random(255));

void setup() {
size(500,400);
noStroke();
smooth();
}

void draw() {
background(0);
fill(ballColor1);
ellipse(xPos, yPos, diam, diam);
fill(ballColor2);
ellipse(xPos2, yPos2, diam, diam);

ySpeed = ySpeed + 0.75;
yPos = yPos + ySpeed;

xPos2 = xPos2 + xSpeed2;
yPos2 = yPos2 + ySpeed2;

if (yPos > height – diam) {
yPos = height – diam;
ySpeed = ySpeed * -0.9;
}
if (yPos <= 0) {
ySpeed = -ySpeed;
}

if (xPos2 > width-diam/2 || xPos2 < diam/2) {
xSpeed2 = -xSpeed2;

}
if (yPos2 > height-diam/2 || yPos2 < diam/2) {
ySpeed2 = -ySpeed2;
}

if(dist(xPos, yPos, xPos2, yPos2)<=diam){
ySpeed=ySpeed-2*ySpeed;
xSpeed2=xSpeed2-2*xSpeed2;
ySpeed2=ySpeed2-2*ySpeed; // I accidentally missed the “2,” That’s why it goes crazy!!!
}

if(dist(xPos, yPos, xPos2, yPos2)<=diam){
background(#F70505);
}
}

void mousePressed(){
ySpeed = random(2, 10);
xPos=250;
yPos=0;
xSpeed2=2;
ySpeed2=4;
xPos2=350;
yPos2=25;
diam=random(30,50);
ballColor1=color(random(255),random(ySpeed),random(255));
ballColor2=color(random(ySpeed),random(255),random(255));
}

 

Echo’s Self-portrait

Hi All,

Here is my self-portrait. I constructed the basic shapes first, then used the mouse to draw the rest detail part.

Step1

Echo_Self-portraitStep1

 

Step2: Finished Version

Echo_self-portrait

 

Here is my code:

float lineWidth = 3;
PFont f;

void setup(){
size(600, 600);
background(161,209,193);
f = loadFont(“Avenir-Medium-48.vlw”);
noStroke();
fill(244, 211, 228);
rect(530, 0, 70, 70);
fill(0);
rect(530, 70, 70, 70);
fill(233, 61, 40);
rect(530, 140, 70, 70);
stroke(0);
fill(101,163,188); //circle_back
noStroke(); //circle_back
ellipse(245,210,200,200);//circle_back
fill(0); //hair_bottom
noStroke(); //hair_bottom
rect(185,175,120, 110);//hair_bottom
fill(244, 211, 228); //face
noStroke(); //face
ellipse(245,200,90,130); //face
fill(0); //hair_top
noStroke(); //hair_top
arc(245,175,120, 110, PI, TWO_PI);//hair_top
fill(0);
ellipse(220,200,40,40); //left glass
fill(0);
ellipse(270,200,40,40); //right glass
fill(244, 211, 228);
ellipse(220,200,30,30); //left glass
fill(244, 211, 228);
ellipse(270,200,30,30); //right glass
fill(244, 211, 228); //neck
noStroke(); //neck
rect(230,230,30,60); //neck
}

void draw(){
strokeWeight(lineWidth);
textFont(f,16);
fill(255);
text(“Hello! I’m Echo.”, 190, 340);
if (mousePressed){
line(mouseX, mouseY, pmouseX, pmouseY);
}
if(mousePressed && mouseX >= 530 && mouseY<= 70){
stroke(244, 211, 228);
}
if(mousePressed && mouseX >= 530 && mouseY<= 140 && mouseY >=70){
stroke(0);
}
if(mousePressed && mouseX >= 530 && mouseY>= 140){
stroke(233, 61, 40);
}
}

void keyPressed(){
if(key == ‘+’){
lineWidth++;
}
if (key == ‘-‘){
lineWidth–;
if (lineWidth <= 0){
lineWidth=1;
}
if(key == ‘ ‘){
background(161,209,193);
noStroke();
fill(220, 10, 180);
rect(700, 0, 100, 100);
fill(0,0,255);
rect(700, 100, 100, 100);
}
}
}

Echo-Fever Detector

This is an ideal model for fever detector. Basically, if one’s temperature is normal (T<= 37°), the green light will be turned on. If the temperature is higher than 37° (37°<T<39°),  the red light will be turned on too. If the temperature is higher than 39° (T>=39°), which means you really have a high fever, all the lights will be turned on.

 

Echo-Love Type Advanced Switch

This is my advanced Love Type Switch. The whole working flow is very simple: When not reading the pencil lettering, the red light will blink. When reading the lettering, the green light will be on.

Video

Echo-Love Type Switch

Hi all,

Here is my “Love Type Switch.” I created it when I was practicing my calligraphy. Hope you enjoy watching it:)