吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

搜索
查看: 406|回复: 3

[原创源码] [HTA][算法实战008]多段贝塞尔曲线变换特效

[复制链接]
老刘 发表于 2020-6-30 11:19
本帖最后由 老刘 于 2020-6-30 12:56 编辑

多段贝塞尔曲线变换效果.gif

创意来自于vicyang兄,论坛不让放链接就不放了。
Windows系统建议保存为hta,其它系统可以保存为html。
[HTML] 纯文本查看 复制代码
<!doctype html>
<html lang="zh_CN" id="main">
    <head>
        <title>多段贝塞尔曲线变换(创意:Vicyang;HTML实现:老刘)</title>
        <HTA:APPLICATION
            APPLICATIONNAME="Bezier Curve Variation"
            ID="BezierCurveVariation"
            VERSION="1.0"
            INNERBORDER="no"/>
        <style>
            html, body {
                /*不要边框*/
                margin: 0;
                border: 0;
                padding: 0;
                
                /*不要滚动条*/
                overflow-y: hidden;
                overflow-x: hidden;

                /*自动换行*/
                word-wrap: break-word;
                word-break: break-all;
            }
            
            p {
                margin: 0px;
            }
            
            #TextArea {
                background-color: #222222;
                color: white;
                
                font-family: 'Microsoft YaHei';
                letter-spacing: 0px;
                /*font-size: 12px;
                line-height: 12px;*/
                color: chartreuse;
                
                height: 100%;
                position: relative;
                margin: 0 auto;
                border: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div id="TextArea"></div>
        <script language="JavaScript">
            //设置区。
            var lngFontSize = 12;   //字体大小
            var lngBufferWidth = 80;    //缓冲区列数
            var lngBufferHeight = 60;   //缓冲区行数
            var lngPointNumber = 8; //绘制点数
            var numMoveSpeed = 0.03;    //移动紧密度
            var lngLayer = 15;   //轨迹保留层数
            var lngSleep = 30;  //绘制延时

            function Point(x, y) {
                this.x = x;
                this.y = y;
            }

            window.onload = function () {
                //调整窗口布局。
                window.resizeTo(lngBufferWidth * lngFontSize, lngBufferHeight * lngFontSize);
                window.resizeTo(
                    2 * lngBufferWidth * lngFontSize - document.documentElement.clientWidth,
                    2 * lngBufferHeight * lngFontSize - document.documentElement.offsetHeight
                );
                document.getElementById('main').style.width = (lngBufferWidth * lngFontSize).toString() + 'px';
                document.getElementById('main').style.height = (lngBufferHeight * lngFontSize).toString() + 'px';
                document.body.style.width = (lngBufferWidth * lngFontSize).toString() + 'px';
                document.body.style.height = (lngBufferHeight * lngFontSize).toString() + 'px';
                document.getElementById('TextArea').style.fontSize = lngFontSize.toString() + 'px';
                document.getElementById('TextArea').style.lineHeight = lngFontSize.toString() + 'px';
                

                //创建缓冲区数组。
                //arrBuffer[缓冲区索引][该缓冲区横坐标][该缓冲区纵坐标]
                var arrBuffer = new Array();
                for (var y = 0; y < lngBufferHeight; y++) {
                    arrBuffer[y] = new Array();
                    for (var x = 0; x < lngBufferWidth; x++) {
                        arrBuffer[y][x] = ' ';   //全角空格
                    }
                }

                //创建控制点数组。
                //主控制点绘制主轨迹,从控制点控制主控制点按从轨迹移动。
                //主从轨迹均为三阶贝塞尔曲线。
                //arrPoints[0-3主轨迹控制点索引][0-3该控制点对应的从轨迹的从控制点,4该控制点]
                var arrPoints = new Array();
                for (var i = 0; i <= 3; i++) {
                    arrPoints[i] = new Array();
                }
                

                //准备绘制。
                //初始化随机控制点。
                for (var i = 0; i <= 3; i++) {
                    arrPoints[i][2] = NewControlPoint();
                    arrPoints[i][3] = NewControlPoint();
                }
                var numServantT = 20011228 //4个从轨迹统一的参数t,超过1时会求新随机点并置0。
                var lngUsingBufferIndex = 0;
                //创建老点队列并填充。
                var queueOldPoints = new Array()
                for (var i = 0; i <= lngLayer * lngPointNumber; i++) {
                    queueOldPoints.push(new Point(-1, -1)); //填充无效点。
                }


                //循环绘制。
                setInterval(function () {
                    //若主控制点移动完成,则生成新路径。
                    if (numServantT > 1) {
                        numServantT = 0;
                        for (var i = 0; i <= 3; i++) {
                            //设置新的从轨迹接上旧的。
                            //即将旧轨迹终点作为新轨迹起点。
                            arrPoints[i][0] = arrPoints[i][3];
                            //此处让新的控制点2作为旧控制点3关于旧控制点4/新控制点1的对称点,增加曲线平滑度。
                            arrPoints[i][1] = new Point(
                                2 * arrPoints[i][3].x - arrPoints[i][2].x,
                                2 * arrPoints[i][3].y - arrPoints[i][2].y
                            );
                            //其它从控制点随机获得。
                            for (var j = 2; j <= 3; j++) {
                                arrPoints[i][j] = NewControlPoint();
                            }
                        }
                    } else {
                        numServantT += numMoveSpeed;
                    }
                    //算一下主控制点。
                    for (var i = 0; i <= 3; i++) {
                        arrPoints[i][4] = ThirdOrderBezierCurve(
                            numServantT,
                            arrPoints[i][0],
                            arrPoints[i][1],
                            arrPoints[i][2],
                            arrPoints[i][3]
                        );
                    }
                    //绘制缓冲区。
                    //从缓冲区擦除老点。
                    for (var t = 0; t <= 1; t += 1 / (lngPointNumber - 1)) {
                        var OldPoint = queueOldPoints.shift();
                        if (OldPoint.x >= 0 && OldPoint.x < lngBufferWidth && OldPoint.y >= 0 && OldPoint.y < lngBufferHeight) {
                            DrawPoint(arrBuffer, OldPoint, " ");
                        }
                    }
                    //绘制新点到缓冲区。
                    for (var t = 0; t <= 1; t += 1 / (lngPointNumber - 1)) {
                        var NewPoint = ThirdOrderBezierCurve(
                            t,
                            arrPoints[0][4],
                            arrPoints[1][4],
                            arrPoints[2][4],
                            arrPoints[3][4]
                        );
                        //绘制新点并入队。
                        if (NewPoint.x >= 0 && NewPoint.x < lngBufferWidth && NewPoint.y >= 0 && NewPoint.y < lngBufferHeight) {
                            DrawPoint(arrBuffer, NewPoint, "ABCDEFGHIJKLMNOPQRSTUVWXYZ".charAt(RandomInteger(0,26)));
                        }
                        queueOldPoints.push(NewPoint);
                    }

                    //绘制结果。
                    var strBuffer = '';
                    for (var i = 0; i < lngBufferHeight; i++) {
                        strBuffer += arrBuffer[i].join('') + '<br>';
                    }
                    document.getElementById('TextArea').innerHTML = strBuffer;
                }, lngSleep);
            }

            function ThirdOrderBezierCurve(t, p0, p1, p2, p3) {
                //三阶贝塞尔曲线计算函数。
                return new Point(
                    p0.x * (1 - t) * (1 - t) * (1 - t) + 3 * p1.x * t * (1 - t) * (1 - t) + 3 * p2.x * t * t * (1 - t) + p3.x * t * t * t,
                    p0.y * (1 - t) * (1 - t) * (1 - t) + 3 * p1.y * t * (1 - t) * (1 - t) + 3 * p2.y * t * t * (1 - t) + p3.y * t * t * t
                );
            }

            function DrawPoint(arrBuffer, objPoint, charText) {
                //在arrBuffer中画点。(其实就是修改数组)
                //alert(objPoint.y + ' ' + objPoint.x);
                arrBuffer[Math.floor(objPoint.y)][Math.floor(objPoint.x)] = charText;
                return;
            }

            function ArrayDeepCopy(obj) {
                //数组深拷贝函数(支持多维数组)。
                var out = [], i = 0, len = obj.length;
                for (; i < len; i++) {
                    if (obj[i] instanceof Array) {
                        out[i] = ArrayDeepCopy(obj[i]);
                    }
                    else out[i] = obj[i];
                }
                return out;
            }

            function NewControlPoint() {
                //获得新随机控制点。
                return NewRandomPoint(0,lngBufferWidth,0,lngBufferHeight);
                //24game的建议:将控制点范围限定在与缓冲区同心、宽高均为缓冲区宽高2/3的矩形内。
                //这样可以避免主轨迹溢出屏幕。
                //但由于对称,无法很好的限制,所以不采纳。
                //return NewRandomPoint(
                //    Math.floor(lngBufferWidth / 6),
                //    Math.floor(lngBufferWidth * 5 / 6),
                //    Math.floor(lngBufferHeight / 6), 
                //    Math.floor(lngBufferHeight * 5 / 6)
                //);
            }

            function NewRandomPoint(lngRangeXStart, lngRangeXEnd, lngRangeYStart, lngRangeYEnd) {
                //获得新随机点。
                return new Point(
                    RandomInteger(lngRangeXStart, lngRangeXEnd),
                    RandomInteger(lngRangeYStart, lngRangeYEnd)
                );
            }

            function RandomInteger(lngStart, lngEnd) {
                //获得以lngStart为下界(含lngStart),lngEnd为上界(不含lngEnd)的随机整数。
                return lngStart + Math.floor(Math.random() * (lngEnd - lngStart));
            }

        </script>
    </body>
</html>

免费评分

参与人数 3吾爱币 +8 热心值 +3 收起 理由
吊儿郎当 + 1 + 1 用心讨论,共获提升!
苏紫方璇 + 7 + 1 感谢发布原创作品,吾爱破解论坛因你更精彩!
lz132 + 1 鼓励转贴优秀软件安全工具和文档!

查看全部评分

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

jb937158168 发表于 2020-6-30 11:30
奈何没有文化 只能说一句nb
imcuer 发表于 2020-6-30 11:41
lz132 发表于 2020-6-30 12:04
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则 警告:本版块禁止灌水或回复与主题无关内容,违者重罚!

快速回复 收藏帖子 返回列表 搜索

RSS订阅|小黑屋|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2020-7-8 16:16

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表