Javascript to create random radial gradient

Saola Animate Support Questions
1

Problem:
I am new to Saola Animate and Javascript.

  1. If I add an external Javascript file to Saola, does it show errors?

  2. I am trying to create a circle filled with white on one color stop and a random color for the second color stop to create a radial gradient effect.

This is what I have so far:

 document.addEventListener('DOMContentLoaded', function() {

      function gumb() {
          var gumball =  document.getElementById("ball");

    function newGradient() {
         var randomColor1 = "#" + Math.floor(Math.random()*16777215).toString(16);
           return randomColor1;
     }

    // Create gradient
    // (x0,y0,r0 (starting circle),x1,y1, r1(ending circle))
    var grd = gumball.createRadialGradient(100,65,5,100,65,50);
    gumball.addColorStop(0,"white");
    gumball.addColorStop(1,newGradient());

   // Fill with gradient
   gumball.fill();

});

I would appreciate any suggestions.

Saola Animate version: 3.1.1

OS:
Ventura 13.0.1
Notes:

2

Hi,

Please see this sample project.
random gradient.saolapack (2.1 KB)

You can find the script in the Scene Activate event.

Regards

1 Like
3

@ToanLS

Thank you so much for your help. I really appreciate it.

4

Just curious with the same file ToanLS provided. How do you create the same effect using an external JavaScript file?
I tried doing it but, the javascript is not working. This is what I have:
randomRadGradWexternalJS.zip (7.2 KB)
I think the problem is that the function needs to be called.
I would appreciate any suggestions.

5

Hi,

Your external JavaScript file just defines the function (onSceneActivated(doc, e)).
You need to call that function when the scene is activated.
To call that function, add a Run JavaScript action to the scene activate event:

function sceneEventHandler(doc, e) {
	onSceneActivated(doc, e);
}

Regards

1 Like
6

Thank you so much, I really appreciate your help.