Browser animations using multiple Javascript source files

Question

I have two Javascript files, both setup to generate an image from base64. The first script, called static.js looks like this.

var element = new Image();
  element.src = "data:image/png;base64,..."
  document.body.appendChild(element);

I can embed the script into my website using the following code and the image appears with no issues. (To see the full code, including the base64, go here)

<body>
  <script src="./static.js"></script>
</body>

Similarly, I have a second script that I found on CodePen by takashi that converts a base64 image into an animated glitch. I was able to take that code and modify it using the same base64 image as the static code but with the glitch (apologies, but the code is really long even without my base64 image so I just included the link). The code for my image can be seen here. Note that while CodePen shows the HTML and Javascript on the same page, I broke mine out into separate files.

Again, if I embed the script into the webpage, it works with no issues.

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
  <script src="./glitch.js"></script>
</body>

The issue I have is that neither code has a dedicated javascript function() attribute, so the only way they work is if I embed the code as indicated above. Using the static image for brevity, if I add a dedicated function:

function isStatic() {
var element = new Image();
  element.src = "data:image/png;base64,..."
  document.body.appendChild(element);
}

and then try a callback,


<body>
  <script src="./static.js">
    isStatic();
  </script>
</body>

the image does not appear on the webpage any longer. The same happens on the glitched image when I try to wrap the whole script into a function and then try a callback.

The main reason I was trying to turn each JS file into functions is so that I could combine the two into one file (which I did), and then using an embedded script like

<script>
  setInterval(function(isStatic) {
    // This will be executed every 9 seconds
  }, 9000);

  setInterval(function(isGlitch) {
    // This will be executed every 2 seconds
  }, 2000);
</script>

to create an image that switches from static to glitched, and then back again.

Since I was not able to successfully turn each JS file/script into it's own function, what I am trying to figure out is if there is a better way to combine my Static and Glitch JS scripts into one, or if there is a way that I can set the webpage to call each script file individually in such a way that creates a loop of the static and glitched images switching back and forth.

I have scoured the Google-webs looking for anything that describes what I am trying to do visually, but have absolutely nothing to show for it but a whole heap of scripts on various ways to make text and/or images glitch (just not how to make them start out static and then glitch randomly). Essentially what I would like to do with my two scripts is

 - run static image (script or call) for *x* seconds (120-180 seconds)
 - run glitched image (script or call) for *x* seconds (3-5 seconds)
 - reset (loop) the sequence

in order to create the appearance of a single image that seems to randomly glitch for unknown reasons.

Do you have a working example so that we can understand with more detail what you want to achieve? — Mihail Minkov, Feb 17 '20 at 22:34
@MihailMinkov, [this link](https://stackoverflow.com/a/25243413/12914290) is the closest comparison I have to what I want to do, except using my two .js files/images place of ```hMsg.innerHTML = "1";```, ```hMsg.innerHTML = "2";```, or ```hMsg.innerHTML = "3";```. — ne0pet, Feb 17 '20 at 22:49
I was referring to a visual example of what you want to achieve @ne0pet. — Mihail Minkov, Feb 18 '20 at 02:10
Apologies for the late reply, were you looking for the original source code for the glitched image? — ne0pet, Feb 18 '20 at 03:32
Somehow I missed the links so code in the question. I'll edit my answer to be more specific. But just to clarify, do you just want the glitching to happen less often? Or do you want your non-glitched image to be something other than a rabbit? — Sydney, Feb 18 '20 at 04:39
If I could get the code to glitch less often,that would solve a lot of my issues. Essentially I want to create the illusion that the static rabbit glitches randomly and not all the time. The rabbit is the base image that I am working with either way. Thank you for the assistance. My brain is nearly mush having stared at this code for the last several days trying to figure it out (I'm still a bit of a novice when it comes to Javascript). — ne0pet, Feb 18 '20 at 05:49
Are you aware that the original code on the codepen is using a library called p5 js (https://p5js.org/)? And that it is written in babel, not pure javascript? The p5 library relies on accessing a global draw function, but when you wrap it in a function, it is no longer global, so nothing is drawn. — Sydney, Feb 18 '20 at 07:00
I did notice when I originally compiled the code using Notepad++ that the culprit was that I didn't link that p5 JS. Once I did that, it began working. I did not go pull the p5 JS code and look at it though. I guess because my static file was also failing on the wrap, I didn't look beyond the JS code for either. — ne0pet, Feb 18 '20 at 13:39

Sydney · Accepted Answer · 2020-02-18T06:54:04.810

Edited answer after your clarifying comment:

Your code uses a library called p5, which is controlling your animation timing, so my previous answer is irrelevant. If you just want to change how often the glitch occurs, you already have almost everything you need. The glitch.js file already has a flag to turn the glitch on and off (this.throughFlag). And, it already has a slight random delay between glitches on line 226:

setTimeout(() => {
                this.throughFlag = true;
            }, floor(random(40, 400)));

The second parameter to setTimeout controls how long to wait beofre setting this.throughFlag to true (and thus starting to glitch again). You just need to make this number longer. To do so, you want to make the time on the timeout longer, ie by multiplying it by some constant, which I'll call delayFactor.

const delayFactor = 10;
setTimeout(() => {
                this.throughFlag = true;
            }, delayFactor * floor(random(40, 400)));

See it in action here.

Your very first sentence is a reason to vote to close the question, not answer it. [ask] — Rob, Feb 18 '20 at 03:19
I originally thought there may be a way to adjust the frequency of the glitch to tone it back some, but the delay factor does the trick so much better than I could have imagined @Sydney. And probably much easier than trying to convert these two codes into a carousel-like sequence. I'll plug the updated code in my browser source when I get home to test it out, but I think this will work perfectly (I did tweak the delay to 50 and got the effect vs frequency I was going for). I can't tell you how many new grey hairs you've saved me on this, thank you so much! — ne0pet, Feb 18 '20 at 14:18

Browser animations using multiple Javascript source files

1 Answers1