# Beat unstable in graphic animation

**URL:** <https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493>\
**Category:** Libraries\
**Created:** [November 14, 2019, 3:03pm UTC](https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493 "2019-11-14T15:03:42Z")\
**Posts on this page:** 14\
**Page:** 2

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 16, 2019, 10:57pm UTC](https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493/21 "2019-11-16T22:57:54Z")

</div>

coding style:

-a- choose what you are comfortable with.

-b- compromise between many short functions and bigger function blocks  
( and use the editor feature CODE FOLDING on )

-c- a extra file.js makes sense  
-c1- if it is a very well tested function block ( like a class )  
-c2- if you want reuse it “myTools.js” in other projects  
-c3- it must be self contained and not need global vars from main  
-c4- declared in index.html  
-c5- browser “find” [ctrl][f] not work over 2 files…  
in a more IDE like editor things like that are better supported,  
even PDE ( but that not have code folding )

 ![p5js_code_folding](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4bec2f0d41d2764bfd9933ae7d31b7d85dd6c1d1.png)

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 18, 2019, 4:01pm UTC](https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493/22 "2019-11-18T16:01:59Z")

</div>

okay, shouldn´t I write the code for the graphic triggered by the metronome into another .js file?At least to get the status/beats from the metronome to trigger a graphical event…

IF so, can I control two or more .js-Files in the p5 online editor? Somehow it must be possible then to import the functionality of one .js file into the other (import directive?) When I get it right it has to be controlled by the index.html file.

I guess, I have to dig in a bit deeper into the overall concept with working in html controlling all the files. Have some books here now for html

THX!!  
BX

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 19, 2019, 2:22am UTC](https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493/23 "2019-11-19T02:22:58Z")

</div>

take a look

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/NIwFX54Gk)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

any add file.js must be declared inside index.html  
( no import statement needed )

AND that is also a example why you should not do it like that,  
as it violates one of my above rules:

> NO global vars from main

* * *

> [@byxx](#):
>
> Have some books here now for html

good, but isn’t that a java-script question?

[![](https://img.youtube.com/vi/Yk18ZKvXBj4/hqdefault.jpg "7.5: Multiple js Files - p5.js Tutorial") ](https://www.youtube.com/watch?v=Yk18ZKvXBj4)

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 21, 2019, 12:15am UTC](https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493/24 "2019-11-21T00:15:24Z")

</div>

Okay, I tried the importing into the index.html :

[https://editor.p5js.org/byxx/sketches/OhieZLmNk](https://editor.p5js.org/byxx/sketches/OhieZLmNk)

I recently build a version wanting to let the `state` (from the newly imported metronome.js, s. index.html) contol the `fadeIn` and `fadeOut` functions in sketch.js.

I tried to bring some doubled code into functions:

```auto
  function fadeIn(bxIndex, bxState) {
    if ( bxState == state) { //state var from the metronome.js - file
      for (let j = 0; j < 6; j++) {
        for (let i = 0; i < numF; i++) {
          let x = w * i;
          let y = h * j;
          let spot = boardArray[bxIndex][j][i];
          //textAlign(CENTER);
          fUp += 0.5* speed;
          fill(255, 0, 0, fUp);
          text(spot, x + w / 3.5, y + h / 2.5);
        }
      }
    }
  }

```

```auto
  <body>
             <script src="metronome.js"></script>  
             <script src="sketch.js"></script>

  </body>

```

Great example with the Kll-player of course. I understand a bit more about connecting functionality with 2 .js files  
So, my whole thing needs a bit of refactoring, I guess, but basic functionality is there after bringing metronome and animations together pretty rough.

The fade in at the beginning is missing and the grid lines, too. I try to work it out now. Would be cool to let the metronome show with the fade animations

Great!  
THX for help  
BX

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 21, 2019, 2:36am UTC](https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493/25 "2019-11-21T02:36:35Z")

</div>

i see, but  
that is where separation in 2 file.js already is UNHELPFUL

the scenes thing ( as function of `state` )  
is pure main() structure( called from `draw(){}` ),  
even it uses the `mbeat` from metronome.  
i would expect to find it in `sketch.js`

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 21, 2019, 3:03am UTC](https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493/26 "2019-11-21T03:03:31Z")

</div>

okay.  
would it help the performance of a program to divide code into several files or is it more a structural approach keeping the maintainance more easy (reading it) to split into several files? Where makes the seperation sense?  
Everything could be written in one file, of course.

I am not really into classes yet or so, but I would consider trying to create a metronome class and a graphical animation class, if useful…

Would be nice to make it modular using the metronome and the animation on different pages using a modular arrangement of the tools or so…

Thanks for your patience

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 21, 2019, 4:03am UTC](https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493/27 "2019-11-21T04:03:51Z")

</div>

i am not into coding theory…  
actually only had a FORTRAN course.  
( punching cards… )

so i might not have the right words, or even rules …  
HOW to organize your code.

just think about if you would understand and find the key tuning numbers  
if you open that code a year later.

having functions and classes in files  
i give you already 2 good reasons:

- copy that file and reuse in other project
- with using IDE editors handling files ( as TAB ) better

* * *

i not think there is any performance to consider

* * *

but modular and separate file are different things.  
functions and classes are modules what makes your code shorter and readable.  
and i case you need a change possibly only touch ONE function.  
you are on the right way  
with your functions work: fadein() fadeout() OR fade (in\_out…)

---

<div class="post-metadata">

**Author:** ![NeilTheSeal](https://avatars.discourse-cdn.com/v4/letter/n/a8b319/32.png) [@NeilTheSeal](https://discourse.processing.org/u/NeilTheSeal)\
**Post date:** [November 21, 2019, 6:44am UTC](https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493/28 "2019-11-21T06:44:37Z")

</div>

This will work quite reliably:

```auto
let beep;
let beepDelayInMilliseconds = 1000;

function startBeep() {
  beep = window.setInterval(()=>{

    blip.play();

    beat += 1;
    if (beat % 5 == 0){
      beat = 1;
      bar += 1;
              blop.play();
    }
  },beepDelayInMilliseconds);
}

function stopBeep() {
  clearInterval(beep);
}

function setup() {
  createCanvas(1200, 800);
  startBeep();
}

```

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 21, 2019, 11:57am UTC](https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493/29 "2019-11-21T11:57:09Z")

</div>

Neal!,

will have a look on the setInterval()…  
KLL got a metronime working, also with a visible animation. He suggests to use `states` rather than `frameCounts` or `beats`, as I figured out that the animation stops or flips if you say something like if (beat == soandso).

So, The overall beep stability for the timming works so far.

Nevertheless  
Main question now is  
how to involve the visible metronome and the animations both being shown side by side with more or less modular code. I am not into it yet, but am working on it…

THX for your great help!!  
BX

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [November 21, 2019, 11:58am UTC](https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493/30 "2019-11-21T11:58:38Z")

</div>

> [@byxx](#):
>
> would it help the performance of a program to divide code into several files or is it more a structural approach keeping the maintainance more easy (reading it) to split into several files?

If you plan to upload your sketch so others can look at it online, it’s recommended to minimize your amount of HTTP requests ([Best Practices for Speeding Up Your Web Site - Yahoo Developer Network](https://developer.yahoo.com/performance/rules.html?guccounter=1#expires) - first paragraph). In your case this would mean that it’s better to use a single sketch.js, instead of spreading it over various files.

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 21, 2019, 12:08pm UTC](https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493/31 "2019-11-21T12:08:40Z")

</div>

> [@Tiemen](#):
>
> In your case this would mean that it’s better to use a single sketch.js, instead of spreading it over various files

Cool!  
Thx, Tiemen. Web programming is a bit different than object oriented programming, I guess…

THX  
BX

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 22, 2019, 1:57pm UTC](https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493/32 "2019-11-22T13:57:14Z")

</div>

Okay, with your great help:

here is the status of my project now. Its pretty neat and I like the idea of implementing the metronome being parallel to the grid showing the animations. (regarding from line 50 ff)

[https://editor.p5js.org/byxx/sketches/RlJ4CQ788](https://editor.p5js.org/byxx/sketches/RlJ4CQ788)

While editing I lost the grid lines. How to get them back AND let the metronome be shown :-))  
After updating the screen with the animation they are overridden, I guess…

```auto
function draw() {
  
  let w = (width / 2) / numF;
  let h = (height / 2) / 6;
  
   //GRID vertical
  for (i = 1; i < numF; i++) {
    line(w * i, 0, w * i, height);
  }

  //Grid Horizontal
  for (i = 1; i < 6; i++) {
    line(0, h * i, width, h * i);
  }
  
  background(220);

  metronom(true);
  screens();

etc...

```

THX  
BX

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 23, 2019, 3:39am UTC](https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493/33 "2019-11-23T03:39:52Z")

</div>

if your draw start like this you see the grid again:

```auto
function draw() {
  background(220);
  stroke(100,0,100);
  strokeWeight(0.3);
  let w = (width / 2) / numF;
  let h = (height / 2) / 6;
  for (i = 1; i < numF; i++) line(w * i, 0, w * i, height); // Grid vertical
  for (i = 1; i < 6; i++) line(0, h * i, width, h * i); // Grid horizontal
//....

```

but if you draw a grid  
and then use background you wouldn’t see much

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 23, 2019, 11:34am UTC](https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493/34 "2019-11-23T11:34:12Z")

</div>

> [@kll](#):
>
> background(220); stroke(100,0,100); strokeWeight(0.3); let w = (width / 2) / numF; let h = (height / 2) / 6; for (i = 1; i \< numF; i++) line(w \* i, 0, w \* i, height); // Grid vertical for (i = 1; i \< 6; i++) line(0, h \* i, width, h \* i); //

okay. Great!!!  
I already tried the background before and after the line drawing. The secret seems to be found in the `stroke` assignment, that you build into the code.

It works perfectly now.  
This status is pretty much I intended for this project (start). It will need a bit of functionality here and there, but this thread here has the main problems solved!! THX very much getting a great help from you guys out there! Very fortunate to have got in touch with you

BX

[Previous page](https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493.md?page=1)