Olesia and Oriana, Final Project Documentation. “What if I get sucked up into space”

Link to the proposal: https://docs.google.com/presentation/d/18vJdyakmFV7ZR5jwM0ra_gmCQfELr3qBQU04s4USIcg/edit?usp=sharing

For our final, my initial idea was to continue working on the midterm project that Ori and I developed. So, at first I thought I would work alone but then Ori decided to switch from her project and join me. This is how we ended up working together, again.

IDEA:

As it was stated in our slides, the idea is to simulate an experience in which the user gets sucked up into space. I got inspired by a famous scene from a movie.

Here is the moment that triggered my thinking:

I am not going to go into details regarding the ideation process and the details of how we planned on doing it as we talked extensively about it in the presentation as well as in person with the professor.

WORK PROCESS:

Oriana and I tried to break our work into three main components:

  1. aesthetics
  2. interaction with the Kinect
  3. adjusting the details

The aesthetics part was somewhat challenging as we tried to avoid the goofy, cartoony effect that our midterm sketch. So, we started out by working on the visuals side. First, we created a new class with the smallest stars you can see. Then, we set out to adjust the speed of the movement, multiply and randomize the number of stars and planets that were coming at the user. Later on, we added the sound I found on the NASA website which essentially is a bunch of radiowaves converted by NASA into an audible for humans format. The sound is mainly a bunch of vibrations that depending on the quality of the speakers of the headphones gets trippier and trippier. We realized that we probably must have used speakers but it was a bit too late to change the setup of the project at that point. Hence, for the final presentation, Ori and I used my headphones.

We used the podcast room to showcase our work. First, we put the bear on the floor to make the user more comfortable laying down. Then, we set up the Kinect and the projector behind the user on a bunch of chairs. This is how the user would experience the project: fully horizontal, in the darkness, wearing headphones.

USER TESTING AND FINAL RESULTS:

As for the IMA show and the final presentation, we got extremely good feedback from the users. They liked the idea and the implementation. The best part, they said, was to get to control the amplitude of the sound with their hands. They also noted how trippy and immersive it was. Here is a bunch of videos of people experiencing our project:

IMG_8351 IMG_8353

IMG_8230

FURTHER IMPROVEMENTS:

We would really love to use as many projectors as possible to get the most immersive effect. We already tried using two projectors but due to the limited number of good projectors available at this school, we couldn’t reserve the right one. So, we went with just one projector. For the future, we were thinking of a) using more projectors and Kinects, b) improve the aesthetics a bit, c) replace the headphones with the high-quality, bass speakers. So that the minute user gets into the room, he starts tripping.

CHALLENGES:

On our way to “success”, Ori and I didn’t encounter any major hindrances, however, we did experience some setbacks. First of all, we had some problems with our classes, they would not work properly with the main sketch. Second of all, our framerate was so slow at first that we could not even test whether or not our code was working at all. Finally, projection mapping did not always go the way it was suppsoed to. It took me a significant amount of time to figure out exactly how it worked so that we could successfully utilize it in our presentations.

FINAL THOUGHTS:

Overall, we are very happy with the final result. Not only did we receive positive feedback from the faculty and IMA students but also from the “outside” people. We are really excited to have our project exhibited at the Century Mall, if possible. That would be amazing!

 

import processing.sound.*;
import codeanticode.syphon.*;
SoundFile file;


SyphonServer server;
import org.openkinect.processing.*;


Kinect2 kinect2;

float minThreshHead = 480;
float maxThreshHead = 1500;
PImage img; 
float avgX, avgY;

ArrayList<Star> stars = new ArrayList<Star>(); 
ArrayList<Planet> planets = new ArrayList<Planet>(); 
ArrayList<Little> littles = new ArrayList<Little>(); 
PImage pimg;

void setup() {
  size(1200, 900, P3D); // 16:9 4:3 
  background (0); 

  file = new SoundFile (this, "SPACE_S.wav"); 
  server = new SyphonServer(this, "Processing Syphon");
  file.play(); 
  kinect2 = new Kinect2(this); 
  kinect2.initDepth();
  kinect2.initDevice();

  img = createImage(kinect2.depthWidth, kinect2.depthHeight, RGB); 


  sphereDetail(10); 

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

    stars.add(new Star(random(-width/2, width/2), 
      random (-height/2, height/2), 
      random(-200, 200)));
  }
  pimg = loadImage("data/planet.jpg");
  for (int i = 0; i<20; i++) {
    planets.add(new Planet(random(-150, 150), random(-100, 100), random(-1500, 500), pimg));
  }
  for (int i = 0; i<800; i++) {
    littles.add(new Little(random(-width/2, width/2), random(-height/2, height/2), random(-500, -1000)));
  }
}

void draw () {
  // background
  fill(0, 30);
  rect(0, 0, width, height ); 

  // 3D Space
  pushMatrix(); 
  translate (width/2, height/2); 

  img.loadPixels();
  //galaxy.loadPixels();

  int [] depth = kinect2.getRawDepth(); 

  float sumX = 0; 
  float sumY = 0; 
  float totalPixels = 0;   

  int h = kinect2.depthHeight; 
  int w = kinect2.depthWidth;

  for (int y = 0; y < h; y++) {
    for (int x = 0; x < w; x++) {
      int index = x + y * w; 
      int d = depth[index];

      if (d > minThreshHead && d < maxThreshHead && x > 100) {
        sumX += x; 
        sumY += y; 
        totalPixels++;
        img.pixels[index] = color(255, 0, 0);
      } else {
        img.pixels[index] = color(0, 0);
      }
    }
  }

  img.updatePixels(); 

  if (totalPixels > 0) {
    avgX = sumX / totalPixels; 
    avgY = sumY / totalPixels;
  }
  //color cp = get(30, 20); 

  float speed = 0.5;
  float accX = map(avgX, 0, img.width, -speed, speed);
  float accY = map(avgY, 0, img.height, -speed, speed);

  file.amp(-accY*5);
  rotateY(-accX);
  //println(accX + " " + accY);
  for (int i =0; i < planets.size(); i++) {
    Planet p = planets.get(i);

    //p.updateVelocity(accX, accY);
    p.move(); 
    //stars[].display(); //for array--the total number of the elements is fixed
    p.restart(); 
    //if (red(cp) == 255 && green(cp) == 0 && blue(cp) == 0 ) { 

    p.display(); //for arrraylist. Number of elements in an array list is not fixed.
    //}
  }
  for (int i = 0; i<stars.size(); i++) {
    Star s = stars.get(i);
    s.move(); 
    //stars[].display(); //for array--the total number of the elements is fixed
    s.restart(); 
    s.displayStar();
  }
  for (int i = 0; i<littles.size(); i++) {
    Little l = littles.get(i);

    l.displayLittle(); //for arraylist. Number of elements in an array list is not fixed.
    l.move();
    l.restart();
  }

  //textureMode(NORMAL);
  //texture(pimg); 
  sphere(100);

  popMatrix(); 

  // 2D Canvas


  image(img, 0, 0);

  //image(pimg, 0, 0);
  stroke(0, 255, 0);
  line(img.width/2, img.height/2, avgX, avgY);
  fill(0, 255, 0);
  noStroke();
  ellipse(avgX, avgY, 10, 10);


  fill(255); 
  text(frameRate, 10, 20);
  server.sendScreen();
}



CLASSES:


class Planet {
  
  
  //variables 
  PImage pimg;
  float x, y, z; 
  float rad1, rad2, rad3; 
  float velX, velY, velZ;
  


  //constructor function
  Planet (float _x, float _y, float _z, PImage _pimg) {
    x = _x; 
    y = _y; 
    z = _z; 
    pimg = _pimg;
    rad1 = random (25/1.5, 35/1.5); 
    rad2 = random (50/1.5, 60/1.5); 
    rad3 = random (20/1.5, 25/1.5);
    velX = 0; 
    velY = 0;
    velZ = random(3, 4);
    
  }

  void display() {
    pushStyle();
    pushMatrix(); 

    translate (x, y, z);
    
    //fill(255);
    //noStroke();
    //ellipse(0, 0, rad1*2.5, rad1*2.5);

    fill(0);
    stroke(255); 
    strokeWeight(5);
    sphere(rad1);
    
     

    popMatrix(); 
    popStyle();
    
  }

  void updateVelocity(float vx, float vy) {
    // pos <- vel <- acc = force
    velX = -vx;
    velY = -vy;
  }
  void move() {
    x += velX; 
    y += velY; 
    z += velZ;
  }

  void restart() {

    if (z > 500) {
      x = 0;
      y = 0;
      z = -1500;
      println( "reset" );
    }
  }
}




class Little {

  //variables 
  float x, y, z; 
  float velX, velY, velZ; 
  float rad;  

  //constructor function
  Little (float _x, float _y, float _z) {
    x = _x; 
    y = _y; 
    z = _z; 
    rad = random (4, 7); 
    velX = 0; 
    velY = 0;
    velZ = random(1, 2);
  }

  void displayLittle() {
    pushStyle();
    pushMatrix(); 

    translate (x, y, z); 
    fill (255); 
    noStroke();
    sphere(rad * 0.15); 

    popMatrix(); 
    popStyle();
  }
  
  void move() {
    x += velX; 
    y += velY; 
    z += velZ;
  }

  void restart() {

    if (z > 1000)
      z = -500;
  }
}


class Star {

  //variables 
  float x, y, z; 
  float rad; 
  float velX, velY, velZ; 

  //constructor function
  Star (float _x, float _y, float _z) {
    x = _x; 
    y = _y; 
    z = _z; 
    rad = random (4, 7); 
    velX = 0; 
    velY = 0;
    velZ = random(3, 4);
  }

  void displayStar() {
    pushStyle();
    pushMatrix(); 

    translate (x, y, z); 
    fill (219,237,255); 
    noStroke();
    sphere(rad);

    popMatrix(); 
    popStyle();
  }

  void move() {
    x += velX; 
    y += velY; 
    z += velZ;
  }

  void restart() {

    if (z > 1000)
      z = -500;
  }
}

Midterm Project, Olesia and Ori

Here is the link to our presentation: https://docs.google.com/presentation/d/139WhbGLDG5FsV_z6RBdhLJbdmSENd50VQC-y0gKpD_w/edit?usp=sharing

Here is the video fo us trying our project: https://drive.google.com/open?id=1vZLmjWgQ6hIO0iYVUm34BQBeZvFpCZKZ

PROJECT IDEATION:

As we said during presentation, the idea for our project came fron an animation I created a month ago. We both got really inspired by it and decided to take it further in code. Our initial idea was to simply use face tracking a create an experience in which the user would have to move his head to aboid hitting the stars, planets etc. But we both decided to use leap motion instead as it has more potential and fun to it. Plus, it was easier to implement leap motion than face recognition because the latter would always drastically slow down the framerate which resulted in lagging and overall bad result. Hence, our final idea is to create a galaxy that is coming onto you; sort of a galaxy that is absorbing you.

PROCESS:

The actual process was not as hard as we expected because we had broken everything in steps which helped a lot. First, we focused on creating classes of objects that would move in a way that we wanted them to move. Professor helped a lot with this stage of work. Later on, we focused on aesthetics which was easy. The latest step was implementing leap motion, and here we had some trouble. First, the leap motion device itself was lagging all the time and refused to work properly. Second, the program would also lag and even shut down. During presentation even, professor had to help us set up the system. But after much trial and error, Ori and I managed to set everything up correctly. The overall process I would rank as being mostly smooth with minor bumps in the road.

FUTURE:

For the future, I really want to take this project furthe and use projection mapping for user interaction. I want to build a small room or a box, put the user inside of it and let him/her watch the universe sucking them up into space. This is the ultimate goal I have for now. It would involve more coding, building of a specific space appropriate for the experience as well as adding more details to the aesthetics as well.

 

Midterm Project, Olesia Ermilova

https://docs.google.com/presentation/d/1_PLEAVN8OaL5rn1mHxqTe5tuaQlWp5k_QikDga8Qe0w/edit?usp=sharing

link to web editor: https://editor.p5js.org/Olesia/sketches/rJD6UY6jX

DESCRIPTION AND GOALS:

My initial idea was not so much as creatign an endless system that generates 300 different minimalistic logos. My goal was to come up with a simple system that would create 3 different variation for the Tumblr logo. I was going more for aesthetics rather than endless variations. I tried preserving the simplicity that the company strived for while also making it look more like what Tumblr actually is: infinite opportunities, a Universe in a way. So, coming from this idea, I tried coming up with a system that would not only convey my personal perception of Tumblr but also would be more appealing and bright. Tumblr is BRIGHT, COLORFUL! Given that, I’ve come up with a system in which the ellipse( aka the planet) changes in size and position, the array of stars either appear or not depending on the size of the planet as well as three waves that represent Tumbl’r constant state of change, movement, and progress moving around the screen. Later on, I’ve come up with the color pallette that is utilised in the logo.

I followed professor’s feedback in class and simplified my initial logos: I removed the stars which made it look a bit better. But depending on user’s preferences, they can either have a logo with the stars or without. It’s totally dynamic.  Overall, I am happy with the design because it managed to achieve my main two goals: keep the simplicity and make it more appealing/memorable.

Here is a few examples of what it would like did Tumblr utilize my logo:

 

 

Final images: 

Week 3 Assignment, 3D Modeling in Rhino, Olesia Ermilova

For this assignment, I decided to 3D model Gudetama-my favorite Japanese cartoon character.

Here is the original Gudetama. The shape was quite simple to create but it was still a challenge as I am used to using Blender and Maya which have a completely different UI and settings. Yet somehow I’ve managed to create my favorite Gudetama and even 3D printed it in the future (see my next post).

The process didn’t take me that long because I was familair with Rhino and its features because of another class. Yet I still prefer other 3D software as it is much more intuitive and user-friendly.

Overall, I’m super happy with the 3D printed model that I have right now. I colored it and painted on top of it to make it look like the real Gudetama.

Digital Fabrication Second Assignment, Olesia Ermilova

Here is the link to my presentation with all the work and reference images: https://docs.google.com/presentation/d/19f2W5haWH1bm7fMew2KOEF2KSbjw-8NzyVCeCjLY-xg/edit?usp=sharing

For this assignment, I really tried thinking about all the things that might represent my being. My first instinct was to collect all the pieces of music and books that I enjoy, and then I just tried putting it all together to make a pile fo everything that I liked.

I ended up with 14 ideas which is exactly the amount that we needed. They are the following: the. real me, the vampire me, the wild orange hair me, the cosmos me, the starry night me, the kiss me, the subtle art of not giving a fuck me, the little prince me , the matrix me, the black me, the til death we do art me, the quotes me. These are different representations of my identity and my interests.

I was initially going for a more abstract idea in which I’d try to mostly portray my inner experiences and feelings. But I ended up going for a more materialistic representation of my being. I especially loved my classmate’s Marina work because she actually did an amazing job of putting all the feelings we might have from time to time into art. She has done a great job and I really hope I could improve mine too!

Here are all of them together! I’m planning on changing the backgrounds of almost each one of them but my favorites are the black me, the Starry Night me, the Pink Sky me, the Kiss me. I’m going to continue working on them but in photoshop to further enhance the effect I was going for.

Overall, I really liked the assignment as it helped me to understand myself a bit better. Plus, I got to listen to my favorite music for a week almost non-stop which in itself is an amazing thing.

Thanks to professor for helping me out and guiding me through the process! Without his tips it would be impossible to finish the task on time! Hence, now I am really happy I’ve made it successfully!

 

Midterm Project Proposal, Olesia Ermilova

For the midterm project, I have decided to go with something that I use almost everyday to get inspired, find new books to read and generally feel happier. *Drum roll*- it is Tumblr.

For those of you who do not know, Tumblr is a portal to heaven. Ok, jokes aside, it is a website with an infinite amount of images, quotes, animations, videos, blogs and so on and so forth. Tumblr is like a mini version of the Internet in a way. It is a social network, a platform for sharing your thoughts (aka Twitter), a place for your artwork. Tumblr is what you use when you need to get some inspiration.

Notwithstanding Tumblr’s amazing goal, its logo is utterly, absurdly BORING!!! Take a look at this UGLINESS: these are the main logos that are used in the mobile version and the desktop version of the website. In my humble opinion, these logos are extremely boring and unrepresentative of Tumblr’s eternal greatness. It is as boring as the Twitter’s logo, but, at least, in Twitter’s case, it is justifiable as Twitter is only used for “typography”, thought sharing and general bla-bla-bla; it is not as multipurpose as Tumblr. Hence, in Tumblr’s case, its logo does not really reflect anything the portal offers.

 

 

 

 

 

To give more context, this is what Tumblr ACTUALLY looks like. It is millions of things: it’s about cosmos, love, quotes from books, people’s feelings, psychology, human emotion, art, the creation of artwork of ANY sort. Whatever you want to share with the world, you can. In a way, it is a repository of mankind’s inner world:

https://www.youtube.com/watch?v=yj-xBpQ0CI0

cosmos

As you can see, Tumblr is so much more than just a white girl’s place to whine about boys (some people think Tumblr is about that), which it might be for you, if you want it to be. However, I think the logo should be MUCH more colorful, deep, and profound in a way that instantly lets the user know he is entering the world of infinite opportunities for self-expression.

I want to create a dynamic logo system that does a better job of representing the profoundness of Tumblr as well as partially preserves the already existing aesthetics of the current one. By using the techniques that we learnt in class, I want to attempt creating something that is both aesthetically pleasing and representative of the portal.

P.S I might use the cosmos and rave neon themes in my design.