Commit 9fdc8cfb authored by Raphaël Bastide's avatar Raphaël Bastide

First sound tests, new modules, gfx

parent 0f32528e
......@@ -7,4 +7,20 @@ body {
padding: 0;
}
.matter-header-outer{display: none!important;}
.matter-demo{background: #777!important}
.matter-demo{
background: #eee!important;
}
canvas{
position: relative;
}
canvas:before{
z-index: 1000000;
box-shadow: 0px 0px 16px red inset;
background: red;
content:"";
position: absolute;
top:0;
left:0;
bottom: 0;
right: 0;
}
This diff is collapsed.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="200"
height="200"
viewBox="0 0 52.916668 52.916668"
version="1.1"
id="svg8"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
sodipodi:docname="ball.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.8"
inkscape:cx="55.175243"
inkscape:cy="59.817906"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1024"
inkscape:window-x="0"
inkscape:window-y="868"
inkscape:window-maximized="1"
units="px" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(46.310902,285.37685)">
<circle
id="path817"
style="opacity:1;vector-effect:none;fill:#00ffff;fill-opacity:1;stroke:none;stroke-width:0.59829068;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
cx="-19.85257"
cy="-258.91852"
r="26.458334"
inkscape:export-xdpi="57.439999"
inkscape:export-ydpi="57.439999" />
<path
style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.32291663;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
d="m -35.06611,-265.91108 c -0.185166,0.29373 -0.113679,0.63269 0.09449,0.94494 0.349514,0.52428 1.592722,-0.12184 1.228422,-0.85044 -0.282849,-0.5657 -2.311836,-1.50537 -1.889881,-0.66146"
id="path816"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.32291663;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
d="m -4.8280168,-244.46093 c -1.4542716,1.90294 0.4724718,2.27293 0.4724718,0.0945"
id="path818"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.32291663;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
d="m 0.27466327,-259.29649 c -1.96606847,0.0519 1.13821633,1.89703 0,0 z"
id="path820"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.32291663;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
d="m -25.522212,-248.99664 c -0.583888,3.02265 2.115088,-0.63232 0.661459,0.0945"
id="path822"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.32291663;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
d="m -7.7573299,-277.06137 c -0.9376384,-0.16111 -1.2212241,2.35875 -0.2834825,1.88988 0.7138643,-0.35694 1.6379507,-1.92136 0.7559516,-2.36235"
id="path824"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.32291663;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
d="m -6.4344133,-271.29724 c -2.3546249,-0.19999 -0.6849321,2.41532 0.1889866,1.32292 0.2403131,-0.30039 0.2414138,-0.55661 0.094493,-0.85045"
id="path826"
inkscape:connector-curvature="0" />
</g>
</svg>
......@@ -11,26 +11,27 @@
<meta name="robots" content="noindex">
<link rel="stylesheet" href="css/main.css">
<title>Ball On URL</title>
</head>
<body>
<!-- <button class="play">play</button> -->
<script type="text/javascript" src="lib/decomp.js"></script>
<script type="text/javascript" src="lib/pathseg.js"></script>
<!-- Matter -->
<script src="lib/matter.min.js"></script>
<!-- MatterTools -->
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script src="lib/matter-tools.gui.js"></script>
<script src="lib/matter-tools.inspector.js"></script>
<script src="lib/matter-tools.demo.js"></script>
<!-- Plugins -->
<script src="lib/matter-wrap.js"></script>
<!-- Examples -->
<!-- Sound -->
<script src="lib/tone.js"></script>
<script src="js/sound.js"></script>
<!-- Car -->
<script src="js/car.js"></script>
</head>
<body>
<script src="js/launcher.js"></script>
</body>
</html>
......@@ -31,13 +31,22 @@ Example.car = function() {
engine: engine,
options: {
wireframes:false,
width: 1600,
height: 800,
width: 1900,
height: 1000,
showAngleIndicator: false,
showCollisions: false,
background: '#111'
background: '#222',
}
});
var startX = 100
var startY = 200
var nextPos = 0
var lastDir = 0
var w = 400
var h = 10
var platformColor = "#CCC"
var ballColor = "#e91763"
var zoom = false
Render.run(render);
......@@ -48,22 +57,13 @@ Example.car = function() {
engine.world.gravity.y = 1;
var car = Composites.car(150, 100, 150, 30, 40)
var test = Bodies.circle(100, 100, 100, { friction:0, frictionAir:.003, restitution: 0.2})
// test.density = 1
car.bodies[1].friction = 0 // wheels friction
car.bodies[2].friction = 0
var ball = Bodies.circle(100, 100, 100, { friction:1, frictionAir:.003, restitution: 0.2})
ball.render.sprite.texture = 'img/ball.svg'
// ball.render.fillStyle = ballColor
World.add(world, test);
World.add(world, ball);
// World.add(world, car);
var startX = 100
var startY = 200
var nextPos = 0
var lastDir = 0
// var realW = unit.bounds.max.x - unit.bounds.min.x
// var realH = unit.bounds.max.y - unit.bounds.min.y
var w = 400
var h = 10
for (var i = 0; i < terrain.length; i++) {
if (urlshapes) {
var t = "%E" + String(terrain[i])
......@@ -75,31 +75,61 @@ Example.car = function() {
}
function buildUnit(char, nextPos){
var posY = nextPos.y
if (char == "%E2%80%94" || char == 'f') { // shape: —
var unit = Bodies.rectangle(nextPos.x, posY, w, h, { isStatic: true, angle: Math.PI * 0.0 , friction:0})
if (char == 'f') {
var unit = Bodies.rectangle(nextPos.x, posY, w, h, { isStatic: true, angle: Math.PI * 0.0 })
unit.name = 'flat'
unit.render.fillStyle = 'white'
unit.render.fillStyle = platformColor
getDistances(unit)
nextPos.x += unit.distances.w
nextPos.y += unit.distances.h
}else if (char == '%E2%95%B1' || char == 'u') { // shape: ╱
var unit = Bodies.rectangle(nextPos.x, posY - 150, w, h, { isStatic: true, angle: Math.PI * -0.2 , friction:0})
}else if (char == 'u') {
var unit = Bodies.rectangle(nextPos.x, posY - 150, w, h, { isStatic: true, angle: Math.PI * -0.2 })
unit.name = 'up'
unit.render.fillStyle = 'white'
unit.render.fillStyle = platformColor
getDistances(unit)
nextPos.x += unit.distances.w
nextPos.y -= unit.distances.h
}else if (char == '%E2%95%B2' || char == 'd') { // shape: ╲
var unit = Bodies.rectangle(nextPos.x, posY + 150, w, h, { isStatic: true, angle: Math.PI * 0.2, friction:0})
}else if (char == 'd') {
var unit = Bodies.rectangle(nextPos.x, posY + 150, w, h, { isStatic: true, angle: Math.PI * 0.2})
unit.name = 'down'
unit.render.fillStyle = 'white'
unit.render.fillStyle = platformColor
getDistances(unit)
nextPos.x += unit.distances.w
nextPos.y += unit.distances.h
}else if (char == '%E2%96%B6' || char == 'b') { // shape: ▶
var unit = Bodies.rectangle(nextPos.x, posY, w, h, {isStatic: true, angle: Math.PI * 0.0, friction:0})
}else if (char == 'b') {
var unit = Bodies.rectangle(nextPos.x, posY, w, h, {isStatic: true, angle: Math.PI * 0.0})
unit.name = 'boost'
unit.render.fillStyle = '#00FF00'
unit.render.fillStyle = '#60a74b'
getDistances(unit)
nextPos.x += unit.distances.w
nextPos.y += unit.distances.h
}else if (char == 'w') {
var unit = Bodies.rectangle(nextPos.x - 150, posY - 150, w, h, {isStatic: true, angle: Math.PI * 0.5})
unit.name = 'wall'
unit.render.fillStyle = platformColor
getDistances(unit)
nextPos.x += 100
nextPos.y += 0
}else if (char == 'z') {
var unit = Bodies.rectangle(nextPos.x, posY , w, h, {isStatic: true, angle: Math.PI * 0})
unit.name = 'bulletTime'
unit.render.fillStyle = "#ba36a0"
getDistances(unit)
nextPos.x += unit.distances.w
nextPos.y += unit.distances.h
}else if (char == 'g') { // gap
var unit = Bodies.rectangle(nextPos.x, posY, w, h, { isStatic: true, angle: Math.PI * 0.0 })
unit.name = 'gap'
unit.render.fillStyle = 'rgba(0,0,0,0)'
unit.isSensor = true
getDistances(unit)
nextPos.x += unit.distances.w
nextPos.y += unit.distances.h
}else if (char == 'j') { // gap
var unit = Bodies.rectangle(nextPos.x, posY, w, h, { isStatic: true, angle: Math.PI * 0.0 })
unit.name = 'jump'
unit.render.fillStyle = '#f227dd'
unit.isSensor = true
getDistances(unit)
nextPos.x += unit.distances.w
nextPos.y += unit.distances.h
......@@ -112,7 +142,6 @@ Example.car = function() {
var realH = unit.bounds.max.y - unit.bounds.min.y
return unit.distances = {w:realW, h:realH}
}
// vertices[1].x += 0.2;
// add mouse control
var mouse = Mouse.create(render.canvas),
......@@ -127,25 +156,61 @@ Example.car = function() {
});
// World.add(world, mouseConstraint);
// keep the mouse in sync with rendering
render.mouse = mouse;
var timeScaleTarget = 1
var zoom = 500
var zoomTarget = 500
var counter = 0
var bulletTime = false
Events.on( engine, 'afterTick', (e)=> {
// Render.lookAt( render, car.bodies[0].bounds.max, {x: 500, y: 500 },true );
Render.lookAt( render, test, {x: 500, y: 500 },true );
if (bulletTime) {
engine.timing.timeScale += (timeScaleTarget - engine.timing.timeScale) * 0.05;
zoom += (zoomTarget - zoom) * 0.05;
if (counter >= 60 * 3.5) {
zoomTarget = 500
timeScaleTarget = 1
console.log(1);
}else{
zoomTarget = 200
timeScaleTarget = 0.05
console.log(2);
}
if (counter >= 60 * 3.6) {
ball.render.sprite.texture = 'img/ball.svg'
}
if (counter >= 60 * 4.5) {
engine.timing.timeScale = 1
bulletTime = false
timeScaleTarget = 1
zoomTarget = 500
zoom = 500
counter = 0
bulletTime = false
}
counter +=1
}
// console.log(ball.render.sprite.texture);
console.log(bulletTime);
Render.lookAt(render, ball, {x: zoom, y: zoom },true );
})
Events.on(engine, 'collisionStart', function(event) {
var pairs = event.pairs;
for (var i = 0, j = pairs.length; i != j; ++i) {
var pair = pairs[i];
if (pair.bodyA.name === 'boost') {
// pair.bodyB.render.fillStyle = '#00FF00';
// Body.setVelocity(test, { x: 50, y: 0 });
} else if (pair.bodyB.name === 'boost') {
if (pair.bodyB.name === 'boost') {
pair.bodyA.render.fillStyle = '#00FF00';
Body.setVelocity(test, { x: 50, y: 0 });
Body.setVelocity(ball, { x: 50, y: 0 });
// bell.triggerAttackRelease(300);
}else if(pair.bodyB.name === 'bulletTime') {
ball.render.sprite.texture = 'img/ball-bullettime.svg'
bulletTime = true
}else if(pair.bodyB.name === 'jump') {
Body.setVelocity(ball, { x: ball.speed, y: -50 });
}
}
});
......
var s1 = new Tone.MembraneSynth().toMaster();
// track
var bell = new Tone.MetalSynth({
"harmonicity" : 13,
"resonance" : 100,
"modulationIndex" : 10,
"octaves":3.7,
"envelope" : {
"attack": 0.01,
"decay" : 0.46,
"sustain":0,
"release":4
},
"volume" : -15
}).toMaster();
var bellPart = new Tone.Sequence(function(time, freq){
bell.frequency.setValueAtTime(freq, time, Math.random()*0.5 + 0.5);
bell.triggerAttack(time);
}, [[300, null, 200],
[null, 200, 200],
[null, 200, null],
[200, null, 200]
], "4n").start(0);
// bellPart.loop = true;
// bellPart.loopEnd = "1m";
var conga = new Tone.MembraneSynth({
"pitchDecay" : 0.008,
"octaves" : 2,
"envelope" : {
"attack" : 0.0006,
"decay" : 0.5,
"sustain" : 0
}
}).toMaster();
var congaPart = new Tone.Sequence(function(time, pitch){
conga.triggerAttack(pitch, time, Math.random()*0.5 + 0.5);
}, ["G3", "C4", "C4", "C4"], "4n").start(0);
// congaPart.loop = true;
// congaPart.loopEnd = "1m";
Tone.Transport.bpm.value = 95;
// var p = document.querySelectorAll(".play")[0]
// p.addEventListener('click',function(){
// Tone.Transport.toggle()
// })
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment