-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 )
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
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:
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);
}
}
}
}
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
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
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…
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…)
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…
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 - 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.
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)
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…
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...
if your draw start like this you see the grid again:
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
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
