Home » Jquery » jquery – Browser animations using multiple Javascript source files

jquery – Browser animations using multiple Javascript source files

Posted by: admin February 22, 2020 Leave a comment

Questions:

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.

How to&Answer:

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.