CANVAS 在一个立方体中捕捉到的星星像萤火虫似的效果

Stars Captured in a Cube Like Fireflies

CANVAS

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var _class, _temp, _initialiseProps;

function _possibleConstructorReturn(self, call) {
    if (!self) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var STAR_COLORS = ['#FFF'];

var BACKDROP_STAR_COUNT = 1000;
var BACKDROP_STAR_MAX_SPEED = 0.25;
var BACKDROP_STAR_MAX_RADIUS = 0.5;

var CUBE_SIDE_STAR_COUNT = 200;
var CUBE_SIDE_STAR_MAX_SPEED = 1;
var CUBE_SIDE_STAR_MAX_RADIUS = 1;

var StarScene = (_temp = _class = function StarScene(canvas, numStars, maxParticleSpeed, maxParticleRadius) {
    _classCallCheck(this, StarScene);

_initialiseProps.call(this);

this.context = canvas.getContext('2d');
    this.maxParticleSpeed = maxParticleSpeed;
    this.maxParticleRadius = maxParticleRadius;
    this.stars = this._generateStars(numStars);
}, _initialiseProps = function _initialiseProps() {
    var _this = this;

this._generateStars = function(numStars) {
        var stars = [];
        for (var i = 0; i < numStars; i++) {
            stars.push({
                x: Math.random() * _this.context.canvas.width,
                y: Math.random() * _this.context.canvas.height,
                vx: Math.random() * _this.maxParticleSpeed * 2 - _this.maxParticleSpeed,
                vy: Math.random() * _this.maxParticleSpeed * 2 - _this.maxParticleSpeed,
                color: STAR_COLORS[Math.floor(Math.random() * STAR_COLORS.length)]
            });
        }
        return stars;
    };

this.clear = function() {
        _this.context.clearRect(0, 0, _this.context.canvas.width, _this.context.canvas.height);
    };

this.draw = function() {
        _this.stars.forEach(function(star) {
            _this.context.fillStyle = star.color;
            _this.context.beginPath();
            _this.context.arc(star.x, star.y, Math.random() * _this.maxParticleRadius, 0, Math.PI * 2);
            _this.context.fill();
        });
    };

this.update = function() {
        _this.stars.forEach(function(star) {
            star.x += star.vx;
            star.y += star.vy;
            if (star.x < 0 || star.x > _this.context.canvas.width) {
                star.vx *= -1;
            }
            if (star.y < 0 || star.y > _this.context.canvas.height) {
                star.vy *= -1;
            }
        });
    };

this.tick = function() {
        _this.clear();
        _this.draw();
        _this.update();
    };
}, _temp);

var BackdropScene = function(_StarScene) {
    _inherits(BackdropScene, _StarScene);

function BackdropScene() {
        var _temp2, _this2, _ret;

_classCallCheck(this, BackdropScene);

for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
            args[_key] = arguments[_key];
        }

return _ret = (_temp2 = (_this2 = _possibleConstructorReturn(this, _StarScene.call.apply(_StarScene, [this].concat(args))), _this2), _this2.update = function() {
            _this2.stars.forEach(function(star) {
                star.x += Math.abs(star.vx);
                if (star.x > _this2.context.canvas.width) {
                    star.x = 0;
                }
            });
        }, _temp2), _possibleConstructorReturn(_this2, _ret);
    }

return BackdropScene;
}(StarScene);

var backdrop = document.getElementById('backdrop');
backdrop.width = document.body.clientWidth;
backdrop.height = document.body.clientHeight;
var backdropScene = new BackdropScene(backdrop, BACKDROP_STAR_COUNT, BACKDROP_STAR_MAX_SPEED, BACKDROP_STAR_MAX_RADIUS);

var sides = [document.getElementById('front'), document.getElementById('back'), document.getElementById('top'), document.getElementById('bottom'), document.getElementById('left'), document.getElementById('right')].map(function(canvas) {
    return new StarScene(canvas, CUBE_SIDE_STAR_COUNT, CUBE_SIDE_STAR_MAX_SPEED, CUBE_SIDE_STAR_MAX_RADIUS);
});

var loop = function loop() {
    backdropScene.tick();
    sides.forEach(function(side) {
        side.tick();
    });
    requestAnimationFrame(loop);
};

loop();

编译

CSS

@import "https://fonts.googleapis.com/css?family=Audiowide";
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    -webkit-perspective: 500px;
    perspective: 500px;
    background: black;
    overflow: hidden;
}
a {
    position: absolute;
    z-index: 1;
    width: 48px;
    height: 48px;
    left: 25px;
    top: 25px;
    -webkit-animation: 5s pop infinite;
    animation: 5s pop infinite;
}
a img {
    width: 100%;
    height: 100%;
}
@-webkit-keyframes pop {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    10% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
    20% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes pop {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    10% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
    20% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
#title {
    position: absolute;
    color: white;
    font-size: 144px;
    font-family: "Audiowide", sans-serif;
    z-index: 2;
    bottom: -50px;
    text-shadow: 0px 10px #999;
}
#backdrop {
    position: absolute;
    z-index: -1;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}
#cube {
    position: relative;
    width: 250px;
    height: 250px;
    -webkit-animation: 60s spin infinite linear;
    animation: 60s spin infinite linear;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#cube .side {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 25px solid white;
}
#cube #front {
    -webkit-transform: translateZ(125px);
    transform: translateZ(125px);
    background: rgba(0, 0, 0, 0.5);
}
#cube #back {
    -webkit-transform: translateZ(-125px);
    transform: translateZ(-125px);
    background: rgba(0, 0, 0, 0.5);
}
#cube #top {
    -webkit-transform: translateY(-125px) rotateX(-90deg);
    transform: translateY(-125px) rotateX(-90deg);
    background: rgba(0, 0, 0, 0.5);
}
#cube #bottom {
    -webkit-transform: translateY(125px) rotateX(90deg);
    transform: translateY(125px) rotateX(90deg);
    background: rgba(0, 0, 0, 0.5);
}
#cube #left {
    -webkit-transform: translateX(-125px) rotateY(-90deg);
    transform: translateX(-125px) rotateY(-90deg);
    background: rgba(0, 0, 0, 0.5);
}
#cube #right {
    -webkit-transform: translateX(125px) rotateY(90deg);
    transform: translateX(125px) rotateY(90deg);
    background: rgba(0, 0, 0, 0.5);
}

HTML

Stars Captured in a Cube Like Fireflies

CANVAS

编辑器支持Emmet

快捷键

Stars Captured in a Cube Like Fireflies

CANVAS

CANVAS 火箭与物体之间的碰撞效果

CANVAS 来自3个点的立方体

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：