Playtop

Playtop is a prototype for an interactive toy. The set consists of a surface that sits on top of a laptop, two character pieces, and three transportation models, a car, a boat, and a spaceship. The pieces fit into holes on the board, and trigger various reactions on the screen. When the characters, Anna and Sam, are set down, they ask the player what vehicle she or he would like to ride in today. If a transportation model is set down, a landscape appears on the screen behind the piece. When both a character and a model are on the board, it triggers a short animation.

Collaboration

This project is a collaboration between artists Sultanali Barodawala, Ziqu Zou, Juno 刘嘉琦, and myself for our major studio class at Parsons. For this assignment, we were given one week to make whatever we wanted. The only requirement was that we present a finished object at the end.

Natasha Lewandrowski – Case and character design, laser cutting, and construction
Sultanali Barodawala and Juno 刘嘉琦 – Animation
Ziqu Zou – Physical computing and code
All – Concept, prototyping, development

How it Works

Each piece has a contact point on the base that lines up with another contact point on the board. All the connections align differently, so the board can always tell which pieces are on it. The board communicates with a website through the computer using an Arduino and USB to play the animations.

Next Steps

Playtop is prototype. If we were to take this product to market we would do several things differently. First, we would create a stand alone device rather than a interface for a laptop. This product is aimed at young children, so the device needs to be durable and inexpensive. The pieces would be made of thicker wood, with all the edges rounded for safety. All materials would be non-toxic. We also envision expansion sets with additional characters, models, and animations.

Code

We have provided the code below for those who are interested.

 

HTML

<html>
<head>
<title>button and pot</title>
<style type=”text/css”>
button { font-size: 1.2em;
font-weight: 100;
width: 100px;
height: 100px;
border-radius: 50%;
background: white
}
#ardButton {
width: 100px;
height: 100px;
background: blue
}
</style>
</head>
<body>
<h1>Hello Arduino</h1>
<h4>Switching LED</h4>
<button id=”toggleLED”>ON/OFF</button>
<h4>Pressing button</h4>
<div id=”ardButton”> </div>
<h4>Receiving potmeter value</h4>
<div id=”pot” style=”display:block; height: 25px; background: red”></div>

<script src=”http://localhost:9001/socket.io/socket.io.js”></script&gt;
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script&gt;
<script>
var socket = io.connect(‘http://localhost:9001&#8217;);

//led stuff
var isOn = false;
$(‘#toggleLED’).click(function() {
if (isOn == false) {
isOn = true;
$(this).css({
background: ‘yellow’
});
socket.emit(‘led’, true);
} else if (isOn == true) {
isOn = false;
$(this).css({
background: ‘white’
});
socket.emit(‘led’, false);
}
});

//potentiometer
socket.on(“pot”, function(data){
console.log(“pot value:” + data);
$(‘#pot’).animate({
‘width’:data
}, 50);
});

//button
socket.on(“ardButton”, function(data){
if(data==1){
$(‘#ardButton’).css({
‘height’:’50px’
});
console.log(“the button is pressed!”);
} else {
$(‘#ardButton’).css({
‘height’:’100px’
});
} //else
});

</script>
</body>
</html>

//.js ==============

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>PLAY TOP</title>
<meta name=”description” content=”BigVideo.js – The jQuery Plugin for Big Background Video” />
<meta name=”author” content=”John Polacek” />
<meta name=”viewport” content=”width=device-width”>
<link href=’http://fonts.googleapis.com/css?family=Source+Sans+Pro:900&text=ABCDEFGHIJKLMNOPQRSTUVWXYZ&#8217; rel=’stylesheet’ type=’text/css’>
<link rel=”stylesheet” href=”css/style.css”>
<link rel=”stylesheet” href=”bower_components/BigVideo/css/bigvideo.css”>
<script src=”bower_components/modernizr/modernizr-2.5.3.min.js”></script>

<style type=”text/css”>
button { font-size: 1.2em;
font-weight: 100;
width: 100px;
height: 100px;
border-radius: 50%;
background: white
}
#ardButton {
width: 100px;
height: 100px;
background: blue
}
#ardButton2 {
width: 100px;
height: 100px;
background: blue
}
#ardButton3 {
width: 100px;
height: 100px;
background: blue
}
</style>
</head>
<body>

<!– BG music –>
<!– Page1 –>
<audio id=”music” src=”” autoplay=”autoplay”>
<audio loop id=”bg1″ src=”” autoplay=”autoplay”>
<audio id=”PG1bot” src=”” autoplay=”autoplay”>

<!– Page2 –>
<audio id=”PG2Tree” src=”” autoplay=”autoplay”>
<audio loop id=”PG2BG” src=”” autoplay=”autoplay”>

<!– Page3 –>
<audio loop id=”PG3BG” src=”” autoplay=”autoplay”>
<audio id=”PG3Door” src=”” autoplay=”autoplay”>

<!– page4 –>
<audio loop id=”PG4BG” src=”” autoplay=”autoplay”>
<audio id=”PG4Tree” src=”” autoplay=”autoplay”>
<audio id=”PG4house” src=”” autoplay=”autoplay”>
<!– nodeandA –>

<!– BigVideo Dependencies –>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script&gt;
<script>window.jQuery || document.write(‘<script src=”bower_components/jquery/jquery.min.js”><\/script>’)</script>
<script src=”bower_components/jquery-ui/ui/jquery-ui.js”></script>
<script src=”bower_components/jquery-ui/ui/minified/jquery-ui.min.js”></script>
<script src=”http://vjs.zencdn.net/4.0/video.js”></script&gt;
<script src=”bower_components/eventEmitter/eventEmitter.min.js”></script>
<script src=”bower_components/eventie/eventie.js”></script>
<script src=”bower_components/imagesloaded/imagesloaded.js”></script>

<!– BigVideo –>
<script src=”bower_components/BigVideo/lib/bigvideo.js”></script>
<script src=”http://localhost:9001/socket.io/socket.io.js”></script&gt;

<!– Demo –>
<script>

// $(function() {

// Use Modernizr to detect for touch devices,
// then serve them alternate background image content
var isTouch = Modernizr.touch;

// vars for auto hiding
var isShowingPlaylist = false;
var isHidden = false;
var autoHideTimer;
var $showContentButton = $(‘<div class=”touchscreen-show-button box”>Back</div>’)

// initialize BigVideo
var BV = new $.BigVideo({forceAutoplay:isTouch});
BV.init();
// show background image
BV.show(‘img/main.jpg’);
var socket = io.connect(‘http://localhost:9001&#8217;);
var sequece=0;
var on1=0,on2=0,on3=0,on4=0,on5=0,on6=0,on7=0,on8=0,on9=0,on10=0;
var manison=0;
var girlison=0;
var L1on=0;
var L2on=0;
var L3on=0;
socket.on(‘A3’, function(data){
if(data==1&&manison!=1){
console.log(‘Man On’);
manison=1;

if(L1on==1){

console.log(‘Play1’);

BV.show(‘vids/Spaceship.mp4’,{doLoop:false});

}else if(L2on==1){

console.log(‘Play2’);
BV.show(‘vids/car.mp4’,{doLoop:false});
}else if(L3on==1){

console.log(‘Play3’);

BV.show(‘vids/Boat.mp4’,{doLoop:false});

}else if(L1on==0&&L2on==0&&L3on==0){

console.log(‘Man Is Thinking’);
BV.show(‘img/boy.jpg’,{doLoop:false});
autoHide(true);
}

}else if(data==0&&manison!=0&&girlison==0){
console.log(‘Man and Girl leave’);

manison=0;

if(L1on==1){

console.log(‘Stop1’);
BV.show(‘img/space.jpg’,{doLoop:false});

}else if(L2on==1){

console.log(‘Stop2’);
BV.show(‘img/car.jpg’,{doLoop:false});

// BV.show(‘vids/01_2.m4v’,{doLoop:false});
// autoHide(true);

}else if(L3on==1){

console.log(‘Stop3’);
BV.show(‘img/boat.jpg’,{doLoop:false});
}else if(L1on==0&&L2on==0&&L3on==0){

console.log(‘Main’);
BV.show(‘img/main.jpg’,{doLoop:false});
}
}

});
socket.on(‘A4’, function(data){
if(data==1&&girlison!=1){
console.log(‘Girl On’);
girlison=1;

if(L1on==1){

console.log(‘Play1’);

BV.show(‘vids/Spaceship.mp4’,{doLoop:false});

}else if(L2on==1){

console.log(‘Play2’);
BV.show(‘vids/car.mp4’,{doLoop:false});
}else if(L3on==1){

console.log(‘Play3’);

BV.show(‘vids/Boat.mp4’,{doLoop:false});

}else if(L1on==0&&L2on==0&&L3on==0){

console.log(‘Man Is Thinking’);
BV.show(‘img/girl.jpg’,{doLoop:false});
autoHide(true);
}

}else if(data==0&&girlison!=0&&manison==0){
console.log(‘Man and Girl leave’);

girlison=0;

if(L1on==1){

console.log(‘Stop1’);
BV.show(‘img/space.jpg’,{doLoop:false});

}else if(L2on==1){

console.log(‘Stop2’);
BV.show(‘img/car.jpg’,{doLoop:false});

// BV.show(‘vids/01_2.m4v’,{doLoop:false});
// autoHide(true);

}else if(L3on==1){

console.log(‘Stop3’);
BV.show(‘img/boat.jpg’,{doLoop:false});
}else if(L1on==0&&L2on==0&&L3on==0){

console.log(‘Main’);
BV.show(‘img/main.jpg’,{doLoop:false});
}
}

});
socket.on(‘A2’, function(data){

if(data==1&&L1on!=1){

console.log(‘L1On’);
L1on=1;

if(manison==1||girlison==1){

console.log(‘play1’);
BV.show(‘vids/Spaceship.mp4’,{doLoop:false});

}else if(manison==0&&girlison==0){

console.log(‘stop1’);
BV.show(‘img/space.jpg’,{doLoop:false});

}
}else if(data==0&&L1on!=0){
console.log(‘L1Leave’);
L1on=0;

if(manison==1){
console.log(‘BoyThinking’);
BV.show(‘img/boy.jpg’,{doLoop:false});
// autoHide(true);

}else if (girlison==1) {
console.log(‘GirlThinking’);
BV.show(‘img/girl.jpg’,{doLoop:false});

}else if(manison==0&&girlison==0){
console.log(‘Main’);
BV.show(‘img/main.jpg’,{doLoop:false});
}
}

});
socket.on(‘A1’, function(data){

if(data==1&&L2on!=1){

console.log(‘L2On’);
L2on=1;

if(manison==1||girlison==1){

console.log(‘play2’);
BV.show(‘vids/car.mp4’,{doLoop:false});
}else if(manison==0&&girlison==0){

console.log(‘stop2’);
BV.show(‘img/car.jpg’,{doLoop:false});
// BV.show(‘vids/01_2.m4v’,{doLoop:false});
// autoHide(true);
}

}else if(data==0&&L2on!=0){
console.log(‘L2Leave’);
L2on=0;

if(manison==1){
console.log(‘BoyThinking’);

BV.show(‘img/boy.jpg’,{doLoop:false});
// autoHide(true);

}
else if (girlison==1) {
console.log(‘GirlThinking’);
BV.show(‘img/girl.jpg’,{doLoop:false});

}
else if(manison==0&&girlison==0){
console.log(‘Main’);
BV.show(‘img/main.jpg’,{doLoop:false});

}
}

});

socket.on(‘A0’, function(data){

if(data==1&&L3on!=1){

console.log(‘L3On’);
L3on=1;

if(manison==1||girlison==1){

console.log(‘play3’);

BV.show(‘vids/Boat.mp4’,{doLoop:false});
}else if(manison==0&&girlison==0){

console.log(‘stop3’);
BV.show(‘img/boat.jpg’,{doLoop:false});
}

}else if(data==0&&L3on!=0){
console.log(‘L3Leave’);
L3on=0;
if(manison==1){
console.log(‘Thinking’);

BV.show(‘img/boy.jpg’,{doLoop:false});
// autoHide(true);

}else if (girlison==1) {
console.log(‘GirlThinking’);
BV.show(‘img/girl.jpg’,{doLoop:false});

}
else if(manison==0&&girlison==0){
console.log(‘Main’);
BV.show(‘img/main.jpg’,{doLoop:false});

}
}

});
</script>
</body>
</html>
<body>
<h1>Hello Arduino</h1>
<h4>Switching LED</h4>
<button id=”toggleLED”>ON/OFF</button>
<h4>Pressing button</h4>
<div id=”ardButton”> </div>
<h4>Receiving potmeter value</h4>
<div id=”pot” style=”display:block; height: 25px; background: red”></div>

<script src=”http://localhost:9001/socket.io/socket.io.js”></script&gt;
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script&gt;
<script>
var socket = io.connect(‘http://localhost:9001&#8217;);

//led stuff
var isOn = false;
$(‘#toggleLED’).click(function() {
if (isOn == false) {
isOn = true;
$(this).css({
background: ‘yellow’
});
socket.emit(‘led’, true);
} else if (isOn == true) {
isOn = false;
$(this).css({
background: ‘white’
});
socket.emit(‘led’, false);
}
});

//potentiometer
socket.on(“pot”, function(data){
console.log(“pot value:” + data);
$(‘#pot’).animate({
‘width’:data
}, 50);
});

//button
socket.on(“ardButton”, function(data){
if(data==1){
$(‘#ardButton’).css({
‘height’:’50px’
});
console.log(“the button is pressed!”);
} else {
$(‘#ardButton’).css({
‘height’:’100px’
});
} //else
});

</script>
</body>
</html>

// Arduino ===========

const int l1=A2;
int buttonState1=0;
int prevButton1=0;

const int l2=A1;
int buttonState2=0;
int prevButton2=0;

const int l3=A0;
int buttonState3=0;
int prevButton3=0;

const int boy=A3;
int buttonState4=0;
int prevButton4=0;

const int girl=A4;
int buttonState5=0;
int prevButton5=0;

const int ledPin = 13;
void setup()
{
pinMode(ledPin, OUTPUT);
Serial.begin(9600);
}

void loop()
{

//PAGE3

//Main
buttonState4=digitalRead(boy);
//if(prevButton5!=buttonState5){
Serial.print(‘A’);
Serial.print(buttonState4);
Serial.print(‘S’);

buttonState5=digitalRead(girl);
//if(prevButton5!=buttonState5){
Serial.print(‘Q’);
Serial.print(buttonState5);
Serial.print(‘W’);

//BTN
buttonState1=digitalRead(l1);
//if(prevButton5!=buttonState5){
Serial.print(‘D’);
Serial.print(buttonState1);
Serial.print(‘F’);
// prevButton5=buttonState5;
// }

buttonState2=digitalRead(l2);
//if(prevButton5!=buttonState5){
Serial.print(‘G’);
Serial.print(buttonState2);
Serial.print(‘H’);

buttonState3=digitalRead(l3);
//if(prevButton5!=buttonState5){
Serial.print(‘J’);
Serial.print(buttonState3);
Serial.print(‘K’);

delay(300);

}

Advertisements

2 thoughts on “Playtop

  1. Pingback: Mixed Reality Pterodactyl Toy | conteximus

  2. Pingback: Unintended Landscapes | conteximus

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s