使用JS构建动态滤镜特效实例 - 宇宙星云图

svg dynamic filters with js，可用来模拟星云图或者墨水浸染（墨渍、污渍）动画特效。鼠标点击可以聚合收缩粒子（模拟塌缩坍塌效应），松开则发散（爆炸效应）。

svg, filter, Nebula

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

//check if script is loaded.
console.log("initialized");

window.addEventListener("resize", function() {
    var canvas = document.getElementById("mainstage");
    canvas.width = document.getElementById("mainstage").clientWidth;
    canvas.height = document.getElementById("mainstage").clientHeight;
});

//create the starfield when the whole DOM is loaded and we are sure the elements are in place.
document.addEventListener("DOMContentLoaded", function() {
    createStarField();
});

//main look to update positions and render again.
    function main() {
        var now = Date.now();
        var delta = now - then;
        update();
        render();
        then = now;
        requestAnimationFrame(main);
    }

//update function to keep track of all the stars.
    function update() {
        if (mousePressed === true) {
            if (speedAmplifier < 50) {
                speedAmplifier = speedAmplifier + 0.1;
            }
        } else {
            if (speedAmplifier > 1.1) {
                speedAmplifier = speedAmplifier - 0.1;
            }
        }
        for (k = 0; k < starArray.length; k++) {
            if (mousePressed === true) {
                if (
                    //check the distance between the mouse and the star
                    mouseX >= starArray[k].x - 500 &&
                    mouseX <= starArray[k].x + 500 &&
                    mouseY >= starArray[k].y - 500 &&
                    mouseY <= starArray[k].y + 500
                ) {
                    starArray[k].angle = Math.atan2(mouseY - starArray[k].y, mouseX - starArray[k].x) * 180 / Math.PI - 90;
                }
            } else {
                if (
                    //if the stars are close to the edge, change their direction.
                    starArray[k].y < -1 ||
                    starArray[k].y > canvas.height + 1 ||
                    starArray[k].x < -1 ||
                    starArray[k].x > canvas.width + 1
                ) {
                    var remainder = starArray[k].angle % 90;
                    starArray[k].angle = starArray[k].angle + 90 + remainder;
                    starArray[k].startAngle = starArray[k].angle;
                } else {
                    starArray[k].angle = starArray[k].startAngle;
                }
                //else, calculate their forwards trajectory with the current angle.
            }
            calculateStarMovement(starArray[k]);
        }
    }

//render function to draw the canvas when frame is updated.
    function render() {
        var distance = 150;
        //clear the canvas.
        context.clearRect(0, 0, canvas.width, canvas.height);
        if (mouseEngaged === true) {
            drawMousePosition(mouseX, mouseY, context);
            for (n = 0; n < starArray.length; n++) {
                if (
                    //check the distance between the mouse and the star
                    mouseX >= starArray[n].x - distance &&
                    mouseX <= starArray[n].x + distance &&
                    mouseY >= starArray[n].y - distance &&
                    mouseY <= starArray[n].y + distance
                ) {
                    //if they are within the range set, calculate their distance and draw line with color and opacity matching distance and color difference between them.
                    var a = mouseX - starArray[n].x;
                    var b = mouseY - starArray[n].y;
                    //calculate the opacity based on distance.
                    var opacity = 1 - 1 / distance * Math.sqrt(a * a + b * b);
                    var red = Math.round((255 + starArray[n].color.red) / 2);
                    var green = Math.round((255 + starArray[n].color.green) / 2);
                    var blue = Math.round((255 + starArray[n].color.blue) / 2);
                    // set color of the line based on the middle value of red, green and blue from the two points.
                    context.strokeStyle = "rgba(" + red + "," + green + "," + blue + "," + opacity + ")";
                    context.beginPath();
                    context.moveTo(mouseX, mouseY);
                    context.lineTo(starArray[n].x, starArray[n].y);
                    context.stroke();
                    context.rect(20, 20, 50, 50);
                }
            }
        }
        //Run through the stars
        for (i = 0; i < starArray.length; i++) {
            //draw the stars individual points
            drawSingleStar(starArray[i], context);
        }
        //double for loop to check each star against all the others.
        for (k = 0; k < starArray.length; k++) {
            for (u = 0; u < starArray.length; u++) {
                if (
                    //check the distance between the two points
                    starArray[k].x >= starArray[u].x - distance &&
                    starArray[k].x <= starArray[u].x + distance &&
                    starArray[k].y >= starArray[u].y - distance &&
                    starArray[k].y <= starArray[u].y + distance &&
                    // and make sure it's not the same star
                    u != k
                ) {
                    //if they are within the range set, calculate their distance and draw line with color and opacity matching distance and color difference between them.
                    var a = starArray[k].x - starArray[u].x;
                    var b = starArray[k].y - starArray[u].y;
                    //calculate the opacity based on distance.
                    var opacity = 1 - 1 / distance * Math.sqrt(a * a + b * b);
                    var red = Math.round((starArray[k].color.red + starArray[u].color.red) / 2);
                    var green = Math.round((starArray[k].color.green + starArray[u].color.green) / 2);
                    var blue = Math.round((starArray[k].color.blue + starArray[u].color.blue) / 2);
                    // set color of the line based on the middle value of red, green and blue from the two points.
                    context.strokeStyle = "rgba(" + red + "," + green + "," + blue + "," + opacity + ")";
                    context.beginPath();
                    context.lineWidth = 3;
                    context.moveTo(starArray[k].x, starArray[k].y);
                    context.lineTo(starArray[u].x, starArray[u].y);
                    context.stroke();
                }
            }
        }
    }

//calculate the movement forward based on angle and speed.
    function calculateStarMovement(target) {
        //if mouse is pressed.
        if (mousePressed === true) {
            if (
                mouseX >= target.x - 500 &&
                mouseX <= target.x + 500 &&
                mouseY >= target.y - 500 &&
                mouseY <= target.y + 500
            ) {
                target.x -= target.speed * speedAmplifier * Math.sin(target.angle * (Math.PI / 180));
                target.y += target.speed * speedAmplifier * Math.cos(target.angle * (Math.PI / 180));
            } else {
                target.x -= target.speed * Math.sin(target.angle * (Math.PI / 180));
                target.y += target.speed * Math.cos(target.angle * (Math.PI / 180));
            }
            //if the mouse is not pressed
        } else {
            if (
                mouseX >= target.x - 500 &&
                mouseX <= target.x + 500 &&
                mouseY >= target.y - 500 &&
                mouseY <= target.y + 500
            ) {
                target.x -= target.speed * speedAmplifier * Math.sin(target.angle * (Math.PI / 180));
                target.y += target.speed * speedAmplifier * Math.cos(target.angle * (Math.PI / 180));
            } else {
                target.x -= target.speed * Math.sin(target.angle * (Math.PI / 180));
                target.y += target.speed * Math.cos(target.angle * (Math.PI / 180));
            }
        }
    }

//draw the mouse position as a star on the canvas.
    function drawMousePosition(mouseX, mouseY, context) {
        context.fillStyle = "rgba(" + 255 + "," + 255 + "," + 255 + "," + 0.2 + ")";
        context.beginPath();
        context.arc(mouseX, mouseY, 5, 0, 2 * Math.PI);
        context.closePath();
        context.fill();
    }

//draw a single star.
    function drawSingleStar(star, context) {
        context.fillStyle = "rgba(" + star.color.red + "," + star.color.green + "," + star.color.blue + "," + 0.2 + ")";
        context.beginPath();
        context.arc(star.x, star.y, 5, 0, 2 * Math.PI);
        context.closePath();
        context.fill();
    }

编译

CSS

HTML

svg dynamic filters with js，可用来模拟星云图或者墨水浸染（墨渍、污渍）动画特效。鼠标点击可以聚合收缩粒子（模拟塌缩坍塌效应），松开则发散（爆炸效应）。

svg, filter, Nebula

编辑器支持Emmet

快捷键

svg dynamic filters with js，可用来模拟星云图或者墨水浸染（墨渍、污渍）动画特效。鼠标点击可以聚合收缩粒子（模拟塌缩坍塌效应），松开则发散（爆炸效应）。

svg, filter, Nebula

使用HTML5 Canvas实现仿PS图像油画滤镜特效

使用SVG feImage和feDisplacementMap滤镜属性实现的图片特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：