CREATING ANIMATION "MOVE ALONG CURVE"

<!DOCtype html>
<html>
  <style>
   * {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  overflow: hidden;
}
  </style>
<body>
<script>  
   "use strict";
function getFullScreenParams(ctx) {
    const { width, height } = ctx.canvas;
    return [0, 0, width, height];
}
function getCtxUtils(ctx) {
    function clear() {
        const params = getFullScreenParams(ctx);
        ctx.clearRect(...params);
    }
    function save(callback) {
        ctx.save();
        callback();
        ctx.restore();
    }
    function drawPath(callback) {
        ctx.beginPath();
        callback();
        ctx.closePath();
    }
    return {
        clear,
        save,
        drawPath
    };
}
function initCanvas(resizeCallback, parent = document.body) {
    function create() {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        return [canvas, ctx];
    }
    function resize() {
        const { clientHeight, clientWidth } = parent;
        canvas.height = clientHeight;
        canvas.width = clientWidth;
        resizeCallback();
    }
    function append() {
        parent.innerHTML = '';
        parent.appendChild(canvas);
    }
    const [canvas, ctx] = create();
    resize();
    append();
    window.addEventListener('resize', resize);
    return ctx;
}
class Curve {
    constructor(origin, angle, length = 400) {
        this.angle = angle;
        this.length = length;
        this._angleOffset = 40;
        this.percentage = 0;
        this.speed = (Math.random() * 0.005) + 0.0005;
        this.randColor = () => {
            const { floor, random } = Math;
            return ['cyan', 'magenta', 'yellow'][floor(random() * 3)];
        };
        this.getEndPoint = () => {
            const { cos, sin } = Math;
            const x = cos(this.angle) * this.length;
            const y = sin(this.angle) * this.length;
            return [x, y];
        };
        this.getStartControlPoint = () => {
            const { cos, sin } = Math;
            const angle = this.angle - (this._angleOffset / 60);
            const length = this.length / 3;
            const x = cos(angle) * length;
            const y = sin(angle) * length;
            return [x, y];
        };
        this.getEndControlPoint = () => {
            const { cos, sin } = Math;
            const angle = this.angle + (this._angleOffset / 60);
            const length = (this.length / 3) * 2;
            const x = cos(angle) * length;
            const y = sin(angle) * length;
            return [x, y];
        };
        this.animate = () => {
            function getXY() {
                const x = cubicN(percentage, 0, startControlPoint[0], endControlPoint[0], end[0]);
                const y = cubicN(percentage, 0, startControlPoint[1], endControlPoint[1], end[1]);
                return [x, y];
            }
            // cubic helper formula
            function cubicN(T, a, b, c, d) {
                const t2 = T * T;
                const t3 = t2 * T;
                return a + (-a * 3 + T * (3 * a - a * T)) * T + (3 * b + T * (-6 * b + b * 3 * T)) * T + (c * 3 - c * 3 * T) * t2 + d * t3;
            }
            const { startControlPoint, endControlPoint, end, percentage } = this;
            if (!this.isComplete) {
                this.percentage += this.speed;
                this.currentPoint = getXY();
            }
        };
        this.start = origin;
        this.currentPoint = [0, 0];
        this.end = this.getEndPoint();
        this.startControlPoint = this.getStartControlPoint();
        this.endControlPoint = this.getEndControlPoint();
        this.color = this.randColor();
    }
    get isComplete() {
        return this.percentage >= 1;
    }
}
class Burst {
    constructor(x, y) {
        this.curves = [];
        this.render = (ctx) => {
            function renderCurve(curve) {
                const { currentPoint, endControlPoint, startControlPoint, end } = curve;
                save(() => {
                    drawPath(() => {
                        ctx.moveTo(0, 0);
                        ctx.strokeStyle = 'rgba(80,80,80,0.4)';
                        ctx.bezierCurveTo(...startControlPoint, ...endControlPoint, ...end);
                        ctx.stroke();
                    });
                });
                save(() => {
                    ctx.translate(x, y);
                    drawPath(() => {
                        let [xi, yi] = currentPoint;
                        xi -= x;
                        yi -= y;
                        ctx.fillStyle = curve.color;
                        ctx.moveTo(0, 0);
                        ctx.arc(xi, yi, 4, 0, Math.PI * 2);
                        ctx.fill();
                    });
                });
            }
            function renderCurves() {
                save(() => {
                    ctx.translate(x, y);
                    curves.forEach(renderCurve);
                });
            }
            function renderBackground() {
                save(() => {
                    ctx.translate(0, 0);
                    ctx.fillStyle = '#101219';
                    drawPath(() => ctx.fillRect(...getFullScreenParams(ctx)));
                });
            }
            const { clear, save, drawPath } = getCtxUtils(ctx);
            const { curves, x, y } = this;
            clear();
            renderBackground();
            renderCurves();
        };
        this._x = x;
        this._y = y;
        this.create();
    }
    get x() { return this._x; }
    set x(value) {
        this._x = value;
        if (this.onPositionChange)
            this.onPositionChange();
    }
    get y() { return this._y; }
    set y(value) {
        this._y = value;
        if (this.onPositionChange)
            this.onPositionChange();
    }
    create() {
        const chunkSize = 6 / 32;
        for (let i = 0; i <= 6; i += chunkSize) {
            this.curves.push(new Curve([this.x, this.y], i, 1300));
        }
    }
}
window.onload = init;
function init() {
    function animate() {
        burst.curves.forEach((curve, i) => {
            if (curve.isComplete) {
                const chunkSize = 6 / 32;
                const newCurve = new Curve([burst.x, burst.y], i * chunkSize, 1300);
                burst.curves.splice(i, 1, newCurve);
            }
            else {
                curve.animate();
            }
        });
        burst.render(ctx);
        requestAnimationFrame(animate);
    }
    let [cx, cy] = [window.innerWidth / 2, window.innerHeight / 2];
    const burst = new Burst(cx, cy);
    const ctx = initCanvas(() => {
        [cx, cy] = [window.innerWidth / 2, window.innerHeight / 2];
        burst.x = cx;
        burst.y = cy;
    });
    burst.render(ctx);
    requestAnimationFrame(animate);
}

  </script>

<h1>
   <span>MADE BY DEVANSH MISHRA</span>
       </h1>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Chandrayan 3 Mission Special :Animation

<!--   Creator : Devansh Mishra          --> <!doctype html> <html>    <head>      <style> .full {     animation: full 2s linear 40s 1;     animation-fill-mode: forwards; } @keyframes full {     100% {         opacity: 0     } } h2 {     font-size: 30px;     color: mediumseagreen;     font-family: tahoma;     opacity: 0;     animation: ro 2s linear 50s 1;     animation-fill-mode: forwards;     text-align: center;     z-index: 10; } .rover {     width: 400px;     height: 480px;     position: absolute;     background-image: linear-gradient(to top, #eee2e2 0, #e3c09d 15%, #2f2f3a 90%);     margin: auto;     top: -500px;     left: 0;     bottom: 0;     right: 0;     ...
Read more

Python Advance Programs by Devansh Mishra.

HERE ARE SOME ADVANCE PYTHON PROGRAMS MOST USEFUL FOR PYTHON BEGINNER'S-- 1. Displaying Number Pyramid rows = int(input('Enter the number of rows')) for i in range(rows):     for j in range(i):         print(i, end=' ')     print('')       2.Prgram to find numbers which are divisible by 7 and multiple of 5 in the range 1500 & 2700          nl=[] for x in range(1500, 2701):     if (x%7==0) and (x%5==0):         nl.append(str(x)) print (','.join(nl))       3. Bubble Sort using Python import sys def bubble_sort(arr):      n = len(arr)     for i in range(n):         for j in range(0, n-i-1):             if arr[j] > arr[j+1]:                 temp = arr[j]                 arr[j] = arr[j+1]       ...
Read more

Some Basic HTML Codes for Beginners

1. WEEK INPUT  label for="week">Select a week:</label>   <input type="week" id="week" name="week">   <input type="submit" value="Submit"> 2. TIME INPUT  <label for="appt">Select a time:</label>   <input type="time" id="appt" name="appt">   <input type="submit" value="Submit"> 3. RANGE  <label for="vol">Range (0 to 50):</label>   <input type="range" id="vol" name="vol" min="0" max="50">   <input type="submit" value="Submit"> 4. DATE INPUT <label for="birthday">Birthday:</label>   <input type="date" id="birthday" name="birthday">   <input type="submit" value="Submit"> </form> 5. RADIO BUTTON <p>Select Gender</p> <input t...
Read more