p5实现线圈动画缠绕动画效果代码

代码语言:html

所属分类:动画

代码描述:p5实现线圈动画缠绕动画效果代码

代码标签: 动画 缠绕 动画 效果

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
    }
    
    body {
      background-color: #7c4de1;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    </style>

</head>

<body>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script>
    <script>
        /*
     * ROUND WIRE
     * Made with p5 - Enjoy!
     *
     * Inspired by one of the p5js examples in docu:
     * https://p5js.org/examples/simulate-particle-system.html
     *
     * #047 - #100DaysOfCode
     * By ilithya | 2020
     * https://www.ilithya.rocks/
     * https://twitter.com/ilithya_net
     */
    
    const bgColor = "#7c4de1"; // purple
    const wireColor = "hotpink";
    
    let wire;
    function setup() {
      createCanvas(windowWidth, windowHeight);
    
      // Note to myself: width & height - system vars that store the w/h of the drawing canvas.
      const xcenter = width / 2;
      const ycenter = height / 2.05;
      wire = Object.create(Roundwire).init(createVector(xcenter, ycenter));
    }
    
    function draw() {
      background(bgColor);
    
      wire.createCircles();
      wire.addMotion();
    }
    
    // Let's code this with OLOO style
    const Cable = {
      init(pos) {
        this.accelerat.........完整代码请登录后点击上方下载按钮下载查看

网友评论0