Color Changing Fireworks in Virtual Reality

Fireworks are an essential part of the Fourth of July experience. It's tradition. The bright sparkling lights, the big booms, the romance no matter how you slice it fireworks are pretty awesome. Not everyone will experience the big show this year and watching them on TV is not the same experience.

My name is Ron Dagdag and I'm doing a series of VR projects. This is part 3 of 6 series project exploring Virtual Reality as a Maker. We're not going to create games, we are going to explore different ways to create new experiences and interactions in VR.

Part 1: Amazon Echo VR Controller

https://www.hackster.io/RONDAGDAG/amazon-echo-vr-controller-724c89

Part 2: Gesture Controller using Particle Photon and Sparkfun RGB and Gesture Sensor APDS-9960

https://www.hackster.io/18937/augmented-reality-virtual-reality-dinosaur-experience-be9c8c

Part 3: Virtual Reality Fireworks using Color Sensor

Part 4: ConstructAR - The Holographic Tool Belt

https://www.hackster.io/team-constructar/constructar-the-holographic-tool-belt-b44698

Part 5: Control your "Earth Rover" in Virtual Reality

https://www.hackster.io/RONDAGDAG/control-your-earth-rover-in-virtual-reality-15a9fe

Part 6: Posture Recognition using Kinect, Azure IoT, ML and WebVR

https://www.hackster.io/RONDAGDAG/posture-recognition-using-kinect-azure-iot-ml-and-webvr-e9c4f7

If these projects made you interested in developing Virtual Reality apps, or tinker with Tessel 2, Adafruit RGB Color Sensor, or just learned something from this article, please click respect and follow me. Feel free to contact me if you have questions. Thanks.

There are 2 parts on this project:

• Tessel2 Color Sensing App

• Fireworks Virtual Reality App

WorkFlow:

The Fireworks app would register to Tessel 2 Color Sensing App to receive data. The Color Sensing app would publish the RGB data. The Virtual Reality App would receive the RGB data and pass it to the Fireworks generator. It will update the Fireworks color every second.

Tessel 2 Color Sensing App:

I replicated this project

Hardware Connections to Tessel

You can connect the module to any of the ports on Tessel:

VIN -> Unconnected

GND -> GND

3V3 -> 3V3

SCL -> SCL

SDA -> SDA

INT -> GPIO 1

LED -> GPIO 2

Here's the code:

I copied the sample and published the RGB data using Socket.IO

rgb.on('ready', function() {
setInterval(function() {
rgb.getRawData(function(err, colors) {
if (err) throw err;
console.log('RED:', colors.red);
console.log('GREEN:', colors.green);
console.log('BLUE:', colors.blue);
console.log('CLEAR:', colors.clear);
io.emit('colors', colors);
})
}, 1000);
});

The Tessel 2 is the Socket IO server. io emit would send data to all subscribers.

In order to get the IP address of your Tessel, run

> t2 wifi

This will give you the IP address of tessel.

In order to test it out, I created another small nodejs app that uses socket.io-client.

Here's the code:

var socket = require('socket.io-client')('ws://localhost:3000/');
socket.on('connect', function(){ console.log('connect') });
socket.on('colors', function(colors){
console.log(colors);   
});

The Tessel 2 color sensing app is listening to port 3000. So the address is ws://:3000/

Fireworks Virtual Reality App

Attached is the executable file. I've set it up so you can modify the IP Address to connect to Tessel2

https://github.com/rondagdag/fireworks-vr

Unity made it easy to develop VR apps in Oculus. I just followed this Unity 5 Guide. Thanks to eVRydayVR

I used the AQUAS Water Lite package. I bought them for $5 dollars.

https://www.assetstore.unity3d.com/en/#!/content/53519

I also used the Fireworks Collection package from the Asset Store that I bought for $25.

https://www.assetstore.unity3d.com/en/#!/content/6037

I started with Fireworks Sound Demo Scene sample. I moved the camera closer to the Fireworks. then I modified the GameObjectSpawner so that I can customize the color.

function Update () {
///...... some code here.....
if (currentGO) {
currentGO.GetComponent.().material.SetColor("_TintColor", Color32( redColor,greenColor,blueColor, alphaColor));
currentGO.GetComponent(ParticleSystem).startColor = new Color(redColor,greenColor,blueColor,alphaColor);
currentGO.transform.Find("Trail").GetComponent(ParticleSystem).startColor = new Color(redColor,greenColor,blueColor,alphaColor);
var explosion = currentGO.transform.GetChild(0);
explosion.GetComponent(ParticleSystem).startColor = new Color(redColor,greenColor,blueColor,alphaColor);
explosion.transform.Find("Big Glow").GetComponent(ParticleSystem).startColor = new Color(redColor + 0.5,greenColor + 0.5,blueColor + 0.5,alphaColor);
explosion.transform.Find("Trail").GetComponent(ParticleSystem).startColor = new Color(redColor + 0.25,greenColor + 0.25,blueColor + 0.25,alphaColor);
}
}

The idea is to allow redColor, greenColor, blueColor, alphaColor variables to set the Color of all the fireworks.

I added the Socket.IO for Unity package from the Asset Store. I followed the README on how to add Socket.IO to your project.

I changed the Url to

ws://:3000/socket.io/?EIO=4&transport=websocket

I added a file network.cs that uses SocketIOComponent. I register to receive events from the Color Sensing App. When the Color Sensing App emits the "colors" event, it would run the OnColorsReceived function.

public class Network : MonoBehaviour {
static SocketIOComponent socket;
public GameObject Gui;
GameObjectSpawner _gameObjectSpawner;
// Use this for initialization
void Start () {
socket = GetComponent();
Debug.Log ("connecting");
socket.On("open", OnConnected);
socket.On("colors", OnColorsReceived);
_gameObjectSpawner = Gui.GetComponent ();
url = socket.url;
}
void OnConnected(SocketIOEvent e)
{
Debug.Log("connected");
}
void OnColorsReceived(SocketIOEvent e)
{
Debug.Log("connected");
var sum = e.data ["clear"].n;
float r, g, b;
r = e.data["red"].n; r /= sum;
g = e.data["green"].n; g /= sum;
b = e.data["blue"].n; b /= sum;
Debug.Log("red:" + r);
Debug.Log("green:" + g);
Debug.Log("blue:" + b);
_gameObjectSpawner.redColor = r;
_gameObjectSpawner.greenColor = g;
_gameObjectSpawner.blueColor = b;
}
}

The colors received function translates the data that I then transfer to the GameObjectSpawner.

If this project made you interested in developing Virtual Reality apps, or tinker with Tessel 2, Adafruit RGB Color Sensor, or just learned enjoyed this article, please click "Respect Project" and follow me. Thanks.