For this project, you will explore the multiple new inputs available to a new generation of smart phones and tablet computers by building interactive experiments that re-imagine children’s picture books and updates them for this new medium.
My main interactive options for the ipad was Tilt, swipe, tap, tap n hold, audio.
I chose the book "bang" as my book.
This was my first attempt at interactive design, so alot of learning processing was developed.
Link to video of it working: https://www.youtube.com/watch?v=2TkPqLYwMPU&feature=youtu.be
Here is a preview at my HTML skill :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kyle's Design</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- Jquery and JQuery mobile -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<link rel="stylesheet" href="css/page1.css">
<link rel="stylesheet" href="css/page4.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="js/main.js">
<link rel="stylesheet" href="js/mic.js">
<link rel="stylesheet" href="js/move.js">
<link rel="stylesheet" href="js/moveacross.js">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).on("pagecreate","#page7",function(){
$("p").on("taphold",function(){
$(this).hide();
});
});
</script>
<script>
$(document).on("pagecreate","#page8",function(){
$("p").on("swiperight",function(){
$(this).hide();
});
});
</script>
<style>
#div1 { width:397px;height:657px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<script>
$(document).on("pagecreate","#page11",function(){
$("p").on("swipe",function(){
$(this).hide();
});
});
</script>
</head>
<body>
<audio autoplay loop>
<source src="music/backgroundtrack.mp3" type="audio/mpeg">
</audio>
<!-- Start of first page -->
<div data-role="page" id="page1">
<div role="main" class="ui-content">
<audio autoplay >
<source src="music/startsound.mp3" type="audio/mpeg">
</audio>
<div id="axis" class="four">
<div id="bookContainer">
<img style="position:absolute; TOP:-20px; LEFT:-20px; " src="images/startingscene.gif"/>
</div>
</div>
<a href="#page2" data-transition="slide"><img style="position:absolute; TOP:600px; LEFT:950px; " src="images/next%20button.png" ></a>
</div><!-- /content -->
</div><!-- /page -->
<!-- Start of first page -->
<div data-role="page" id="page2">
<div role="main" class="ui-content">
<div id="axis" class="four">
<div id="bookContainer">
<img style="position:absolute; TOP:-20px; LEFT:-20px; " src="images/deerdrivinggif.gif"/>
</div>
</div>
<a href="#page3" data-transition="slide"><img style="position:absolute; TOP:-10px; LEFT:-10px; " src="images/deerdrivinggif.gif" ></a>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="page3">
<div role="main" class="ui-content">
<div id="axis" class="four">
<div id="bookContainer">
<img style="position:absolute; TOP:-20px; LEFT:-20px; " src="images/crashone.gif"/>
</div>
</div>
<a href="#page4" data-transition="slide"><img style="position:absolute; TOP:600px; LEFT:950px; " src="images/next%20button.png" ></a>
</div><!-- /content -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="page4">
<div role="main" class="ui-content">
<img style="position:absolute; TOP:0px; LEFT:0px; " src="images/tapntiltgif.gif"/>
<div id="axis" class="four">
<img class="object book multiple" src="images/book1.png"/>
<img class="object book2 multiple" src="images/book2.png"/>
<img class="object book3 multiple" src="images/book3.png"/>
<img class="object book4 multiple" src="images/book4.png"/>
<img class="object book5 multiple" src="images/book5.png"/>
<img class="object book6 multiple" src="images/book6.png"/>
<img class="object book7 multiple" src="images/book7.png"/>
<img class="object book8 multiple" src="images/book8.png"/>
</div>
<img id="please" src="images/trashcan.png"/>
<a href="#page20" data-transition="slide"><img style="position:absolute; TOP:600px; LEFT:950px; " src="images/next%20button.png" ></a>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="page20">
<div role="main" class="ui-content">
<img style="position:absolute; TOP:-20px; LEFT:-20px; " src="images/pig.png"/>
<a onclick="this.firstChild.play()"><audio src="music/horn1.mp3" type="audio/mpeg"></audio> <img style="position:absolute; TOP:205px; LEFT:615px; " src="images/horn1.gif"></a>
<a onclick="this.firstChild.play()"><audio src="music/horn2.mp3" type="audio/mpeg"></audio> <img style="position:absolute; TOP:260px; LEFT:566px; " src="images/horn2.gif"></a>
<a onclick="this.firstChild.play()"><audio src="music/horn3.mp3" type="audio/mpeg"></audio> <img style="position:absolute; TOP:298px; LEFT:587px; " src="images/horn3.gif"></a>
<a onclick="this.firstChild.play()"><audio src="music/horn5.mp3" type="audio/mpeg"></audio> <img style="position:absolute; TOP:355px; LEFT:572px; " src="images/horn4.gif"></a>
<a onclick="this.firstChild.play()"><audio src="music/horn4.mp3" type="audio/mpeg">></audio> <img style="position:absolute; TOP:390px; LEFT:575px; " src="images/horn5.gif"></a>
<a onclick="this.firstChild.play()"><audio src="music/chick1.mp3" type="audio/mpeg"></audio> <img style="position:absolute; TOP:220px; LEFT:730px; " src="images/chicmove1.gif"></a>
<a onclick="this.firstChild.play()"><audio src="music/chick2.mp3" type="audio/mpeg"></audio> <img style="position:absolute; TOP:280px; LEFT:730px; " src="images/chicmove2.gif"></a>
<a onclick="this.firstChild.play()"><audio src="music/chick3.mp3" type="audio/mpeg"></audio> <img style="position:absolute; TOP:345px; LEFT:730px; " src="images/chicmove3.gif"></a>
<a onclick="this.firstChild.play()"><audio src="music/chick4.mp3" type="audio/mpeg"></audio> <img style="position:absolute; TOP:405px; LEFT:730px; " src="images/chicmove4.gif"></a>
<a href="#page6" data-transition="slide"><img style="position:absolute; TOP:600px; LEFT:950px; " src="images/next%20button.png" ></a>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="page6">
<div role="main" class="ui-content">
<img style="position:absolute; TOP:-20px; LEFT:-20px; " src="images/feathersani.gif"/>
<a href="#page7" data-transition="slide"><img style="position:absolute; TOP:600px; LEFT:950px; " src="images/next%20button.png" ></a>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="page7">
<div role="main" class="ui-content">
<div id="axis" class="four">
<img style="position:absolute; TOP:-20px; LEFT:-20px; " src="images/redback.png" >
<p>
<a onclick="this.firstChild.play()"><audio src="music/POP.mp3" type="audio/mpeg"></audio><img class="object chicken1" src="images/chicken1.png"/></a>
</p>
<p>
<a onclick="this.firstChild.play()"><audio src="music/POP.mp3" type="audio/mpeg"></audio>
<img class="object chicken2 " src="images/chicken2.png"/>
</p>
<p>
<a onclick="this.firstChild.play()"><audio src="music/POP.mp3" type="audio/mpeg"></audio>
<img class="object chicken3 " src="images/chicken3.png"/>
</p>
<p>
<a onclick="this.firstChild.play()"><audio src="music/POP.mp3" type="audio/mpeg"></audio>
<img class="object chicken4 " src="images/chicken4.png"/>
</p>
<p>
<a onclick="this.firstChild.play()"><audio src="music/POP.mp3" type="audio/mpeg"></audio>
<img class="object chicken5 " src="images/chicken5.png"/>
</p>
<p>
<a onclick="this.firstChild.play()"><audio src="music/POP.mp3" type="audio/mpeg"></audio>
<img class="object chicken6 " src="images/chicken6.png"/>
</p>
<p>
<a onclick="this.firstChild.play()"><audio src="music/POP.mp3" type="audio/mpeg"></audio>
<img class="object chicken7 " src="images/chicken7.png"/>
</p>
<p>
<a onclick="this.firstChild.play()"><audio src="music/POP.mp3" type="audio/mpeg"></audio>
<img class="object chicken8 " src="images/chicken8.png"/>
</p>
</div>
<a href="#page8" data-transition="slide"><img style="position:absolute; TOP:600px; LEFT:950px; " src="images/next%20button.png" ></a>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="page8">
<div role="main" class="ui-content">
<img style="position:absolute; TOP:-20px; LEFT:-20px; " src="images/newdoublecrash.gif"/>
<a href="#page10" data-transition="slide"><img style="position:absolute; TOP:600px; LEFT:950px; " src="images/next%20button.png" ></a>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="page10">
<div role="main" class="ui-content">
<div id="axis" class="four">
<img style="position:absolute; TOP:-20px; LEFT:-20px; " src="images/tire%20graff.png">
<img class="object swipetire " src="images/swipeoff.png"/>
<p>
<img class="object tire1 " src="images/tire1.png"/>
</p>
<p>
<img class="object tire2 " src="images/tire2.png"/>
</p>
<p>
<img class="object tire3 " src="images/tire3.png"/>
</p>
<p>
<img class="object tire4 " src="images/tire4.png"/>
</p>
<p>
<img class="object tire5 " src="images/tire5.png"/>
</p>
<p>
<img class="object tire6 " src="images/tire6.png"/>
</p>
<p>
<img class="object tire7 " src="images/tire7.png"/>
</p>
<p>
<img class="object tire8 " src="images/tire8.png"/>
</p>
<p>
<img class="object tire9 " src="images/tire9.png"/>
</p>
</div>
</div><!-- /content -->
</div><!-- /page -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/page1.js"></script>
<script src="js/page4.js"></script>
<script src="js/page5.js"></script>
</body>
</html>
Some CSS Work :
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 0;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
}
h1 {
font-size: 25pt;
font-family: 'Gochi Hand', cursive;
text-align: center;
}
/** AXIS **/
#axis{
font: 10pt normal Arial, sans-serif;
height: 768px;
position: relative;
text-align: center;
width: 1024px;
}
#axis.default {
background: url('../images/axis.jpg') no-repeat 0 0;
}
#axis.one{
background: url('../images/axis-1.jpg') no-repeat 0 0;
}
#axis.two{
background: url('../images/axis-2.jpg') no-repeat 0 0;
}
#axis.three{
background: url('../images/axis-3.jpg') no-repeat 0 0;
}
#axis.four{
background: url('../images/axis-4.jpg') no-repeat 0 0;
}
#axis.five{
background: url('../images/axis-5.jpg') no-repeat 0 0;
}
#axis.six{
background: url('../images/axis-6-cw.jpg') no-repeat 0 0;
}
#axis.seven{
background: url('../images/axis-7-ccw.jpg') no-repeat 0 0;
}
#axis.eight{
background: url('../images/axis-8-scale.jpg') no-repeat 0 0;
}
.object {
position: absolute;
/** This css rule will make the object
move smoothly and animated **/
-webkit-transition: all 5s ease-in-out;
-moz-transition: all 5s ease-in-out;
-o-transition: all 5s ease-in-out;
/* Currently IE doesn't support for transition property http://www.w3schools.com/cssref/css3_pr_transition.asp */
/**
linear: The animation has the same speed from start to end.
ease: Default. The animation has a slow start, then fast, before it ends slowly.
ease-in: The animation has a slow start.
ease-out: The animation has a slow end.
ease-in-out: The animation has both a slow start and a slow end.
Credit Source: http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp
**/
}
/** Adjust objects position
to the center of Axis **/
.book {
top: 5%;
left: 5%;
}
.book2 {
top: 10%;
left: 20%;
}
.book3 {
top: 5%;
left: 35%;
}
.book4 {
top: 10%;
left: 50%;
}
.book5 {
top: 5%;
left: 65%;
}
.book6 {
top: 20%;
left: 80%;
}
.book7 {
top: 25%;
left: 10%;
}
.book8 {
top: 25%;
left: 61%;
}
.book9 {
top: 25%;
left: 5%;
}
.chicken1 {
top: 5%;
left: 5%;
}
.chicken2 {
top: 25%;
left: 75%;
}
.chicken3 {
top: 0%;
left: 35%;
}
.chicken4 {
top: 5%;
left: 65%;
}
.chicken5 {
top: 65%;
left: 35%;
}
.chicken6 {
top: 55%;
left: 5%;
}
.chicken7 {
top: 25%;
left: 0%;
}
.chicken8 {
top: 55%;
left: 65%;
}
.tire1 {
top: -2.5%;
left: -3%
}
.tire2 {
top: -2.5%;
left: -2%
}
.tire3 {
top: -2.5%;
left: -2%
}
.tire4 {
top: -2.5%;
left: -2%
}
.tire5 {
top: -2.5%;
left: -2%
}
.tire6 {
top: -2.5%;
left: -2%
}
.tire7 {
top: -2.5%;
left: -2%
}
.tire8 {
top: -2.5%;
left: -2%
}
.tire9 {
top: -2.5%;
left: -2%
}
.trash {
top: 50%;
left: 25%;
}
#trash {
top: 50%;
left: 25%;
}
.swipetire{
top: 0%;
left: 0%;
}
/* HORIZONTALLY MOVEMENT */
/* PREFIX
-webkit- is for Chrome & Safari;
-o- is for Opera;
-moz- is for Mozilla Firefox
*/
/** Moving object to the right **/
#axis:hover .move-right{
transform: translate(350px,0);
-webkit-transform: translate(350px,0);
-o-transform: translate(350px,0);
-moz-transform: translate(350px,0);
}
/** Moving object to the left **/
#axis:hover .move-left{
transform: translate(-350px,0);
-webkit-transform: translate(-350px,0);
-o-transform: translate(-350px,0);
-moz-transform: translate(-350px,0);
}
/** VERTICALLY MOVEMENT **/
/** Moving object upwards**/
#axis:hover .move-up{
transform: translate(0,-384px);
-webkit-transform: translate(0,-384px);
-o-transform: translate(0,-384px);
-moz-transform: translate(0,-384px);
}
/** Moving object downwards **/
#axis:hover .move-down{
transform: translate(0,800px);
-webkit-transform: translate(0,800px);
-o-transform: translate(0,800px);
-moz-transform: translate(0,800px);
}
/** DIAGONALLY MOVEMENT **/
/** Move object diagonally (Northeast) **/
#axis:hover .move-ne{
transform: translate(350px,-350px);
-webkit-transform: translate(350px,-350px);
-o-transform: translate(350px,-350px);
-moz-transform: translate(350px,-350px);
}
/** ROTATION **/
/** Rotate Object 360 clockwise**/
#axis:hover .rotate360cw{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
/** Rotate Object 360 counter clockwise **/
#axis:hover .rotate360ccw{
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
}
/** Scale **/
#axis:hover .scale{
transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-moz-transform: scale(2);
}
/** Multiple **/
#axis:hover .multiple {
transform: translate(0, 800px) rotate(360deg);
-webkit-transform: translate(0px, 800px) rotate(360deg);
-o-transform: translate(0px, 800px) rotate(360deg);
-moz-transform: translate(0px, 800px) rotate(360deg);
}
Little bit of Java:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
//canvas.width = document.body.clientWidth;
//canvas.height = document.body.clientHeight;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";
input.offset = new Vector2(GetLeft(canvas), GetTop(canvas));
var floor = new Rectangle(0,400,400,20);
floor.color = new Color(0,0,0,1);
var player = new Rectangle(15,15,20,20);
player.color.r = 0;
player.color.g = 0;
var gravity = 3;
var Update = setInterval(function()
{
if(input.a)
player.x -= 3;
if(input.d)
player.x += 3;
player.y += gravity;
if (floor.Intersects(player))
player.y = floor.y - player.height;
}, 1);
var Draw = setInterval(function()
{
ctx.clearRect(0,0,canvas.width, canvas.height);
floor.Draw(ctx);
player.Draw(ctx);
}, 33);
var trashh = $('#trashh');
if (window.DeviceOrientationEvent) { console.log("DeviceOrientation is supported");
window.addEventListener('deviceorientation', function(eventData) {
var LR = eventData.gamma;
var FB = eventData.beta;
var DIR = eventData.alpha; deviceOrientationHandler(LR, FB, DIR); }, false);
} else { alert("Not supported on your device or browser. Sorry."); }
function deviceOrientationHandler(LR, FB, DIR) {
document.getElementById("trashh").style.webkitTransform = "rotate("+ LR +"deg) rotate3d(3,0,0, "+ (FB*-1)+"deg)";
document.getElementById("trashh").style.transform = "rotate("+ LR +"deg) rotate3d(3,0,0, "+ (FB*-1)+"deg)"; }
No comments:
Post a Comment