MASK v2.0 – Unity!

Unity3D version of MASK!

Since it’s much more stable with App than with Webpage, maybe it’s worth a try to make a unity version of MASK collection. Hmm such a sweet dilemma!

Codes of accessing camera on the phone… omg so simple!

WebCamDevice[] devices = WebCamTexture.devices;
mCamera = new WebCamTexture ();

//for(var i=0; i<devices.Length; i++){
//	Debug.Log(devices[i].name);
//}

if (devices.Length > 0) {
	mCamera.deviceName = devices[0].name;
	displayPlan.GetComponent<Renderer>().material.mainTexture = mCamera;
	mCamera.Play ();
}

Spider Cookie 2.0 — now in P5.js!

Okkkiiee so when I was young, it’s an age using Processing.

Now, it’s P5.js.

OMG

And Shawn also make a serialport library for P5.js so the browser can talk to Arduino without sweat. No terminal, Node.js, websocket, modules and stuff. Whoo. But since not everyone has an Arduino with you all the time, here’s the standalone version, of my Spider Cookie sketch two years ago!

MASK v2.0 – Local server(*2) network!

Quick notes on how I made local Peer.js server, and also closed network!

When making my thesis, I used cloud hosted PeerServer with API key, so the project was constrained by internet access. In order to make the project more robust and stable, I decided to create PeerServer on my own laptop, and let devices (mobile phones) access the laptop (server) through Wi-Fi.

Here are the quick notes on how I did those (OMG such a googling / debugging hell!):

Create PeerServer accompanying another WebSocket system

Peer.js documented well about how to create your own PeerServer, even with examples of combining with existing express app, which is perfect for me. But because I have my own Node server as well, I struggled for a while to realize that, I should create two servers for each websocket with different ports!!! Finding this out through non-stop console.log and try & error!

Server codes

var express = require('express');
var app = express();
var http = require('http');
var server = http.createServer(app);
var port = process.env.PORT || 7000;

// peer_server
var ExpressPeerServer = require('peer').ExpressPeerServer;
var peerExpress = require('express');
var peerApp = peerExpress();
var peerServer = require('http').createServer(peerApp);
var options = { debug: true }
var peerPort = 9000;

app.get('*', function(req, res){
    res.sendFile(__dirname + req.url);
});
peerApp.use('/pp', ExpressPeerServer(peerServer, options));

server.listen(port);
peerServer.listen(peerPort);

Client side sudocode

var peerConnect = function() {			
	/* WebRTC - Peer.js */
	peer = new Peer( ID(), { secure: false, host: 'YOUR_IP', port: 5000, path:'/pp', debug:true} );

	// Get an ID from the PeerJS server		
	peer.on('open', function(id) {
		console.log('My peer ID is: ' + id);
		peer_id = id;

		// Now we can connect to my socket server						
		connectSocket();
	});

	peer.on('call', function(incoming_call) {
		console.log("Got a call!");
		incoming_call.answer(my_stream); // Answer the call with an A/V stream.
		// do what you want~~~
	});
};

MacbookPro as server, accessing by devices through Wi-Fi with router

1. Connect Router with MacbookPro
2. Click Wi-Fi symbol to expand the list –> Create Network…
3. Setup name and password
4. System Preferences… –> Sharing
   • Setup computer name
   • Click Internet Sharing
   • Share your connection from: Ethernet
   • To computer using: Wi-Fi
   • Click Wi-Fi Options –> setup Wi-Fi name and password
   • Click on box next to Internet Sharing to start
5. @ your device’s Wi-Fi list, choose the Wi-Fi shared by MacbookPro and enter password
6. Voila! Now your device and MacbookPro have same IP address, thus the device and go to the page that MacbookPro serves with <IP_address>:7000/index.html.

Summer Throwback Three: We Are What We Pretend To Be Inc. established!

The third major experiment I had this summer was a street car journey. At first it’s just another experiment with Unity, but then it leads me to an idea for the project I want to do this year, as the Research Fellow at ITP.

I decided to establish an incorporation, called WE ARE WHAT WE PRETEND TO BE Inc..

It’s inspired by the quotes of writer Kurt Vonnegut:

“We are what we pretend to be, so we must be careful about what we pretend to be.”

I discovered this when I was doing research for my thesis, and it inspired me a lot to shape the idea, and to make the MASK series.

WE ARE WHAT WE PRETEND TO BE Inc.(WAWPRE) is an entity for my series experiments about the relationship between our free will and unfree (uncontrollable) will. Can I change my unfree will by change my free will? How can I shift self identity by ultering my and also others perspective?

The first product of WE ARE WHAT WE PRETEND TO BE Inc. is MASK, a customized VR headset that helps the user become what they want to be.

The second service of WE ARE WHAT WE PRETEND TO BE Inc. is THE TRAM.

It’s an installation that provided customized virtual reality experience that users (aka passengers) can design their tram journey based on their mood, destination, favorite color, and cloth to wear. Also from the cutout hole on the cardboard box, which is usually covered with curtain, I will take a picture of the passengers, so the passengers will be able to see themselves in the VR.

WE ARE WHAT WE PRETEND TO BE Inc. THE TRAM takes you to wherever you want, fulfill whatever desire you want, therefore you become whomever you want. You set yourself free.

I joined Internet Yami-Ichi in New York this summer, and displayed my little handcraft Home Depot cardboard box as an installation + experience seller. For the software, I used Unity and started developing it on and off since August, since I was notified that I was selected to join the event. As for the box, I made it with recycled materials I found in junk shelf in one night before the event! Holy cow SO NERVOUS.

It’s really a successful experiments, for first ever user test! The users used it for a long time, average at least more than 1 minute! Which is a huge difference for me.  I think that’s because the tram keeps moving, the scenery outside the window keeps changing, plus there are ghost passengers getting on the bus when the tram stops at the tram station, the user is expecting things to happen, thus enjoys the VR experience for the longer time.

Screen captures with different customized setup

Contents development

It’s a subtraction process, because of limited time haha

You can escape into different spaces, under different circumstances.

Different customized options & graphic design

Ideas finalizing

Internet Yami-Ichi 

Thank you all my lovely first ever passengers<3 <3 <3

Let me thank you with this passengers all together gif <3<3<3 Thank you guys!!!