HTML5/Canvas贝塞尔弹簧特性模拟动画

Bezier Springs Motion Simulation，很不错的一个物理学模拟作品。

HTML5, spring

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2241
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

//  BASIC VARIABLES  //

var theta = 0;

// Canvas
var canvas = document.getElementById('canvas');

// 2d Drawing Context.
var ctx = canvas.getContext('2d');
var c_width = canvas.width;
var c_height = canvas.height;
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;

ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(255, 157, 0, 0.7)';
ctx.fillStyle = 'rgba(255, 157, 0, 0.7)';

// A variable to store the requestID.

var requestID;
var animation_is_running;

var p1x = centerX;
var p1y = 0;
var cp1x;
var cp1y;
var cp2x;
var cp3x;
var cp2y;
var p2x = centerX;
var p2y = canvas.height;

var mover_y = canvas.height;

var cntrlpx1 = centerX;
var cntrlpx2;
var mover_y;

var theta_incrmntr = Math.PI / 540;

var spring_val = 0.06; //  0.03 is original; larger = stiffer spring
var targetX;
var targetY;
var vy = 0;
var ax;
var ay;
var dx;
var dy;
var friction = 0.95;
var rest_count = 0;
var bez_y = centerY;
var sprung = false;
var isMouseDown = false;
var isTouchDown;
var handle_release_x;
var handle_release_y;

var t1x1;
var t1y1;
var initial_x = 187;
var initial_y = 100;

var t1x2;
var t1y2;

var t1C;
var t2B;
var t3C;
var cntrlpt_length = 150;
var t1dx;
var t1dy;
var t1ang_a;
var t2ang_a;
var t3ang_a;
var cntrlpt_x;
var cntrlpt_y;

var half_x;
var half_y;

var really_sprung;

cntrlpx1 = centerX;

var revolutions = 1;

//  END BASIC VARIABLES  //

//  LETS GET THIS PARTY STARTED

window.onload = function() {
    mouse = utils.captureMouse(canvas);
    touch = utils.captureTouch(canvas);

t1x1 = initial_x;
    t1y1 = initial_y;

handle_fixed = new Handle();
    handle_fixed.x = t1x1;
    handle_fixed.y = t1y1;

handle_pull = new Handle();
    targetX = handle_pull.x = t1x1;
    targetY = handle_pull.y = t1y1 + 200;

// the following taken & adapted from the book Foundation HTML5 Animation with Javascript, chapter 7 file 05-drag-and-move-2.html
    canvas.addEventListener('mousedown', function() {
        if (utils.containsPoint(handle_pull.getBounds(), mouse.x, mouse.y)) {
            isMouseDown = true;
            canvas.addEventListener('mouseup', onMouseUp, false);
            canvas.addEventListener('mousemove', move_handle_pull, false);
        }
    }, false);

canvas.addEventListener('touchmove', function(event) {
        event.preventDefault();
        isMouseDown = true;
        if (utils.containsPoint(handle_fixed.getBounds(), touch.x, touch.y)) {
            handle_fixed.x = touch.x;
            handle_fixed.y = touch.y;
        }
        if (utils.containsPoint(handle_pull.getBounds(), touch.x, touch.y)) {
            handle_pull.x = touch.x;
            handle_pull.y = touch.y;
        }
    }, false);

canvas.addEventListener('touchend', function(event) {
        event.preventDefault();
        isMouseDown = false;
        spring_val = document.getElementById('spring_amt').value;
        friction = document.getElementById('friction_amt').value;
        handle_release_x = handle_pull.x;
        handle_release_y = handle_pull.y;

if (sprung) {
            dx = targetX - handle_release_x;
            dy = targetY - handle_release_y;
            ax = dx * spring_val;
            ay = dy * spring_val;
            really_sprung = true;
        }
    }, false);

function onMouseUp() {
        isMouseDown = false;
        canvas.removeEventListener('mouseup', onMouseUp, false);
        canvas.removeEventListener('mousemove', move_handle_pull, false);
        canvas.removeEventListener('mousemove', move_handle_fixed, false);
        spring_val = document.getElementById('spring_amt').value;
        friction = document.getElementById('friction_amt').value;
        handle_release_x = handle_pull.x;
        handle_release_y = handle_pull.y;

if (sprung) {
            dx = targetX - handle_release_x;
            dy = targetY - handle_release_y;
            ax = dx * spring_val;
            ay = dy * spring_val;
            really_sprung = true;

}
    }

function move_handle_pull() {
        handle_pull.x = mouse.x;
        handle_pull.y = mouse.y;
    }

canvas.addEventListener('mousedown', function() {
        if (utils.containsPoint(handle_fixed.getBounds(), mouse.x, mouse.y)) {
            isMouseDown = true;
            canvas.addEventListener('mouseup', onMouseUp, false);
            canvas.addEventListener('mousemove', move_handle_fixed, false);
        }
    }, false);

function move_handle_fixed() {
        handle_fixed.x = mouse.x;
        handle_fixed.y = mouse.y;
    }

function checkBoundaries() {
            var left = 0,
                right = canvas.width,
                top = 0,
                bottom = canvas.height;
        }
        //  END taken from Foundation HTML5 Animation with Javascript, chapter 7

sprung = false;
    vy = 0;
    rest_count = 0;
    requestID = requestAnimationFrame(drawFrame);
    animation_is_running = true;
    //  END onload function	
};

cancelAnimationFrame(requestID);

function drawFrame() {

if (animation_is_running) {

window.requestAnimationFrame(drawFrame, canvas);

ctx.clearRect(0, 0, canvas.width, canvas.height);
        dx = targetX - t1x2;
        dy = targetY - t1y2;
        ax = dx * spring_val;
        ay = dy * spring_val;

if (sprung) {

if (!isMouseDown && really_sprung) {
                vx += ax;
                vy += ay;
                vx *= friction;
                vy *= friction;
                t1x2 += vx;
                t1y2 += vy;
                handle_pull.x = t1x2;
                handle_pull.y = t1y2;
            }

if (isMouseDown) {
                t1x2 = handle_pull.x;
                t1y2 = handle_pull.y;
            }

} else {
            vx = ax;
            vy = ay;
            t1x2 = handle_pull.x;
            t1y2 = handle_pull.y;
        }

t1x1 = handle_fixed.x;
        t1y1 = handle_fixed.y;

if (sprung) {
            handle_pull.draw(ctx);
            handle_pull.color = 'rgba(255, 0, 0, 0.49)';
        } else {
            handle_pull.draw(ctx);
            handle_pull.color = 'rgba(255, 0, 0, 0)';

}
        handle_fixed.draw(ctx);

for (i = 0; i < 200; i += 10) {
            t1C = Math.sqrt(Math.pow((t1x2 - t1x1), 2) + Math.pow((t1y2 - t1y1), 2));
            half_x = ((t1x2 - t1x1) / 2);
            half_y = ((t1y2 - t1y1) / 2);
            t2B = Math.sqrt(Math.pow(half_x, 2) + Math.pow(half_y, 2));
            t1ang_a = Math.atan2((t1x2 - t1x1), (t1y2 - t1y1));
            t2ang_a = Math.atan2(cntrlpt_length + i, t2B);
            t3ang_a = Math.PI / 2 - t1ang_a - t2ang_a;
            t3C = Math.sqrt(Math.pow(t2B, 2) + Math.pow(cntrlpt_length + i, 2));
            cntrlpt_x = Math.cos(t3ang_a) * t3C;
            cntrlpt_y = Math.sin(t3ang_a) * t3C;

ctx.beginPath();
            ctx.strokeStyle = 'rgba(255, 157, 0, 0.7)';
            ctx.moveTo(t1x1, t1y1);
            ctx.quadraticCurveTo(cntrlpt_x + t1x1, cntrlpt_y + t1y1, t1x2, t1y2); // adding t1x1 to cntrlpt_x, and t1y1 to cntrlpt_y was critical here; if t1z1 and t1y1 are greater than zero, then they became an 'offset' as it were, for all the drawing
            ctx.quadraticCurveTo(t1x2 - cntrlpt_x, t1y2 - cntrlpt_y, t1x1, t1y1);
            ctx.stroke();
        }

//   END OF DRAWFRAME FUNCTION
    }
};

document.getElementById('resetBtn').addEventListener('click', function(e) {
    e.preventDefault();
    init();
});

document.getElementById('springBtn').addEventListener('click', function(e) {
    e.preventDefault();

if (!sprung) {
        document.getElementById('springBtn').className = 'active';
        spring_val = document.getElementById('spring_amt').value;
        friction = document.getElementById('friction_amt').value;
        targetX = handle_pull.x;
        targetY = handle_pull.y;
        dx = targetX - handle_release_x;
        dy = targetY - handle_release_y;
        ax = dx * spring_val;
        ay = dy * spring_val;
        sprung = true;
    } else {
        document.getElementById('springBtn').className = '';
        sprung = false;
        really_sprung = false;
    }
});

function init() {
    // code below copied from this thread: http://stackoverflow.com/questions/4860431/reset-value-using-javascript
    // author is http://stackoverflow.com/users/447356/shadow-wizard
    var arrInputs = document.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oCurInput = arrInputs[i];
        //       if (oCurInput.type == "text")
        oCurInput.value = oCurInput.defaultValue;
    }
    // END code copied from this thread

document.getElementById('springBtn').className = '';

isMouseDown = false;
    sprung = false;
    really_sprung = false;
    t1x1 = initial_x;
    t1y1 = initial_y;

handle_fixed.x = t1x1;
    handle_fixed.y = t1y1;

targetX = handle_pull.x = t1x1;
    targetY = handle_pull.y = t1y1 + 200;

vx = 0;
    vy = 0;
    rest_count = 0;
}

// utilities
function Handle(radius, color) {
    if (radius === undefined) {
        radius = 15;
    }
    if (color === undefined) {
        color = "rgba(139, 139, 139, 0)";
    }
    this.x = 0;
    this.y = 0;
    this.radius = radius;
    this.vx = 0;
    this.vy = 0;
    this.rotation = 0;
    this.scaleX = 1;
    this.scaleY = 1;
    this.color = utils.parseColor(color);
    this.lineWidth = 1;
}

Handle.prototype.draw = function(context) {
    context.save();
    context.translate(this.x, this.y);
    context.rotate(this.rotation);
    context.scale(this.scaleX, this.scaleY);

context.lineWidth = this.lineWidth;
    context.fillStyle = this.color;
    context.beginPath();
    //x, y, radius, start_angle, end_angle, anti-clockwise
    context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
    context.closePath();
    context.fill();
    if (this.lineWidth > 0) {
        context.stroke();
    }
    context.restore();
};

Handle.prototype.getBounds = function() {
    return {
        x: this.x - this.radius,
        y: this.y - this.radius,
        width: this.radius * 2,
        height: this.radius * 2
    };
};

// the following utilites were taken from the book + site Foundation HTML5 Animation with Javascript by Billy Lamberta and Keith Peters

/**
 * Normalize the browser animation API across implementations. This requests
 * the browser to schedule a repaint of the window for the next animation frame.
 * Checks for cross-browser support, and, failing to find it, falls back to setTimeout.
 * @param {function}    callback  Function to call when it's time to update your animation for the next repaint.
 * @param {HTMLElement} element   Optional parameter specifying the element that visually bounds the entire animation.
 * @return {number} Animation frame request.
 */
if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        function(callback) {
            return window.setTimeout(callback, 17 /*~ 1000/60*/ );
        });
}

/**
 * Cancels an animation frame request.
 * Checks for cross-browser support, falls back to clearTimeout.
 * @param {number}  Animation frame request.
 */
if (!window.cancelRequestAnimationFrame) {
    window.cancelRequestAnimationFrame = (window.cancelAnimationFrame ||
        window.webkitCancelRequestAnimationFrame ||
        window.mozCancelRequestAnimationFrame ||
        window.msCancelRequestAnimationFrame ||
        window.oCancelRequestAnimationFrame ||
        window.clearTimeout);
}

/* Object that contains our utility functions.
 * Attached to the window object which acts as the global namespace.
 */
window.utils = {};

/**
 * Keeps track of the current mouse position, relative to an element.
 * @param {HTMLElement} element
 * @return {object} Contains properties: x, y, event
 */
window.utils.captureMouse = function(element) {
    var mouse = {
            x: 0,
            y: 0,
            event: null
        },
        body_scrollLeft = document.body.scrollLeft,
        element_scrollLeft = document.documentElement.scrollLeft,
        body_scrollTop = document.body.scrollTop,
        element_scrollTop = document.documentElement.scrollTop,
        offsetLeft = element.offsetLeft,
        offsetTop = element.offsetTop;

element.addEventListener('mousemove', function(event) {
        var x, y;

if (event.pageX || event.pageY) {
            x = event.pageX;
            y = event.pageY;
        } else {
            x = event.clientX + body_scrollLeft + element_scrollLeft;
            y = event.clientY + body_scrollTop + element_scrollTop;
        }
        x -= offsetLeft;
        y -= offsetTop;

mouse.x = x;
        mouse.y = y;
        mouse.event = event;
    }, false);

return mouse;
};

/**
 * Keeps track of the current (first) touch position, relative to an element.
 * @param {HTMLElement} element
 * @return {object} Contains properties: x, y, isPressed, event
 */
window.utils.captureTouch = function(element) {
    var touch = {
            x: null,
            y: null,
            isPressed: false,
            event: null
        },
        body_scrollLeft = document.body.scrollLeft,
        element_scrollLeft = document.documentElement.scrollLeft,
        body_scrollTop = document.body.scrollTop,
        element_scrollTop = document.documentElement.scrollTop,
        offsetLeft = element.offsetLeft,
        offsetTop = element.offsetTop;

element.addEventListener('touchstart', function(event) {
        touch.isPressed = true;
        touch.event = event;
    }, false);

element.addEventListener('touchend', function(event) {
        touch.isPressed = false;
        touch.x = null;
        touch.y = null;
        touch.event = event;
    }, false);

element.addEventListener('touchmove', function(event) {
        var x, y,
            touch_event = event.touches[0]; //first touch

if (touch_event.pageX || touch_event.pageY) {
            x = touch_event.pageX;
            y = touch_event.pageY;
        } else {
            x = touch_event.clientX + body_scrollLeft + element_scrollLeft;
            y = touch_event.clientY + body_scrollTop + element_scrollTop;
        }
        x -= offsetLeft;
        y -= offsetTop;

touch.x = x;
        touch.y = y;
        touch.event = event;
    }, false);

return touch;
};

/**
 * Returns a color in the format: '#RRGGBB', or as a hex number if specified.
 * @param {number|string} color
 * @param {boolean=}      toNumber=false  Return color as a hex number.
 * @return {string|number}
 */
window.utils.parseColor = function(color, toNumber) {
    if (toNumber === true) {
        if (typeof color === 'number') {
            return (color | 0); //chop off decimal
        }
        if (typeof color === 'string' && color[0] === '#') {
            color = color.slice(1);
        }
        return window.parseInt(color, 16);
    } else {
        if (typeof color === 'number') {
            color = '#' + ('00000' + (color | 0).toString(16)).substr(-6); //pad
        }
        return color;
    }
};

/**
 * Converts a color to the RGB string format: 'rgb(r,g,b)' or 'rgba(r,g,b,a)'
 * @param {number|string} color
 * @param {number}        alpha
 * @return {string}
 */
window.utils.colorToRGB = function(color, alpha) {
    //number in octal format or string prefixed with #
    if (typeof color === 'string' && color[0] === '#') {
        color = window.parseInt(color.slice(1), 16);
    }
    alpha = (alpha === undefined) ? 1 : alpha;
    //parse hex values
    var r = color >> 16 & 0xff,
        g = color >> 8 & 0xff,
        b = color & 0xff,
        a = (alpha < 0) ? 0 : ((alpha > 1) ? 1 : alpha);
    //only use 'rgba' if needed
    if (a === 1) {
        return "rgb(" + r + "," + g + "," + b + ")";
    } else {
        return "rgba(" + r + "," + g + "," + b + "," + a + ")";
    }
};

/**
 * Determine if a rectangle contains the coordinates (x,y) within it's boundaries.
 * @param {object}  rect  Object with properties: x, y, width, height.
 * @param {number}  x     Coordinate position x.
 * @param {number}  y     Coordinate position y.
 * @return {boolean}
 */
window.utils.containsPoint = function(rect, x, y) {
    return !(x < rect.x ||
        x > rect.x + rect.width ||
        y < rect.y ||
        y > rect.y + rect.height);
};

/**
 * Determine if two rectangles overlap.
 * @param {object}  rectA Object with properties: x, y, width, height.
 * @param {object}  rectB Object with properties: x, y, width, height.
 * @return {boolean}
 */
window.utils.intersects = function(rectA, rectB) {
    return !(rectA.x + rectA.width < rectB.x ||
        rectB.x + rectB.width < rectA.x ||
        rectA.y + rectA.height < rectB.y ||
        rectB.y + rectB.height < rectA.y);
};

编译

CSS

.row {
    float: right;
}
html {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 90%;
    background: #171717;
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
canvas {
    background: #000;
    z-index: -1;
    float: left;
}
.controls {
    float: left;
    margin: 15px 25px 0 5px;
}
button,
label,
input {
    box-sizing: border-box;
    padding: 0.4rem 0.8em;
    margin: 0 10px 10px;
    display: inline-block;
    font-size: 1.2rem;
    opacity: 0.3;
    background: rgba(0, 0, 0, 0);
    color: white;
    font-weight: bold;
}
button {
    border-radius: 3px;
    border: 2px solid;
    transition: 0.5s;
}
input {
    padding-left: 23px;
    max-width: 6.2rem;
}
label {
    margin-bottom: 0;
    padding-right: 0;
    margin-right: 0;
    letter-spacing: 1px;
}
button:hover {
    opacity: 0.75;
    background: rgba(245, 165, 106, 0.92);
    color: white;
    cursor: pointer;
}
button:active {
    opacity: 1;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}
.fadeaway {
    opacity: 0;
}
.active {
    opacity: 0.75;
    background: rgba(242, 65, 65, 0.92);
    color: white;
    cursor: pointer;
}
@media only screen and (min-width: 768px) {
    .row {
        float: none;
        display: inline-block;
    }
}
@media only screen and (min-width: 1024px) {
    input {
        padding-left: 23px;
        max-width: 7.0rem;
    }
}

HTML

Bezier Springs Motion Simulation，很不错的一个物理学模拟作品。

HTML5, spring

编辑器支持Emmet

快捷键

Bezier Springs Motion Simulation，很不错的一个物理学模拟作品。

HTML5, spring

使用HTML5/Canvas模拟的病毒传播扩散动画特效

HTML5/Canvas粒子吸引力和排斥力模拟动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：