› ›

Ellipse is not rendering ,

gaurav__gaurav__
edited September 2016 in p5.js Library Questions

In this sound is coming but ellipse is not rendering . Please Help !!![js]

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Beat Big Ballzzzz</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../css/beatballs.css">
        <link rel="stylesheet" type="text/css" href="../css/nouislider.min.css">
</head>
<body id="body">
<div class="container">
<div id="sliderRow" class = "row top">
<div class="col-xs-2" id="congoSlider">
        <div id = "slider1" class="sliders"></div>
    </div>
</div>
<div id="instrumentsRow" class="row bottom">
    <div class="col-xs-2 instrument">
    </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="../js/p5.min.js"></script>
<script src="../js/global.js"></script>
<script src="../js/p5.sound.min.js"></script>
<script src="../js/nouislider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var sliders = document.getElementsByClassName('sliders');
for ( var i = 0; i < sliders.length; i++ ) {
noUiSlider.create(sliders[i], {
    start: 10,
    orientation: 'vertical',
            connect: 'lower',
    range: {
        'min': 0,
        'max': 100
    }
});
}

});

</script>


</body>
</html>

1 instance 

var c = function( p ) {
var fr = 10; //starting FPS
var sp = 120;
var ep = 500; // end point
var v0 = 5;
var v = v0; //congo velocity
var floortom_v = v0; // floor tom velocity
var a = 9.0; // acceleration

p.draw = function() {
var x = document.getElementsByClassName('sliders');
v = x.slider1.noUiSlider.get()/2 ;
    if(sp < ep){
        sp = sp + v;
         v += a;
    }
    else{
        congo_sound.play();
         sp = 120;
        p.clear();
        v = v0;
    }
    p.clear();
    var c = p.color(100, 0, 0);
    p.fill(c);
    p.ellipse(50,sp,10,10);
};
}
new p5(c,"body");

global js

function preload() {
      floortom_sound = loadSound('sounds/floortom.mp3');
       congo_sound = loadSound('sounds/congo.mp3');
}

function setup() {
 createCanvas(windowWidth, windowHeight);
    frameRate(fr); // Attempt to refresh at starting FPS
    background('white');
    // body...
}

(https://forum.processing.org/two/uploads/imageupload/427/5T1GXM6XLELN.png "js") html

Tagged:

Answers

Sign In or Register to comment.