Sprint 2 – Jumanah

My main focus this sprint was to refine the fire and make the colours and overall shape of the fire look realistic.

Version 1 – Fixed the shape of the fire by assigning particles at random offset to X values and decreasing their size as they reach the end of their life.. as they are going up. I also added the firewood to the scene using the ofImage class and I worked on making it transparent.



    //Drawing wood underneath the fire

    fireplaceWood.draw(400, 670, 200, 79);




float lifePercent = life / maxLife;


    if (life >= maxLife){ //once reached max life stop

        life = maxLife;



    //Values for the size of the particle based on life percent.. adjusted

    float size = 0 + (lifePercent)*100;

    size = 100-size;


ofDrawEllipse(0, 0, diameter/3, diameter/1); //make a tall ellipse rather than a circle.. more fire like

Then I changed the colour and size based on the age of the particle. At first it was going from red to yellow, which was not realistic.. Version 2




Version 3 – Then I added blending and glow to the fire with the help of Mr. Anthony. I also added a small random velocity to each particle to make it sway from left to right a little.

velocity[0] += ofRandom(-0.02,0.02); //random x value to make the fire sway a little.





The last thing I did was add a fire class to make our code more scalable. It is an inherited class from Particle.  it will have its own colours and gravity, and way to add particles..


At first the shape of the fire wasn’t what I wanted, and blending was not working but I asked the prof for assistance and he helped me figure out what was going on. It was also harder than I expected to create a fire inherited class which would jumble up the code entirely..

The fire is almost done, and the background has been added. Overall a very successful sprint!





Sprint 2 – Lena

Design / Illustration

This week I continued working on the visual components. I have finished the background and created three versions of the setting: day, sunrise/sunset, and night. These images will later be used for the cycle animation in the game. At first, I wasn’t sure how I would create such an animation using 2D graphics, but this week I got an idea of drawing three backgrounds and changing the opacity of each one (attached video is an example of this animation). This method is easy to implement in the code and it will not impact the performance of the installation Also, I introduced a new animal (the owl) to the scene to make the experience more realistic and engaging . The owl would be asleep during the day but when the sun goes down it will open it’s eye.



Owl and fireplace design



I animated the day – night cycle, foreground elements and the owl. Later on most animations will be exported as .png files and inserted into the code.



One of the challenges that I had was adding images into the environment. But I figured it out with Jumanah’s help.

fireplaceWood.load(“Assets/Fireplace/FirePlaceWood.png”); BgNight.load(“Assets/Background/Bg-night.png”); BgDay.load(“Assets/Background/Bg-day.png”); BgSunrise.load(“Assets/Background/Bg-sunrise.png”);

Current problem is to code the day – night transition as I would have to implement the clock() function that would change the opacity of the top layer from 100 – 0 and vise versa every two minutes. This will require more research. By next week I hope to finish all of the visuals and animations and bring the day – night cycle into the code.



Luk – kinect-ed- weekly blog 1

This week I looked into integrating Kinect camera with our Openrameworks project, mainly best practice and limitation. The Kinect and Openframeworks project [1] from Zachary Lieberman and Dan Wilcox, helped start understanding the process of taking camera input and turning into usable data. Two add-on libraries are required to achieve this, which are OpenNI and the included ofxKinect.

However I wasn’t able to acquire a Kinect camera for initial setup and testing. I did being a test project and set basic function. I intend to being testing with actual hardware as of Friday jan 27. Next week I aim to being testing ways of interpreting interaction. The initial project setup with Xcode was really seamless, no compiling errors.


Main takeaway from this week is that we need to redesign our interaction gesture in away it’s easy to track while remaining natural for users to do.





STUDIO for Creative Inquiry (CFA), “3B: Using the Kinect with OpenFrameworks”, http://artandcode.com/3d/workshops/3b-using-the-kinect-with-pure-data/



Jumanah – Blog Post 1

I started off with getting documentation about OpenFrameworks and XCode. I watched a series of youtube videos to set things up. My main point of reference was the documentation on the OpenFrameworks website. I used the project generator to create a simple open frameworks app, and then I added gradually particle and particle system classes from the tutorials, in C++ of course, so it took time to convert the code from java..


After I proceeded with generating fire colors, random values for R and G – to go from yellow to red. Then I played around with the gravity to move the particles up instead of down, and transparency to give the fire a more realistic look. The size of the particles also changes based on lifespan.


Overall result:


• Failures – •

The fire is still in its early stages, as the values for size and and life span of the fire are not definite yet. I also had problems with creating a dynamic array in C++, still not sure how to implement this for performance reasons, so I ended up using a normal array with 1000 particles. array[1000] .. this will need to change next sprint.  I will need to create new particles and delete old ones.  I will need to do more research next time.


Setting up xcode and open frameworks was easier than expected, open frameworks made it easy to create vectors and shapes.. much like processing. I learned some new functions too. I am pleased with the starting point for the fire, it looks like a fire!!!

Technical Info

I used xcode with open frameworks to set up a project

created ParticleSystem class and particle class with methods and variables.. and constructors.. then changed the color and transparency like so

  float lifePercent = life / maxLife;


    if (life >= maxLife){


        life = maxLife;



    float size = ofRandom(1,200) * (lifePercent);


    diameter = size;



        ofTranslate( position.x, position.y );

        ofSetColor(ofRandom(200,255),ofRandom(0,200),0,lifePercent+50); //red

        ofDrawEllipse(0, 0, diameter, diameter);


Thanks for reading. Tune in next time 🙂

Jumanah Al Asadi



Lena – Blog Post 1

This week I was working on the visual components. Using Photoshop and Illustrator I have created the environment and the assets for the installation. Also, as a scrum master, I had to make sure that everyone is on the right track.


Our interaction will switch from day to night and I am still trying to figure out how to create this transition so that the transition looks coherent with assets. I had an idea of turning all visuals into silhouettes but I still need more research to find a solution to this problem.

I am pretty happy with the end result but the final style might still change.



For next week my team’s goals is to finish the Kinect setup and generate the fire and the silhouette of a player. By next week I hope to find a solution for the day and night transition and create several animations to make the environment more realistic.