PC + ICM Week 14: Final Project

Solstäd: Winter Wonderland is an immersive roomscale Virtual Reality installation that encourages the user to embrace the playfulness of winter. Using the HTC Vive, LeapMotion, & Arduino, this piece aims to address the question – how can the VR user, in headset, and the VR audience, out of headset, share an interactive experience? In this environment, the VR user is able walk around & explore with their hands to pick up snowballs, draw, & light up a pine tree, while the VR audience is able to control other aspects in the environment such as the time of day, rotation of snowflakes, & as well as act as a voyeur in a passing train caboose.
Brief Video (better version coming soon):

Project Build, + Code (still uploading):

References Used:

Source Code:

PC + ICM Week 9: Augmented Virtuality Final Project + BOM

This weekend, I had the chance to test some of the technology behind my “Augmented Virtuality” final project idea. Here is a demo of the HTC Vive x Leapmotion x Unity x Arduino integration: 

Here is how the user(s) would ideally experience Augmented Virtuality:

Current progress can be found here on Trello; current project supply list is available here on Airtable.

 

 

ICM Week 8: ICM-madness + Video Capture

MAKE A PROJECT ABOUT HARMONY THAT TICKLES WITH TRANSLATE, ROTATE AND SCALE

 Teammates:  Andrey Urodov, Asha Veeraswamy, Chengchao Zhu, Yipeng Chen
Our project, Clickle Tickle, brings together pictures from pixels!   Created with the javascript P5.js editor, the user uses a fuzzy mouse &  computer webcam create a pixellated self-portrait that scales when  “tickled.”
Sketch + Code: http://alpha.editor.p5js.org/AshAvenue/sketches/rJlLRG80W

ICM Week 6: Flower Pot

Here is my project called “Flower Pot,” which takes my week 1 ICM javascript sketch & controls it with a potentiometer through serial communication. The potentiometer controls the hour &  minute hands.

The Header bars are made from HTML & CSS, with some dom elements as slider & input text box. The slider controls the background color, while typing into the text box changes the subheader.

P5 Code & Sketch: 

http://alpha.editor.p5js.org/AshAvenue/sketches/BJFjsX7Tb

Arduino Potentiometer Code:

void setup() {
Serial.begin(9600); // initialize serial communications
}

void loop() {
int potentiometer = analogRead(A0); // read the input pin
int mappedPot = map(potentiometer, 0, 1023, 0, 255); // remap the pot value to fit in 1 byte
Serial.write(mappedPot); // print it out the serial port
delay(1); // slight delay to stabilize the ADC
}

ICM Week 3: Fake Mondrian

For this weeks homework assignment, I partnered up with Carrie Wang. Our task:

  • Try pair programming, 1 person at keyboard, the other keeping overall picture.
  • Try making a rollover, button, or slider from scratch.
  • Create an algorithmic design with simple parameters.
  • Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.

After considering our options, we decided to make a geometric design with clickable buttons based on the work of Piet Mondrian.

We were able to design the shape & create the buttons easily enough. However, in order to get a set color selection, we learned a new function in P5 – arrays! Leon, the ITP Resident, assisted us with learning this concept. Working together (pair programming technique) was very helpful! Here is our “Fake Mondrian”:

ICM Week 2: Hour of Flower Power

Our challenge this week was to take our old p5.js sketch…

… and animate it with the following changes:

  • One element controlled by the mouse.
  • One element that changes over time, independently of the mouse.
  • One element that is different every time you run the sketch.

Inspired by P5 clock animations, this new version is called “Hour of Flower Power.” In this HW assignment, I made many new discoveries (with assistance from Mathura, the ICM TA) including HSB Color Mode, declaring variables, the map function, the frame count function, & how to use the push-pop function! In this animation,

  • The mouse controls the locations & color of the “hour” & “minute” hands.
  • The background changes color over time, independently of the mouse.
  • The stroke color of the flower changes randomly everytime the sketch is run.

 

ICM Week 1: Inspiration for ICM + First Sketch + Flower of Life

ICM Inspiration:

From the ICM inspiration page, I found myself drawn to the categories of Installation & Fabrication. Being a native New Yorker, I really appreciated the “Color the Temple” projection mapping at the MOMA.

Also, having taken classes in fabrication & biomedical engineering, I have an appreciation for Neri Oxman’s work at MIT Media Lab. One of the classes she teaches is called “Principles of Computational Design and Additive Manufacturing.” In ICM class this fall at ITP, I would like to learn how these two fields intersect, as well as possibly learn how to model shapes with code.

Communicating in code + first P5 sketch:

In our first ICM class, we conducted an exercise to get us into the “coding mindset.” The first step was to draw an image using 4 shapes. Then, we had to explain how to draw the shape in such a way so that another classmate could draw it without seeing the original drawing. Surprisingly, the classmate who received my instructions was successful! 

After this exercise, I attempted recreating my “gnome” shape in P5.js. The trickiest part was drawing all the shapes with the right dimensions & pixel location. Also, the web editor would occasionally crash & fail to load my sketch.

Flower of Life:

The second image that I was inspired to sketch was based off the “flower of life.” I chose this design because, while having an ornate aesthetic, there is only one shape necessary – the circle. When overlapped in a grid 19 times (or other numbers), this combination of circles creates an intricate geometric pattern. 

However, while seemingly easy, this sketch was harder than it seemed when it came to centering the radius at precise points in the sketch.

Attempt 1: The circles were too far apart.

Attempt 2: I calculated the chord of the intersection of two circles & positioned the centers as to where the intersection would occur. However, this led to the circles being too close together!

Attempt 3: I decided to fudge it & eyeball the intersections. Through trial & error, I was able to get a pretty good approximation. There are still some minor misalignments, but this was the best version.