circleBs: adding circleBs

2026-04-03 00:30:09 +00:00 · 2025-08-08 22:58:43 +02:00
parent fd799ea724
commit c8cd522c94
10 changed files with 1050 additions and 0 deletions
--- a/circleBs/src/index.html
+++ b/circleBs/src/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html class="no-js" lang="">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>circleBs</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        html, body, div, canvas {
+            margin: 0;
+            padding: 0;
+        }
+        html, body { width:100%; height:100%; }
+        canvas { display:block; }
+        #clearBtn { left: 0px; }
+        #download { left: 60px; top: 3px; }
+    </style>
+</head>
+<body>
+<div id="content">
+    <canvas id="canvas" ></canvas>
+    <input class="top" id="clearBtn" type="button" onclick="reset()" value="clear" />
+    <a id="download" class="top" onclick="downloadCanvasCommon('circleBs', canvas)">Download</a>
+</div>
+<script type="module" src="js/main.js"></script>
+</body>
+</html>
+
--- a/circleBs/src/js/main.js
+++ b/circleBs/src/js/main.js
@@ -0,0 +1,83 @@
+import {
+    docReady, randomNumber
+} from "canvas-common";
+
+
+
+var canvas;
+var ctx;
+
+var config = {
+    size: {
+        height: window.innerHeight,
+        width: window.innerWidth
+    },
+    circleBs: {
+        maxAge: 1000
+    }
+};
+
+var objects = [];
+
+function update(obj) {
+    obj.deltaX += randomNumber(2);
+    obj.deltaY += randomNumber(2);
+    obj.x += obj.deltaX;
+    obj.y += obj.deltaY;
+    obj.radius += randomNumber(2, obj.radius);
+
+    ctx.beginPath();
+    ctx.arc(obj.x, obj.y, obj.radius, 0, 2 * Math.PI);
+    ctx.strokeStyle = obj.col;
+    ctx.stroke();
+    if (obj.deltaX > obj.radius) obj.deltaX -= Math.random() * 2;
+    if (obj.deltaY > obj.radius) obj.deltaY -= Math.random() * 2;
+    if ((obj.x + obj.radius) > config.size.width || (obj.x - obj.radius) < 0) {
+        obj.deltaX *= -1;
+    }
+    if ((obj.y + obj.radius) > config.size.height || (obj.y - obj.radius) < 0) {
+        obj.deltaY *= -1;
+    }
+    obj.age += 1;
+    if (obj.age < config.circleBs.maxAge) {
+        requestAnimationFrame(function(){
+            update(obj);
+        });
+        //setTimeout(function () {
+        //    update(obj);
+        //}, 10)
+    }
+}
+
+function reset() {
+    objects.forEach(function (obj) {
+        obj.age = config.circleBs.maxAge;
+    });
+    objects = [];
+    ctx.clearRect(0, 0, config.size.width, config.size.height);
+    createNewCircle();
+}
+
+function createNewCircle() {
+    var obj = {
+        x: Math.random() * config.size.width,
+        y: Math.random() * config.size.height,
+        radius: Math.random() * 20,
+        deltaX: 0,
+        deltaY: 0,
+        age: 0,
+        col: '#' + (~~(Math.random() * 255)).toString(16) + (~~(Math.random() * 255)).toString(16) + (~~(Math.random() * 255)).toString(16)
+    };
+    objects.push(obj);
+    requestAnimationFrame(function(){
+        update(obj);
+    });
+}
+docReady(function () {
+    canvas = document.getElementById('canvas')
+    canvas.width = config.size.width;
+    canvas.height = config.size.height;
+    ctx = canvas.getContext("2d");
+    reset();
+    setInterval(createNewCircle, 5000)
+});
--- a/circleBs/src/js/plugins.js
+++ b/circleBs/src/js/plugins.js
@@ -0,0 +1,24 @@
+// Avoid `console` errors in browsers that lack a console.
+(function() {
+    var method;
+    var noop = function () {};
+    var methods = [
+        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
+        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
+        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
+        'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
+    ];
+    var length = methods.length;
+    var console = (window.console = window.console || {});
+
+    while (length--) {
+        method = methods[length];
+
+        // Only stub undefined methods.
+        if (!console[method]) {
+            console[method] = noop;
+        }
+    }
+}());
+
+// Place any jQuery/helper plugins in here.