Live Web

WEEK 6

Midterm

For my midterm I wanted to create a multiplayer, VR drawing tool. I found out one way to do this is by using Unity Socket.io. I haven’t been able to get to this point just yet. However, I have managed to get a multiplayer game to work using a local host.

The biggest challenge has been trying to understand how to integrate socket.io into Unity.

I might stick with the game and and continue to iterate on it.


WEEK 5

Midterm Idea

In thinking about my midterm, I am also thinking about my final. One Idea I have is to create a multi-user VR drawing application using Unity. I have already begun to create a one-player drawing app.

 

 

 


WEEK 4

 

One of my thoughts is to generate digital art using photos captured by cameras. One idea is to invert the colors and see what will be produced. Then I would overlap the images in a collage styles to see what art can be produced.

There is a limitation in using the computer’s camera. If I can do it with a phone’s camera, that would be more ideal. Another thought is to write code that would randomly overlap the images and determine their opacity.


 

WEEK 3

Self Portrait Improved

This week I tried to improve my self portrait. I kept with the concept from before using found images and videos from the web. I also included a video of myself. I wanted to play with opacity as well. What I am currently trying to figure out is how to randomly change the opacity of the pictures.

Self Portrait 2


 

WEEK 1 &2

Self Portrait

This assignment was was particularly interesting to me because it challenged me to understand my limitations with coding. Additionally, it has pushed me to think outside of the box when creating a self portrait.

I did not accomplish what I wanted to but here are my thoughts: I wanted to collect my images that are currently on the web and see how those images can can be arranged to convey an image of me.

I also wanted to construct and deconstruct the idea of “self portrait” by adding and subtracting words to these two words. I wanted to give this a poetic-like feel.

SelfPortrait

 

 

 

Art Toy Design

WEEK 6

These are the final products of Space Girl. The three large figures wear different basketball jerseys. From left to right: Steph Curry (Golden State Warriors), Kobe Bryant (Los Angeles Lakers) and Michael Jordan (Chicago Bulls). The smaller version is Space Baby, the younger version of the original Space Girl.


WEEK5

Here is the packaging for Space Baby.

 

To create the logo for Space Baby, I illustrated her and used the vinyl cutter to cut out stickers and placed them on the container.

  


WEEK 4

I decided to use a Barbie for the development of Space Girl. Thinking about this project, a kit bashing approach might have been better. For Space Girl’s clothing, I decided to buy felt and I used a jersey template and cut the felt in the shape of a jersey.

  

After the paper prototype, I moved to cutting the felt.

I hand sewn the jersey.

 

 

I eventually chose to use use a smaller doll and create an iteration of Space Girl with this version. I first compared the helmet of the doll with a ping pong ball. It turned out to be too small. I then moved to a much larger foam ball which seemed to be a better fit. Next, using the same template of the jersey, I began creating a jersey for what I call Space Baby.

I used tape to outline the creased within the helmet then used a pen to mark these areasl

 


WEEK 3

For this week, I refined the model. And I decided to print the piece in separate parts. This helped me to reduce the structural support and the printing time drastically.

 

 


WEEK 2

Here are some of the prints I attempted. My first five weren’t successful at all. The prints kept uprooting from the bed. I had to recalibrate the bed of the printer. A challenge I faced was that the print was not plat in the floor plain. So, I had to print a support system which can be extremely annoying to remove.

 


WEEK 1

Character Turnarounds

I created this character, Space Girl. She wears a an astronaut space helmet an a number eight jersey (referencing Lakers and Kobe Bryant when he wore number 8). She also has purple socks and black shoes.

     


 

 

 

Bodies in Motion

WEEK 5

Final Assignment from Mood Board

In this environment, you see a character I developed, Space Girl performing a choreo to the song Impossible (covered by Fifth Harmony). Space Girl is located in different places within the scene and she is different sizes. The viewer travels throughout two major environments, a mountain valley and a futuristic subway station. And eventually the viewer exits the environment into another galaxy.

This project came about as I was interested in the idea of trains and subways as a motive for transportation and how trains can often take us, physically, through different spaces. I view these spaces in some ways as different worlds. So, I wanted to offer users a similar experience.

 

I created Space Girl and the train within medium and used a custom MoCap animation. The movement of the camera was due to a camera sequence.

Challenges:

  1. One major challenge I had was the textures I created within Medium did not apply to the models in Unreal.
  2. Editing the camera sequence to get the right flow was more difficult than I thought it would be.

Improvements:

Some improvements that I would like to include in thus project are:

  1. A longer choreo so that the performance does not seem repetitive.
  2. Get the actual texture on the models I made.
  3. Smooth the camera flow
  4. Improve on the environments

Lab

 

We also tried to do hand and  finger motion capture.


WEEK 4

Interactions

The interactions that I included within my scene were to cut on a light, play an audio and make another character appear in the environment.

Once the ball drops, the light will turn on. Also, Space Girl Can Activate the light also. After the ball rolls into a trigger box it plays an audio, “Impossible” by Fifth Harmony. Then it rolls into another trigger box which makes a larger Space Girl visible.

 

 

Lab

This lab was extremely fun. It also challenged our creativity, as actors and directors. We had to think through our movements.

 


 

WEEK 3

Import Character into Environment 

I decided to model Space Girl in Medium.

Here is Space Girl in the environment I created.

Cleaning Data Lab

 

 


 

WEEK 2

Create Environment Inspired by Mood Board 

Character Development

I created this character, Space Girl. She wears a an astronaut space helmet an a number eight jersey (referencing Lakers and Kobe Bryant when he wore number 8). She also has purple socks and black shoes.

 

Space Girl enjoys traveling through time and space while exploring parallel universes. She has found a way to hack her VR headset that allows the virtual world she creates to exist in the real world. Or she can travel through the real world through her headset. I’m not sure which will be the case.

Eventually she will accompanied by several other character who all find an interest in solving real world issues. They journey through time in search of solving the problems in their world.

 

Lab


WEEK 1

Interest in Class

I am excited about this class. My interest in this class is  that I would have the capability to capture custom animations/motion. Currently I have been limited to using preexisting animation from Mixamo. I believe this will afford me the opportunity to make more compelling VR content in addition to AR content.  Looking back at experiences I previously developed, I was limited in this area.

Mood Board

Lately, I’ve been interested in subways/trains and the culture within subways. I have also been intrigued by the idea of space travel. As a result, my mood board is filled with content from outer space and subways and trains. Particularly, I am drawn to the natural path a railroads create. They either guide our eyes into the depths of a forest or into the darkness of a tunnel. For me, it is there that I begin to imagine other worlds.

 

 

Below are images from my mood board.

                                   

Here for full mood board.


Calibration and Rigid body Lab

For the lab a few of us worked as a group to calibrate the room.

Here, you can see the data points of the wand. We made sure all of the camera had at least  10,000 sample.

Here you can see Asha showing these cameras some love. They were feeling a little neglected by the wand.

We ten moved to calibrate the ground.

Here, we successfully calibrated the room.

We then moved to un real

  

Here are the steps we took for calibrating the room.

IN MOTIVE

  1. Before Calibrating
    • Make sure to mask out any reflective material
    • Select “Mask visible”
  2. “Start Wanding”
    • Make sure every camera has at least 10,000 data points
  3. “Calculate then “Apply Results”
    • Before doing so, make sure to hide the wand
  4. Calibrate Ground Plane
    • “Set Ground Plane”
  5. “Assign Rigid Bodies
    • Create layout
      • highlight rigid body then right click
        • rigid body
          • create from selected markers -> then change name
  6. Record Take
  7. View
    1. Data Streaming
      1. local Interface
        1. 192.168.1.2
        2. Unreal should be 92.168.1.5
  8.  Bone Naming Convention
    1. Should be “Motive”

UNREAL 

  1. Optitrack client origin
  2. Server Address
  3. Client
  4. Connection Type
    1. Multicast
  5. Bone Naming Convention
    1. Motive
  6. Optitrack Rigid Body Actor
  7. Add an object
    1. Ex. Sphere
    2. Under “Mobility” make “Moveable”
  8. Then Parent to actor
  9. Then reset the position of the object

 

Introduction to Computational Media

WEEK 9

Final Project Proposal

Final projects are a creative idea inspired by the concepts in this class. There is no requirement to use a particular aspect of programming. The idea and your enjoyment and interest in the idea is what counts. Some things to remember.

  1. Keeping things simple and small in scope is a plus. If your project idea is a big one, consider documenting the larger idea but implementing just a small piece of it.
  2. Also think about making a final project for a small audience, even one single person like a family member or friend. . . or yourself. This can be a good way to focus your idea and design process. “Generalizing” the idea can come later (or maybe not at all.)
  3. Final projects can be collaborations with anyone in any class.
  4. Final projects can be one part of a larger project integrated with Physical Computing or another class.

For my final project I decided to create a visual to the song HiiiPower by Kendrick Lamar.

How it works:

There is a boombox and a flat screen tv preloaded onto the screen. And there are six buttons on the boombox. As you press each button a section of the song will play. Once the song plays the text will play also. In addition to the audio and text pictures relevant to the lyrics will play on the tv.

This is how the screen will first appear.

Once each button is pressed the screen of the tv will display a visual that is specific to the lyrics that are playing.

Once you press another  button the same will happen.

 


 

WEEK 8


 

WEEK 7

 


 

WEEK 6

  • Create a sketch with one or more of the following. Feel free to add DOM elements to a previous sketch.
    • Pre-defined HTML Elements
    • Pre-defined CSS Styles
    • HTML Elements generated by your p5 sketch
    • Some kind of mouse interaction with an HTML Element using a callback function you write.
    • If you are feeling ambitious, try replacing a DOM element with a “physical sensor!”
  • Questions you might ask yourself while working on the above.
    • When does it make sense define HTML elements in index.html?
    • When does it make sense to “generate” HTML elements with code in p5?
    • When does it make sense to apply styles in code with the style() function vs. predefined styles in style.css?
  • Next week we will look at working with data and APIs in class. If you feel so inclined you can take a look at some of the video tutorials in advance. Please add a link to a data set or “API” that interests you. You don’t have to know anything about how to use it, but having a list of examples we can examine in class next week will add to the discussion. You can also contribute to this wiki list of data sources.


 

WEEK 5


 

WEEK 4

  1. The idea this week is to explore re-organizing your code. It is 100% legitimate to turn in a version of a previous assignment where nothing changes for the end user, but the code has been restructured. You may, however, choose to try a new experiment from scratch. Aim to keep setup() and draw() as clean as possible, and do everything (all calculations, drawing, etc.) in functions that you create yourself. Possibilities (choose one or more):
    • Break code out of setup() and draw() into functions.
    • Use a function to draw a complex design (like this) multiple times with different arguments.
    • Write a function to that returns the result of a mathematical operation that you need to do several times in your code.
  2. An optional quiz to test your knowledge if you like.

 


 

WEEK 3

  1. In general this week, you should work with rule-based animation, motion, and interaction. You can use the ideas below or invent your own assignment. Start by working in pairs/groups as determined in class. Try pair programming, 1 person at keyboard, the other keeping overall picture. Can you divide an idea into two parts and combine those parts? Can you swap sketches and riff of of your partner’s work? You can post together or break off and complete the assignment individually.
    • Try making a rollover, button, or slider from scratch. Compare your code to the examples below. Later we’ll look at how this compare to interface elements we’ll get for free from the browser.
    • Create an algorithmic design with simple parameters. (One example is 10PRINT, see: 10PRINT example.
    • Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.
  2. Try this quiz if you want to test your knowledge.


 

WEEK 2

reate a sketch that includes (all of these):

  • 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.
  • (You can choose to build off of your week 1 design, but I might suggest starting over and working with one or two simple shapes in order to emphasize practicing with variables. See if you can eliminate all (or as much as you can) hard-coded numbers from the sketch.)

 

 

 

 

 

 


 

WEEK 1

  • Write a blog post about how computation applies to your interests. This could be a subject you’ve studied, a job you’ve worked, a personal hobby, or a cause you care about. What projects do you imagine making this term? What projects do you love? (Review and contribute to the ICM Inspiration Wiki page. In the same post (or a new one), document the process of creating your sketches. What pitfalls did you run into? What could you not figure out how to do? How was the experience of using the web editor? Did you post any issues to github?