pixi绘制引力线条动画效果

代码语言:html

所属分类:粒子

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>  Clifford Attractor Over Time [PixiJS]</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            overflow: hidden;
        }
    </style>

</head>
<body translate="no">

    <script src='http://repo.bfw.wiki/bfwrepo/js/pixi.min.js'></script>
    <script>
        let a = 1.2,
        b = 1.7,
        c = 0.5,
        d = 0.5;

        const n = 20000,
        range = 0.2,
        max_iters = 800,
        speed = 1,
        width = window.innerWidth,
        height = window.innerHeight;

        let stage,
        renderer,
        frameCount = 0,
        points = [];

        function setup() {
            // Create a Pixi Application
            stage = new PIXI.Container();
            renderer = new PIXI.WebGLRenderer({
                width: width,
                height: height,
                clearBeforeRender: false,
                preserveDrawingBuffer: true,
                transparent: false
            });


            document.body.appendChild(renderer.view);

            for (let _ = 0; _ < n; _++) {
                let graphic = new PIXI.Graphics();
                let point = randomPoint();

                graphic.x = camera("x", point.x);
                graphic.y = camera("y", point.y);

                graphic.beginFill(0xffffff, 0.01);
                graphic.drawRect(0, 0, 1, 1);
                graphic.endFill();

          .........完整代码请登录后点击上方下载按钮下载查看

网友评论0