I tried to make a DJ Box as a controller for the music beats game. There are lots of games playing with music, but usually they can play with keyboard or touch screen. While I was playing these games, I thought something physically shaped controller might help the players feel exciting and engaging with the game better. For playing with the dj box, the players can feel like they are DJ which I aimed for the project. Now the players can not just be a player but also be the cool DJ.
I used real record that fixed with 360 rotary encoder and the led buttons that look like beat engineer machine. I used Arduino to make the physical parts, and HTML, Javascript and JQuery to build a digital game website. For communication, I used Node.js.
I try to explore openFrameworks which is very first time to use. From the example code, imageSubsectionExample, I changed image subsection function to video subsection function which is more fun!
I made a game that can play with arduino inputs which is a controller of the game. I wanted to explore more about node.js. I referenced Paweena’s example codes. Thank you master Paweena !
var canvas = document.getElementById(“awesomeCanvas”);
var ctx = canvas.getContext(“2d”);
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var color = ‘#FFFFFF’;
var ballColor;
var ballSize = 30;
var s = 0;
var start = false;
if(data == 25451){
color = ‘white’;
}else if(data == 25956){
color = ‘red’;
}else if(data == 28535){
color = ‘yellow’
}else if(data == 25966){
color = ‘green’
}else if(data == 30053){
color = ‘blue’
}
start = true;
});
// wait one second before starting animation
//setTimeout(function() {
var startTime = (new Date()).getTime();
animate(playerBar, balls, canvas, ctx, startTime);
//}, 10);
</script>
</body>
</html>
/ comm.js / CODE
// old stuff
var connect = require(‘connect’),
fs = require(‘fs’),
util = require(‘util’),
io = require(‘socket.io’).listen(9001), // WS port
port = 9000, // HTTP port
// new stuff
// define a class
SerialPort = require(“serialport”).SerialPort,
// ls /dev/tty.*
sPort=”/dev/tty.usbmodem1411″,
//sPort = “/dev/tty.usbserial-AM01PK24″,
// create an instance (object)
arduino = new SerialPort(sPort, {
baudrate: 9600
});
// create web server using connect
connect.createServer(
connect.static(__dirname + ‘/public’) // two underscores
).listen(port);
util.log(‘the server is running on port: ‘ + port);
// init socket.io
io.set(‘log level’, 1);
io.sockets.on(‘connection’, function(socket) {
util.log(‘Ooooooh, someone just poked me :)’);
socket.on(‘led’, function(data) {
// sending binary data
var ledOn = new Buffer(1), // Buffer is an array and Buffer(1) means 1 index array
ledOff = new Buffer(1);
ledOn[0] = 0x01; // 1
ledOff[0] = 0x00; // 0
// shorthand ledOn = new Buffer([0x01])
// receive data
arduino.on(‘data’, function(data) { // data comes in Buffer < >
// try removing toString()
// util.log(data);
receivedData += data;
// basically says if there’re ‘E’ and ‘B’ signals
if (receivedData.indexOf(‘E’) >= 0 && receivedData.indexOf(‘B’) >= 0) {
// save the data between ‘B’ and ‘E’
sendData = receivedData.substring(receivedData.indexOf(‘B’) + 1, receivedData.indexOf(‘E’));
receivedData = ”;
util.log(sendData);
// parse data to browser
io.sockets.emit(‘pot’, sendData);
// socket.io
// emit, on, broadcast.emit, io.sockets.emit
}
if (receivedData.indexOf(‘S’) >= 0 && receivedData.indexOf(‘F’) >= 0) {
// save the data between ‘B’ and ‘E’
sendData = receivedData.substring(receivedData.indexOf(‘S’) + 1, receivedData.indexOf(‘F’));
receivedData = ”;
util.log(sendData);
// parse data to browser
io.sockets.emit(‘button’, sendData);
// socket.io
// emit, on, broadcast.emit, io.sockets.emit
}
});
/ comm_app.ino / CODE
const int outputPin = 13;
int potPin = 0;
int sensorVal = 0;
int prevVal = 0;
String inputString = “”;
int soundPin = 12;
int buttons [] = {2,3,4,5,6};
int buttonState [5];
I made a random sequence of sounds and led lights. At the first time, I try to use input data from Arduino – thermometer – but I failed to use.. Therefore, I focus on using input datas from Node.js to produce outputs of Arduino. (Reference : examples code from the class Week 09.)
Arduino Code :
//define led pins
int led1 = 10;
int led2 = 11;
int led3 = 12;
int led4 = 13;
int buzzerPin = 8;
//initialize pinmode with OUTPUT mode and activate the serial port with baudrate 9600
void setup() {
pinMode(led1, OUTPUT);
pinMode(led2, OUTPUT);
pinMode(led3, OUTPUT);
pinMode(led4, OUTPUT);
pinMode(buzzerPin, OUTPUT);
Serial.begin(9600);
}
//wait for incoming data from the serial port
//if incoming data has value “1”, turn on LED1 and so forth
//activate serial port module
var serialport = require(“serialport”);
var SerialPort = serialport.SerialPort;
//set led=1 as initial command
var led = 1;
// change serial port of Arduino
var myserial = new SerialPort(“/dev/tty.usbmodem1411”,{
baudrate: 9600
});
//open event from serial port module
myserial.on(‘open’,function(){
//timer set at 2000
setInterval(testLEDwithBuzzer,500);
});
function testLEDwithBuzzer(){
led = Math.round((Math.random(0,1)*10) %3 +1);
console.log(‘send command for led with buzzer=’ + led);
//write data into serial port
myserial.write(led.toString());
}
//catches errors from serial port
myserial.on(‘error’, function (err) {
console.log(‘Error = ‘ + err);
});
I played with 2 sensors : a potentiometer and a photo resistor. I used potentiometer to change the speed of lights going, and photo resistor for changing brightness. It was fun to explore analog inputs/sensors to make digital effects.
//CODE//
int speedPin = 1;
int ledPin [] = {3,9,10,11};
int photoPin = 0;
int brightness = 255;
int fadeAmount = 5;
int sensorValue;
int speedValue;
int mappedValue;
int time;
I made a program that can play sounds and led lights from the input, ‘r’, ‘g’, ‘y’, and ‘b’. The user put a sequence with r, g, y, and b. It will make sound and led light effects based on the user’s input sequence. Playful !
//CODE//
int ledPin [] = {8,9,10,11};\
int buzzerPin = 2;
int incomingByte = 0;
I could play with LEDs and Buttons ! I wanted to make cute 3 LED lights. Also, I wanted to try boolean buttons for the LEDs and Buttons. When I push buttons, it stays ON and when I push once again, it turns OFF.
(1) 3 LEDs
int ledPin_red = 11;
int ledPin_yellow = 12;
int ledPin_blue = 13;
I had hard time to work with API, but finally I could figure out how to play with API ! Today’s review class was so much helpful to do this work. I’ve learned how to bring live information from API from Weather Underground by looking at its json datas and apply them to my website. Especially, bring live Radar+Satellite Map was so interesting ! I will definitely use API in my future project.
I could learn how to arrange images and sources on the web pages and simple animation. I try to make more dynamic animation (like every stars will move whenever users click them.) But even one star movement took a lot of time to figure out. I will iterate this project to have more dynamic animation.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
h3.title{
margin-left: 10px;
font-family: Helvetica;
}
</style>
</head>
<body>
<h3 class=”title”> The Little Prince </h3>
<canvas id=”awesomeCanvas” width=1200 height=600></canvas>
<script type=”text/javascript”>
var canvas = document.getElementById(“awesomeCanvas”);
var ctx = canvas.getContext(“2d”);
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var numberOfStars = 100;
var star = {
x: Math.random()*canvasWidth,
y: Math.random()*canvasHeight,
image: new Image(),
opacity: 0.5
};
var stars = new Array(numberOfStars);
for(var i = 0; i < numberOfStars; i++)
stars[i] = {
x: Math.random()*canvasWidth,
y: Math.random()*canvasHeight,
image: new Image(“star.png”),
opacity: 0.5
};
for(var i =0; i<numberOfStars; i++)
stars[i].image.src=”star.png”;
var littlePrince = {
x:canvasWidth/2-150,
y:canvasHeight/2,
image: new Image(),
};
<script type=”text/javascript”>
//this is where javascript lives
console.log(“This is javascripts println();”);
var display = “”;
var noun1 = “CCLab”;
var noun2 = “cat”;
var verb1 = “sleep”;
var verb2 = “eat”;
var adj1 = “hungry”;
var adj2 = “”;
var sentence = noun1 + ” want to ” + verb1 + ” with ” + noun2 + ” because ” + noun1 + ” is ” + adj1 + “. But ” + noun2 + ” can’t ” + verb1 + ” because ” + noun2 +” have to ” + verb2 + adj2 +”.”;
function erase(){
document.getElementById(“display_sentence”).innerHTML=””;
}
function restart(){
document.getElementById(“display_sentence”).innerHTML=sentence;
}
Creative Computation Lab, Fall 2013 
