首页 > 其他分享 >html--机器人

html--机器人

时间：2024-03-18 19:32:45浏览次数：29  
标签：p0 p1 const -- 机器人 ---- html link size 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
  body, html {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  background:#000;
  cursor: pointer;
}
  </style>
</head>

<body>
   <canvas></canvas>
<script type="text/javascript">
  
 {
  class Robot {
    constructor(color, light, size, x, y, struct) {
      this.x = x;
      this.points = [];
      this.links = [];
      this.frame = 0;
      this.dir = 1;
      this.size = size;
      this.color = Math.round(color);
      this.light = light;
      // ---- create points ----
      for (const p of struct.points) {
        this.points.push(new Robot.Point(size * p.x + x, size * p.y + y, p.f));
      }
      // ---- create links ----
      for (const link of struct.links) {
        const p0 = this.points[link.p0];
        const p1 = this.points[link.p1];
        const dx = p0.x - p1.x;
        const dy = p0.y - p1.y;
        this.links.push(
          new Robot.Link(
            this,
            p0,
            p1,
            Math.sqrt(dx * dx + dy * dy),
            link.size * size / 3,
            link.lum,
            link.force,
            link.disk
          )
        );
      }
    }
    update() {
      if (++this.frame % 20 === 0) this.dir = -this.dir;
      if (
        dancerDrag &&
        this === dancerDrag &&
        this.size < 16 &&
        this.frame > 600
      ) {
        dancerDrag = null;
        dancers.push(
          new Robot(
            this.color,
            this.light * 1.25,
            this.size * 2,
            pointer.x,
            pointer.y - 100 * this.size * 2,
            struct
          )
        );
        dancers.sort(function(d0, d1) {
          return d0.size - d1.size;
        });
      }
      // ---- update links ----
      for (const link of this.links) {
        const p0 = link.p0;
        const p1 = link.p1;
        const dx = p0.x - p1.x;
        const dy = p0.y - p1.y;
        const dist = Math.sqrt(dx * dx + dy * dy);
        if (dist) {
          const tw = p0.w + p1.w;
          const r1 = p1.w / tw;
          const r0 = p0.w / tw;
          const dz = (link.distance - dist) * link.force;
          const sx = dx / dist * dz;
          const sy = dy / dist * dz;
          p1.x -= sx * r0;
          p1.y -= sy * r0;
          p0.x += sx * r1;
          p0.y += sy * r1;
        }
      }
      // ---- update points ----
      for (const point of this.points) {
        // ---- dragging ----
        if (this === dancerDrag && point === pointDrag) {
          point.x += (pointer.x - point.x) * 0.1;
          point.y += (pointer.y - point.y) * 0.1;
        }
        // ---- dance ----
        if (this !== dancerDrag) {
          point.fn && point.fn(16 * Math.sqrt(this.size), this.dir);
        }
        // ---- verlet integration ----
        point.vx = point.x - point.px;
        point.vy = point.y - point.py;
        point.px = point.x;
        point.py = point.y;
        point.vx *= 0.995;
        point.vy *= 0.995;
        point.x += point.vx;
        point.y += point.vy + 0.01;
      }
      // ---- ground ----
      for (const link of this.links) {
        const p1 = link.p1;
        if (p1.y > canvas.height * ground - link.size * 0.5) {
          p1.y = canvas.height * ground - link.size * 0.5;
          p1.x -= p1.vx;
          p1.vx = 0;
          p1.vy = 0;
        }
      }
      // ---- center position ----
      const delta = (this.x - this.points[0].x) * 0.0002;
      this.points[9].x += delta;
      this.points[10].x += delta;
    }
    draw() {
      for (const link of this.links) {
        if (link.size) {
          const dx = link.p1.x - link.p0.x;
          const dy = link.p1.y - link.p0.y;
          const a = Math.atan2(dy, dx);
          const d = Math.sqrt(dx * dx + dy * dy);
          // ---- shadow ----
          ctx.save();
          ctx.translate(link.p0.x + link.size * 0.25, link.p0.y + link.size * 0.25);
          ctx.rotate(a);
          ctx.drawImage(
            link.shadow,
            -link.size * 0.5,
            -link.size * 0.5,
            d + link.size,
            link.size
          );
          ctx.restore();
          // ---- stroke ----
          ctx.save();
          ctx.translate(link.p0.x, link.p0.y);
          ctx.rotate(a);
          ctx.drawImage(
            link.image,
            -link.size * 0.5,
            -link.size * 0.5,
            d + link.size,
            link.size
          );
          ctx.restore();
        }
      }
    }
  }
  Robot.Link = class Link {
    constructor(parent, p0, p1, dist, size, light, force, disk) {
      // ---- cache strokes ----
      function stroke(color, axis) {
        const image = document.createElement("canvas");
        image.width = dist + size;
        image.height = size;
        const ict = image.getContext("2d");
        ict.beginPath();
        ict.lineCap = "round";
        ict.lineWidth = size;
        ict.strokeStyle = color;
        if (disk) {
          ict.arc(size * 0.5 + dist, size * 0.5, size * 0.5, 0, 2 * Math.PI);
          ict.fillStyle = color;
          ict.fill();
        } else {
          ict.moveTo(size * 0.5, size * 0.5);
          ict.lineTo(size * 0.5 + dist, size * 0.5);
          ict.stroke();
        }
        if (axis) {
          const s = size / 10;
          ict.fillStyle = "#000";
          ict.fillRect(size * 0.5 - s, size * 0.5 - s, s * 2, s * 2);
          ict.fillRect(size * 0.5 - s + dist, size * 0.5 - s, s * 2, s * 2);
        }
        return image;
      }
      this.p0 = p0;
      this.p1 = p1;
      this.distance = dist;
      this.size = size;
      this.light = light || 1.0;
      this.force = force || 0.5;
      this.image = stroke(
        "hsl(" + parent.color + " ,30%, " + parent.light * this.light + "%)",
        true
      );
      this.shadow = stroke("rgba(0,0,0,0.5)");
    }
  };
  Robot.Point = class Point {
    constructor(x, y, fn, w) {
      this.x = x;
      this.y = y;
      this.w = w || 0.5;
      this.fn = fn || null;
      this.px = x;
      this.py = y;
      this.vx = 0.0;
      this.vy = 0.0;
    }
  };
  // ---- set canvas ----
  const canvas = {
    init() {
      this.elem = document.querySelector("canvas");
      this.resize();
      window.addEventListener("resize", () => this.resize(), false);
      return this.elem.getContext("2d");
    },
    resize() {
      this.width = this.elem.width = this.elem.offsetWidth;
      this.height = this.elem.height = this.elem.offsetHeight;
      ground = this.height > 500 ? 0.85 : 1.0;
      for (let i = 0; i < dancers.length; i++) {
        dancers[i].x = (i + 2) * canvas.width / 9;
      }
    }
  };
  // ---- set pointer ----
  const pointer = {
    init(canvas) {
      this.x = 0;
      this.y = 0;
      window.addEventListener("mousemove", e => this.move(e), false);
      canvas.elem.addEventListener("touchmove", e => this.move(e), false);
      window.addEventListener("mousedown", e => this.down(e), false);
      window.addEventListener("touchstart", e => this.down(e), false);
      window.addEventListener("mouseup", e => this.up(e), false);
      window.addEventListener("touchend", e => this.up(e), false);
    },
    down(e) {
      this.move(e);
      for (const dancer of dancers) {
        for (const point of dancer.points) {
          const dx = pointer.x - point.x;
          const dy = pointer.y - point.y;
          const d = Math.sqrt(dx * dx + dy * dy);
          if (d < 60) {
            dancerDrag = dancer;
            pointDrag = point;
            dancer.frame = 0;
          }
        }
      }
    },
    up(e) {
      dancerDrag = null;
    },
    move(e) {
      let touchMode = e.targetTouches,
        pointer;
      if (touchMode) {
        e.preventDefault();
        pointer = touchMode[0];
      } else pointer = e;
      this.x = pointer.clientX;
      this.y = pointer.clientY;
    }
  };
  // ---- init ----
  const dancers = [];
  let ground = 1.0;
  const ctx = canvas.init();
  pointer.init(canvas);
  let dancerDrag = null;
  let pointDrag = null;
  // ---- main loop ----
  const run = () => {
    requestAnimationFrame(run);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#222";
    ctx.fillRect(0, 0, canvas.width, canvas.height * 0.15);
    ctx.fillRect(0, canvas.height * 0.85, canvas.width, canvas.height * 0.15);
    for (const dancer of dancers) {
      dancer.update();
      dancer.draw();
    }
  };
  // ---- robot structure ----
  const struct = {
    points: [
      {
        x: 0,
        y: -4,
        f(s, d) {
          this.y -= 0.01 * s;
        }
      },
      {
        x: 0,
        y: -16,
        f(s, d) {
          this.y -= 0.02 * s * d;
        }
      },
      {
        x: 0,
        y: 12,
        f(s, d) {
          this.y += 0.02 * s * d;
        }
      },
      { x: -12, y: 0 },
      { x: 12, y: 0 },
      {
        x: -3,
        y: 34,
        f(s, d) {
          if (d > 0) {
            this.x += 0.01 * s;
            this.y -= 0.015 * s;
          } else {
            this.y += 0.02 * s;
          }
        }
      },
      {
        x: 3,
        y: 34,
        f(s, d) {
          if (d > 0) {
            this.y += 0.02 * s;
          } else {
            this.x -= 0.01 * s;
            this.y -= 0.015 * s;
          }
        }
      },
      {
        x: -28,
        y: 0,
        f(s, d) {
          this.x += this.vx * 0.035;
          this.y -= 0.001 * s;
        }
      },
      {
        x: 28,
        y: 0,
        f(s, d) {
          this.x += this.vx * 0.035;
          this.y -= 0.001 * s;
        }
      },
      {
        x: -3,
        y: 64,
        f(s, d) {
          this.y += 0.015 * s;
          if (d > 0) {
            this.y -= 0.01 * s;
          } else {
            this.y += 0.05 * s;
          }
        }
      },
      {
        x: 3,
        y: 64,
        f(s, d) {
          this.y += 0.015 * s;
          if (d > 0) {
            this.y += 0.05 * s;
          } else {
            this.y -= 0.01 * s;
          }
        }
      }
    ],
    links: [
      { p0: 3, p1: 7, size: 12, lum: 0.5 },
      { p0: 1, p1: 3, size: 24, lum: 0.5 },
      { p0: 1, p1: 0, size: 60, lum: 0.5, disk: 1 },
      { p0: 5, p1: 9, size: 16, lum: 0.5 },
      { p0: 2, p1: 5, size: 32, lum: 0.5 },
      { p0: 1, p1: 2, size: 50, lum: 1 },
      { p0: 6, p1: 10, size: 16, lum: 1.5 },
      { p0: 2, p1: 6, size: 32, lum: 1.5 },
      { p0: 4, p1: 8, size: 12, lum: 1.5 },
      { p0: 1, p1: 4, size: 24, lum: 1.5 }
    ]
  };
  // ---- instanciate robots ----
  for (let i = 0; i < 6; i++) {
    dancers.push(
      new Robot(
        i * 360 / 7,
        80,
        4,
        (i + 2) * canvas.width / 9,
        canvas.height * ground - 340,
        struct
      )
    );
  }
  run();
}

</script>

</body>
</html>

在这里插入图片描述

标签：p0,p1,const,--,机器人,----,html,link,size
From： https://blog.csdn.net/stqer/article/details/136818576

相关文章

  • html--蝴蝶
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>蝴蝶飞舞</title><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.c......
  • Python中运算符and ,or 如何运算
    print(TrueandTrue)#True,前者为真，输出后者print(Trueand3)#3,前者为真，输出后者print(0andTrue)#0，前者为假，输出前者print(3or4)#3，前者为真，输出前者print(0or3)#3，前者为假，输出后者print(TrueorFalse)#True,前者为真，输出前者print(Trueor3)#True,前......
  • JAVA--数据库（增删改）
    增（INSERT）#给指定字段添加数据insertinto表名(字段1,字段2...)values(值1,值2...);给全部字段添加数据insertinto表名values(值1,值2...);批量添加数据insertinto表名(字段1,字段2...)values(值1,值2...),(值1,值2...),(值1,值2...);   insertinto......
  • 用C语言实现二分查找
    //二分查找，前提必须是有序#define_CRT_SECURE_NO_WARNINGS#include<stdio.h>intmain(){ intarr[]={1,2,3,4,5,6,7,8,9,10}; intsz=sizeof(arr)/sizeof(arr[0]);//求数组长度 intk=7;//要查找的数 intleft=0; intright=sz-1; intmid=0; i......
  • 学习笔记——C语言基本概念&运算符——（2）
    目录一、运算符1.1赋值运算符1.2算数运算符 1.3关系运算符1.5位运算符1.6 自增自减运算符1.7  复合运算符1.8逗号运算符1.9 三目运算符1.10 sizeof运算符附录：运算符优先性表一、运算符1>.按照操作数目分类：单目运算符，双目运算符，三目运算符。2>......
  • C语言随记————简单算法
    1.问题：如何在C语言中实现一个简单的线性查找算法？ 答案：线性查找算法可以通过遍历数组的每个元素，逐一比较来查找目标值。以下是一个简单的实现示例：intlinearSearch(intarr[],intn,intx){for(inti=0;i<n;i++){if(arr[i]==x)re......
  • 数据可视化-ECharts Html项目实战（3）
    在之前的文章中，我们学习了如何创建堆积折线图，饼图以及较难的瀑布图并更改图标标题。想了解的朋友可以查看这篇文章。同时，希望我的文章能帮助到你，如果觉得我的文章写的不错，请留下你宝贵的点赞，谢谢。数据可视化-EChartsHtml项目实战（2）-CSDN博客文章浏览阅读1.2k次，点赞33次，收藏16......
  • 刷题日记——干碎那个BFS！(含国科大机试2021)
    例题小引——迷宫问题问题描述:迷宫由n行m列的单元格组成(n，m都小于等于50），每个单元格要么是空地，要么是障碍物。现请你找到一条从起点到终点的最短路径长度。分析——（迷宫问题BFS解法）使用BFS算法，进行广度优先遍历，总体思路是访问一个结点，就把相邻的结点入队，然后下一个访......
  • 【nload】nload的安装和使用
    目录一、nload介绍二、nload下载和安装安装依赖环境远程下载nload安装包解压文件编译安装三、命令用法参数实例：运行nload之后，可以使用的快捷键：一次显示多个设备，不显示流量图设置计算时间窗口的长度(以秒为单位)设置显示的刷新间隔（以毫秒为单位，默认值为500）一、n......
  • Docker部署Django项目——基础
    1.服务器配置1.1centos7系统的安装centos-7-isos-x86_64安装包下载)VMware安装自定义配置选择对应的系统镜像一般选择内核4核、内存8g、硬盘80g相关配置1.2.网络配置1.2.1查看win电脑虚拟机VMnet8的ip使用ipconfig查看虚拟机的ip1.2.2配置虚拟机VMne......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99