Skip to content

Instantly share code, notes, and snippets.

@danhanfry
Created August 21, 2015 22:37
Show Gist options
  • Save danhanfry/98ffd53dd92c89003ba0 to your computer and use it in GitHub Desktop.
Save danhanfry/98ffd53dd92c89003ba0 to your computer and use it in GitHub Desktop.
Midi Piano
<div class="piano">
<div class="tecla-1">1</div>
<div class="tecla-2">2</div>
<div class="tecla-3">3</div>
<div class="tecla-4">4</div>
<div class="tecla-5">5</div>
</div>
<div class="global">
<div class="rail rail-1"></div>
<div class="rail rail-2"></div>
<div class="rail rail-3"></div>
<div class="rail rail-4"></div>
<div class="rail rail-5"></div>
</div>
var height = 500
var midi = {
duracionTotal: 1500,
data: [
{ duration: 125, nota: 1, startTime: 0 },
{ duration: 125, nota: 2, startTime: 200 },
{ duration: 125, nota: 3, startTime: 400 },
{ duration: 125, nota: 4, startTime: 600 },
{ duration: 125, nota: 1, startTime: 800 },
{ duration: 125, nota: 2, startTime: 1000 },
{ duration: 125, nota: 3, startTime: 1200 },
]
}
midi.data.map( function(item, i){
var calcTop = Number(item.startTime * height) / midi.duracionTotal
var calcSize = Number(item.duration * height) / midi.duracionTotal
var className = ".rail-" + item.nota
var style = "top:"+calcTop+"px; height:"+calcSize+"px;"
var html = "<div class='nota nota-" + item.nota + "' style='"+style+"'></div>"
$(className).append(html);
})
var div1 = $('.tecla-1')
var div2 = $('.nota-2')
console.log( collision(div1, div2) )
function collision($div1, $div2) {
var x1 = $div1.offset().left;
var y1 = $div1.offset().top;
var h1 = $div1.outerHeight(true);
var w1 = $div1.outerWidth(true);
var b1 = y1 + h1;
var r1 = x1 + w1;
var x2 = $div2.offset().left;
var y2 = $div2.offset().top;
var h2 = $div2.outerHeight(true);
var w2 = $div2.outerWidth(true);
var b2 = y2 + h2;
var r2 = x2 + w2;
if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
return true;
}
var aboutAnimation = new TimelineMax({
repeat: -1
})
aboutAnimation
.to('.global', midi.duracionTotal / 1000, {
y:-height,
ease: Linear.easeNone
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/TweenMax.min.js"></script>
*{
margin: 0;
padding: 0;
}
.piano {
background-color: #BDE2EE;
width: 500px;
height: 60px;
display: flex;
}
.piano div {
background-color: #63DD81;
width: 100px;
height: 60px;
border: solid 1px;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
}
.global {
background-color: #00FFDE;
width: 500px;
height: 500px;
display: flex;
z-index: -1;
position: absolute;
}
.rail {
background-color: #CDBEC4;
width: 100px;
height: 100%;
position: relative;
border: solid 1px;
}
.nota {
background-color: #7878B4;
width: 100px;
height: 50px;
position: absolute;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment