Overview

Give an overview of your project idea (what it does, what it looks like, etc).

Originally, I wanted to make a cube shaped pocket-sized artifact which displays an animation over it’s surface. The animation changes according to the data it has accumulated over a period of time, making each artifact display a unique visual pattern. It is possible to connect two artifacts to change and “breed” their content.

The idea evolved into a device which uses light to create a dialogue between users in different places. Each device dialogues over the internet with another device. Whenever a user taps or moves the first device, it affects the animation on the second device in real-time. My purpose with this is to explore what types of interaction can evolve from a conversation with light.

For the prototype, I made a single-panel device connected to an ESP32 which communicates through Websockets with another Arduino with a sensor. If you tap the accelerometer connected to the Arduino, it triggers a different animation on the panel. I also made a website which can trigger the animation too. In the future, I would like to have more control over the sensor and communication protocol, but for now it was enough proof of concept.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0ab341fa-8145-46f1-93f0-94f94278ec8f/fake_cube.gif


In an ideal setting, I wanted my object to look like a portable device. However, I also like the idea of it being something that is constantly illuminating the space it inhabits. The NeoPixels at full intensity are blindingly bright and could easily fill a dark room with color.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0da35058-8ccc-41a3-948e-bec191987798/Hand.gif

And If it was portable, It would be cool to have it sniff for wifi signals and behave according to what it discovers.

WiFi-sniffing capabilities with the esp32: https://blog.podkalicki.com/esp32-wifi-sniffer/


Prototype Demonstration

Show a demonstration of your working prototype.


How does it work?

Give an overview of how your prototype works.

For it to work I had to create a Websocket server in NodeJS. With the server created in my computer, I made a web client in order to connect to my server as a client. The same concept is what is going behind the communication with the ESP32, just clients sending messages that go through the server. This means that I can parse any message and control the flow of information.

Right now, my prototype is controlled by two buttons in a website. Each button starts a new animation. This is to simulate when one user taps the other device.

It also has an Arduino MKR1010 WiFi connected to the LIS3DH accelerometer. However, I still have adjustments to make to the sensibility of the sensor, so I am just sending a 'tap' message to the server every ten seconds or so.

Sending message to Server and ESP32 from Arduino MKR1010

// send tap to esp32
      client.beginMessage(TYPE_TEXT);
      client.print("real tap");
      client.endMessage();
      delay(10000);

Sending Message to Server and ESP32 from NodeJS Web Client

function loadTap() {

	var item1 = document.querySelector(".item1");	
	item1.onclick = async () => {
		console.log("clicked!");
		// Connection opened
			socket.send('fake tap!');
		
	}
	var item2 = document.querySelector(".item2");
	console.log("found it!");
	
	item2.onclick = async () => {
		console.log("clicked!");
		// Connection opened
			socket.send('fake tap 2!');
		
	}

}

LIS3DH

Very precise 3DOF accelerometer with tap detection. Below is the Adafruit Breakout board.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b3f805cb-12e4-4e6a-9055-743fdd307285/LIS3dH.jpg

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3631350c-be01-4e04-8e65-4067e9a13f01/lis3dh-pin-descriptions-from-data-sheet.jpg

NeoPixels

Beautiful dots of light. Below is the Adafruit individual LED Breakout board.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/232910d2-d156-4be6-b790-adffb94deffd/leds_neo-closeup.jpg

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/23e96485-7e53-4184-a2d1-3ff8b15dadc8/ind_Neopixel.jpg

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/996b0474-f1ef-409f-82d3-5555a3679239/1487-06.jpg

MIC5225-3.3

The MIC5225 is a 150mA highly accurate, low dropout regulator.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2dbbb6fc-397f-42ed-821a-e175535dc6a7/MIC5225_33.jpg

DC BARREL JACK

The connector for any input DC power source with a connector.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cbf7c565-e4f5-4b2d-b90e-e168f5390343/12748-01.jpg

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0a419008-92d2-4526-ba84-2f582f609f07/componentFlow.jpg


Eagle Design

Give an overview of your Eagle design

First I had to connect everything, and then go to the .brd file and make the board design. I went ahead and removed any unnecessary components and making sure every GND and power inputs were correctly addressed. Since I had already made the connections with the prototype made last week, it didn’t take me much time.

ESP32

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/21abb5d1-3b7e-403b-9f75-c8d3c2d03036/myESP.jpg

LIS3DH + MIC5225-3.3V

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3156ac0a-f745-42b7-b6ca-19e51bdcfbd2/myLIS3DHandMIC5225.jpg

NEOPIXELS

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e1a843b6-a0dd-4621-9505-cf65aebf081f/myNeopixels.jpg

FRONT:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7d30c216-a8d6-4396-ba95-1faaa88c3fca/FinalBackside.jpg

BACK:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fde389e2-e03c-46c5-92e1-e368fd4edb5d/FinalFrontside.jpg

NO GND PLANES:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/16c9aac2-4575-485c-b59a-a9ce85ac0b91/FinalNoPlanes.jpg

Future Assembly:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5cfd0549-6175-42be-b35b-b8bcdeb10526/sketchfinalstructure.jpg