call canvasFillStyle each frame, move away from gradient concept

Author: tipsy

README.md

@@ -39,8 +39,6 @@ by including `{canvas: yourCanvas}` in the configuration.
 ```javascript
 bubbly({
     canvas: document.querySelector("#background"), // default is created and attached automatically
-    gradientStart: "#4c004c", // default is blue-ish
-    gradientStop: "#1a001a",// default is blue-ish
     compose: "lighter", // default is "lighter"
     animate: false, // default is true
     bubbles: Math.random() * 100, // default is Math.floor((canvas.width + canvas.height) * 0.02);

dist/bubbly-bg.js

@@ -26,7 +26,7 @@ body {
     white-space: pre;
     overflow-wrap: normal;
     overflow-x: scroll;
-    min-height: 132px;
+    min-height: 138px;
     padding-bottom: 8px;
 }
 
@@ -57,7 +57,8 @@ input::placeholder {
 
 hr {
     height: 1px;
-    background: rgba(255, 255, 255, 0.5);
+    background: rgba(255, 255, 255, 0.3);
+    margin: 12px 0;
 }
 
 .side-by-side {

docs/bubbly-bg.js

@@ -33,8 +33,8 @@
             <b-input v-model="shadowBlur" placeholder="Integer or expression returning integer"></b-input>
         </b-field>
     </div>
-    <b-field label="Gradient function" label-position="inside">
-        <b-input v-model="gradientFunc" type="textarea" placeholder="Function for drawing gradient"></b-input>
+    <b-field label="Canvas fill function" label-position="inside">
+        <b-input v-model="canvasFillFunc" type="textarea" placeholder="Function for canvas fill"></b-input>
     </b-field>
     <b-field label="Radius function" label-position="inside">
         <b-input v-model="radiusFunc" placeholder="Function for calculating radius"></b-input>
@@ -70,7 +70,7 @@
             fillFunc: "`hsla(0, 0%, 100%, ${Math.random() * 0.1})`",
             angleFunc: "Math.random() * Math.PI * 2",
             velocityFunc: "0.1 + Math.random() * 0.5",
-            gradientFunc: `
+            canvasFillFunc: `
 (ctx) => {
     const gradient = ctx.createLinearGradient(0, 0, ctx.canvas.width, ctx.canvas.height);
     gradient.addColorStop(0, "#2AE");
@@ -118,7 +118,7 @@
                     compose: this.selectedCompositeType,
                     shadowBlur: eval(this.shadowBlur),
                     shadowColor: this.shadowColor,
-                    gradientFunc: eval(this.gradientFunc),
+                    canvasFillFunc: eval(this.canvasFillFunc),
                     radiusFunc: eval("() => " + this.radiusFunc),
                     fillFunc: eval("() => " + this.fillFunc),
                     angleFunc: eval("() => " + this.angleFunc),

docs/generator.css

@@ -29,10 +29,10 @@ window.bubbly = function (c = {}) {
         }
     }
     c.ctx.globalCompositeOperation = c.compose;
-    c.ctx.fillStyle = c.gradient;
     requestAnimationFrame(draw);
 
     function draw() {
+        c.ctx.fillStyle = c.canvasFillFunc(c.ctx);
         if (c.cv.parentNode === null) {
             bubbles = [];
             return cancelAnimationFrame(draw);
@@ -88,18 +88,10 @@ function generateConfig(c) {
         fillFunc: () => `hsla(0, 0%, 100%, ${Math.random() * 0.1})`,
         angleFunc: () => Math.random() * Math.PI * 2,
         velocityFunc: () => 0.1 + Math.random() * 0.5,
-        gradientFunc: gradientFunc,
+        canvasFillFunc: () => "#2AE",
         animate: c.animate !== false,
         ctx: cv.getContext("2d"),
     }, c);
-    mergedConfig.gradient = mergedConfig.gradientFunc(mergedConfig.ctx);
     mergedConfig.padding = mergedConfig.shadowBlur * 2 + 2;
     return mergedConfig;
 }
-
-const gradientFunc = (ctx) => {
-    const gradient = ctx.createLinearGradient(0, 0, ctx.canvas.width, ctx.canvas.height);
-    gradient.addColorStop(0, "#2AE");
-    gradient.addColorStop(1, "#17B");
-    return gradient;
-}