SongZihuan
/
CoTan
réplica de https://github.com/SongZihuan/CoTan.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
							<!DOCTYPE html>
<html lang="zh">
    <head>
        <link rel="stylesheet" type="text/css" href="hello.css">
        <meta charset="UTF-8">
        <title>Hello</title>
    </head>
    <body>
        <script>
            let host = 'http://127.0.0.1:5000/'
        </script>
        <canvas id="canvas" class="bg_canvas"></canvas>
        <div class="screen">
            <div id='cotanTitle' class="cotan_title">
            </div>
            <div id="method" class="mode">
                <h1 class="mode">CoTan<br>科学计算系统</h1>
                <h2 class="mode">CoTan工具</h2>
                <script>
                    function start(mode_url){
                        current_circle.add();
                        let xhr = new XMLHttpRequest();
                        xhr.onloadend = function () {
                            console.log('run');
                            if (xhr.status === 200) {
                                current_circle.remove();
                            }};
                        xhr.open('get',host + mode_url,true);
                        xhr.send();
                    }
                </script>
                <button type="button" id="board" class="button white big" onclick="start('draftboard')">CoTan草稿板</button>
                <div class="nothing"></div>
                <button type="button" id="selenium" class="button white big" onclick="start('crawler')">自动化网页</button>

                <div class="nothing"></div>
                <button type="button" id="git" class="button white small" onclick="start('git')">git仓库控制器</button>

                <div class="nothing"></div>
                <button type="button" id="website" class="button white small" onclick="window.open('https://cotan.songzh.website');">CoTan社区</button>

                <h2 class="mode">数学系统</h2>

                <button type="button" id="alg" class="button white big" onclick="start('algebraicfactory')">代数工厂</button>

                <div class="nothing"></div>
                <button type="button" id="machine" class="button white big" onclick="start('machinelearner')">机器学习</button>

                <div class="nothing"></div>
                <button type="button" id="data" class="button white big" onclick="start('datascience')">数据科学</button>

                <div class="nothing"></div>
                <button type="button" id="func" class="button white small" onclick="start('functionfactory')">函数工厂</button>

                <div class="nothing"></div>
                <button type="button" id="geometric" class="button white small" onclick="start('functionmapping')">函数实验室</button>

                <h2 class="mode">物化系统</h2>

                <button type="button" id="physical" class="button white big">几何车间</button>

                <div class="nothing"></div>
                <button type="button" id="chemistry" class="button white big">物理车间</button>

                <div class="nothing"></div>
                <button type="button" id="laboratory" class="button white small">化学车间</button>

                <h2 class="mode">系统工具</h2>

                <button type="button" id="plugin" class="button white small" onclick="start('system')">系统管理</button>

                <div class="nothing"></div>
                <button type="button" id="process" class="button white small">通信管理器</button>
            </div>
            <script>
                let screen_width = 1200;
                let screen_height = 800;
                console.log(screen_height);
                document.getElementById("cotanTitle").style.width = String(screen_width -
                    document.getElementById("method").offsetWidth - 1) + 'px';

                // 背景系统
                class Circle {
                    constructor(x, y) {
                        this.x = x;
                        this.y = y;
                        this.r = Math.random() * 10 ;
                        this._mr = Math.random();
                        this._mx = (Math.random() - 0.5) * 2;
                        this._my = (Math.random() - 0.5) * 2 ;
                        this.ax = 0;
                        this.ay = 0;

                    }

                    drawCircle(ctx) {
                        ctx.beginPath();  // 开始绘制
                        ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);  // 画弧线
                        ctx.closePath();  // 结束绘制
                        ctx.fillStyle = 'rgba(204, 204, 204, 0.3)';
                        ctx.fill();
                    }

                    drawLine(ctx, _circle) {
                        let dx = this.x - _circle.x;  // 差距
                        let dy = this.y - _circle.y;  // 差距
                        let d = Math.sqrt(dx * dx + dy * dy);  // 勾股距离
                        if (d < 180) {
                            ctx.beginPath();
                            //开始一条路径，移动到位置 this.x,this.y。创建到达位置 _circle.x,_circle.y 的一条线：
                            ctx.moveTo(this.x, this.y);   //起始点
                            ctx.lineTo(_circle.x, _circle.y);   //终点
                            ctx.closePath();
                            ctx.strokeStyle = 'rgba(204, 204, 204, ' + String(1 - (d/180)) + ')';
                            ctx.stroke();
                        }
                    }

                    set_a(ax, ay){
                        this.ax += ax;
                        this.ax /= 2;
                        this.ay += ay;
                        this.ay /= 2;
                    }

                    set_a_first(){
                        if (Math.abs(this._mx) > 3) {
                            this.ax = 0;
                            this._mx = (Math.random() - 0.5) * 2;
                        }
                        if (Math.abs(this._my) > 3) {
                            this.ay = 0;
                            this._my = (Math.random() - 0.5) * 2;
                        }
                    }

                        // 圆圈移动
                        // 圆圈移动的距离必须在屏幕范围内
                    move(w, h) {
                        this._mx += this.ax;
                        this._my += this.ay;

                        this._mx = (this.x < w && this.x > 1) ? this._mx : (-this._mx);
                        this._my = (this.y < h && this.y > 1) ? this._my : (-this._my);
                        this._mr = (this.r < 10 && this.r > 1) ? this._mr : (-this._mr);
                        this.x += this._mx / 2;
                        this.y += this._my / 2;
                        this.r += this._mr / 2;
                        if (this.r <= 0){
                            this._mr = -this._mr;
                            this.r = -this.r;
                        }
                        }}
            //鼠标点画圆闪烁变动
                class currentCirle extends Circle {
                    constructor(x, y) {
                        super(x, y);
                        this.r = 8;
                        this.R = 30;
                        this.rad = 0;
                        this.circle = [];
                    }

                    add() {
                        console.log('add');
                        document.getElementsByTagName('title').item(0).innerHTML = 'loading...';
                        this.circle.push('rgba(204, 204, 204, 0.8)');
                    }

                    remove() {
                        console.log('remove');
                        this.circle.shift();
                        if (this.circle.length === 0){
                            document.getElementsByTagName('title').item(0).innerHTML = 'Hello';
                        }
                    }

                    drawLine(ctx, _circle) {
                        let dx = this.x - _circle.x;  // 差距
                        let dy = this.y - _circle.y;  // 差距
                        let d = Math.sqrt(dx * dx + dy * dy);  // 勾股距离
                        if (d < 180){
                            ctx.beginPath();
                            ctx.moveTo(this.x, this.y);   //起始点
                            ctx.lineTo(_circle.x, _circle.y);   //终点
                            ctx.closePath();
                            ctx.strokeStyle = 'rgba(204, 0, 0, ' + String(1 - (d / 180)) + ')';
                            ctx.stroke();
                            _circle.set_a(dx / 1800, dy / 1800);
                        }else{
                            _circle.set_a_first()
                        }
                    }

                    drawCircle(ctx) {
                        let l = this.circle.length;
                        for (let i of this.circle){
                            let dx = this.R * Math.cos(this.rad);
                            let dy = this.R * Math.sin(this.rad);
                            ctx.beginPath();  // 开始绘制
                            ctx.arc(this.x + dx, this.y + dy, this.r, 0, 2 * Math.PI);  // 画弧线
                            ctx.closePath();  // 结束绘制
                            ctx.fillStyle = i;
                            ctx.fill();
                            this.rad += 2 * Math.PI * (1 / l);
                            if (this.rad >= 2 * Math.PI){
                                this.rad -= 2 * Math.PI}
                        }
                        this.rad += Math.PI * (15 / 180);
                    }
                }
                //更新页面用requestAnimationFrame替代setTimeout
                window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

                let canvas = document.getElementById('canvas');
                let ctx = canvas.getContext('2d');
                let w = canvas.width = canvas.offsetWidth;
                let h = canvas.height = canvas.offsetHeight;
                let circles = [];
                let current_circle = new currentCirle(0, 0);  // 鼠标位置
                let update_times = 0;
                let draw = function () {
                    ctx.clearRect(0, 0, w, h);  // 清空
                    for (let i = 0; i < circles.length; i++) {
                        circles[i].move(w, h);
                        circles[i].drawCircle(ctx);
                        for (j = i + 1; j < circles.length; j++) {
                            circles[i].drawLine(ctx, circles[j])
                        }
                    }
                    if (current_circle.x) {
                        current_circle.drawCircle(ctx);
                        for (let k = 1; k < circles.length; k++) {
                            current_circle.drawLine(ctx, circles[k])
                        }
                    }else{
                        for (let k = 1; k < circles.length; k++) {
                            current_circle.set_a_first()
                        }
                    }
                    update_times += 1;
                    if (update_times >= 100) {
                        circles.push(new Circle(Math.random() * w, Math.random() * h));
                        circles.shift();
                        update_times = 0
                    }
                    requestAnimationFrame(draw)
                };

                let init = function (num) {
                    for (var i = 0; i < num; i++) {
                        circles.push(new Circle(Math.random() * w, Math.random() * h));
                    }
                    draw();
                };
                window.addEventListener('load', init(220));
                window.onmousemove = function (e) {  // 鼠标进入范围
                    // e = e || window.event;
                    current_circle.x = e.clientX;
                    current_circle.y = e.clientY;
                };
                window.onmouseout = function () {  // 鼠标移出反围
                    current_circle.x = null;
                    current_circle.y = null;

                };

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