Could someone help me out?

edited April 2015 in p5.js Library Questions

//I am trying to make an array of objects that change color and filter the song playing in the background. For some reason only one of the created objects changes the song filter.

                                        //Ellipse Control
                                        var xpos;
                                        var ypos;
                                        var radius = 50;
                                        //Sound Dampening
                                        var soundFile;
                                        var fft;
                                        var filter, filterFreq, filterRes;
                                        //var x, y;
                                        //Multiple Objects
                                        var bubbles = [];

                                        function preload() {
                                          soundFormats('mp3', 'ogg');
                                          soundFile = loadSound('assets/beat');

                                        function setup(){
                                            createCanvas(600, 600);
                                          // Create object
                                          for (var i=0; i<20; i++) {
                                           bubbles.push(new Jitter());

                                          // loop the sound file

                                          filter = new p5.LowPass();
                                          // Disconnect soundfile from master output.
                                          // Then, connect it to the filter, so that we only hear the filtered sound

                                          fft = new p5.FFT();

                                        function draw(){
                                            //draw the ovjects
                                          for (var i=0; i<bubbles.length; i++) {


                                        // Jitter class
                                        function Jitter() {
                                          this.x = random(width);  //this.x
                                          this.y = random(height); //this.y
                                          this.diameter = random(10, 30);
                                          this.speed = 2;

                                          this.move = function() {
                                            this.x += random(-this.speed, this.speed); //this.x
                                            this.y += random(-this.speed, this.speed); //this.y

                                          this.react = function() {
                                            filter.set(filterFreq, filterRes);
                                          if(dist(mouseX, mouseY, this.x, this.y) < radius){
                                            fill(random(255), random(255), random(255));
                                            filterFreq = 800;
                                            filterFreq = 22050;

                                          ellipse(this.x, this.y, radius*2, radius*2); //<----------Object of interest


  • edited April 2015

    I'm a fool! How exactly do I do that? I am rather new to this site.

  • use the autoformat and tag your codes with // This is the circle. Thats what I think he meant

  • ahh sorry He meant here, so you see where it says B I S C, C stands for code, so highlight the code you submitted and press C twice and then save. You should see it better formatted here.

  • There! :D

  • We'd have to add sound files to properly test this and the question could be more clearly phrased...

    Anyway first off my hunch was that you're running filter.set(filterFreq, filterRes); before the condition that changes the filterFreq variable... That means it's using the value set by the previous iteration - i.e. a different Jitter object.

    That's a first step; however there's a bigger problem. Since all your Jitter objects affect the same global variable filterFreq and you're using an else condition then I'd expect you'd only see interaction with the last created Jitter object: it will always override the value set by previous objects...

    A different strategy might be:

    • set a default value to filterFreq inside draw() and before the for loop that calls react();
    • change the condition in react() to just an if{ }
    • to make things more interesting you could store a different frequency on each Jitter object and assign this value to filterFreq in the condition. That way each object will have a different effect...

    One other simple improvement: set bubblesLength as a variable from the outset and use that rather than bubbles.length in the for loop (which is inefficient) and anywhere else it's needed. That way you can change the number of bubbles from a single location.

Sign In or Register to comment.