canvas粘液

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

// class Fluid
class Fluid extends Entity {
  constructor(itteration, verly, config) {
    super(itteration, verly);
    this.config = config;

this.init();
  }

init() {
    for (let i = 0; i < this.config.PARTICLES_COUNT; i++) {
      this.addFluid();
    }
  }

addFluid() {
    let p = new Point(
      random(this.verlyInstance.WIDTH),
      random(this.verlyInstance.HEIGHT)
    ).setRadius(5);
    this.addPoint(p).setColor(this.config.POINT_COLOR);
  }

// fancy named function
  makeSurfaceTension() {
    this.sticks = [];
    for (let i = 0; i < this.points.length; i++) {
      for (let j = 0; j < this.points.length; j++) {
        let dist = this.points[i].pos.dist(this.points[j].pos);

if (dist > 0 && dist < this.config.JOIN_DIST) {
          let s = this.addStick(i, j)
            .setStiffness(this.config.STIFFNESS)
            .setColor(this.config.LINE_COLOR);
        }
      }
    }
  }
}

let canvas = document.getElementById("c");
let ctx = canvas.getContext("2d");
let width = window.innerWidth - 4;
let height = window.innerHeight - 4;
canvas.width = width;
canvas.height = height;

function getPresetJSON() {
  return {
    preset: "Default",
    closed: false,
    remembered: {
      "Jelly Slime": {
        "0": {
          JOIN_DIST: 50,
          STIFFNESS: 0.02,
          GRAVITY: 1
        }
      },
      "Sticky Slime": {
        "0": {
          JOIN_DIST: 40,
          STIFFNESS: 0.4,
          GRAVITY: 0
        }
      }
    }
  };
}
// DAT.GUI CONFIGS
let config = {
  PARTICLES_COUNT: 200,
  JOIN_DIST: 50,
  STIFFNESS: 0.02,
  GRAVITY: 1,
  POINT_COLOR: "#40ffa6",
  LINE_COLOR: "#1ba364"
};

// GUI STUFF
let gui = new dat.GUI({ load: getPresetJSON() });
gui.remember(config);

// init verly
let verly = new Verly(50, canvas, ctx);
let fluid = new Fluid(50, verly, config);
verly.addEntity(fluid);

// resize
window.onresize = function() {
  width = window.innerWidth - 4;
  height = window.innerHeight - 4;
  verly.WIDTH = canvas.width = width;
  verly.HEIGHT = canvas.height = height;
};

function animate() {
  ctx.fillStyle = "#090909";
  ctx.fillRect(0, 0, width, height);

verly.update();
  verly.render();

fluid.setGravity(new Vector(0, config.GRAVITY));
  fluid.makeSurfaceTension();

// make all the points repel each other and also the Mouse
  for (let i = 0; i < fluid.points.length; i++) {
    // check for NaN and reset
    if (isNaN(fluid.points[i].pos.x) || isNaN(fluid.points[i].pos.y)) {
      fluid.points = [];
      fluid.init();
      break;
    }
    fluid.points[i].resolveBehaviors({ pos: verly.mouse.coord }, 200, 15);
    for (let j = 0; j < fluid.points.length; j++) {
      fluid.points[j].resolveBehaviors(
        fluid.points[i],
        config.JOIN_DIST - 10,
        10
      );
      fluid.points[i].resolveBehaviors(
        fluid.points[j],
        config.JOIN_DIST - 10,
        10
      );
    }
  }

requestAnimationFrame(animate);
}
animate();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg