p5+simplex-noise实现深海不明生物跟随鼠标移动效果代码
代码语言:html
所属分类:动画
代码描述:p5+simplex-noise实现深海不明生物跟随鼠标移动效果代码
代码标签: p5 simplex-noise 深海 生物 跟随 鼠标 移动
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html, body {
overflow: hidden;
background: black;
}
</style>
</head>
<body >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script>
<script >
const hueBase = 60
const hueRange = 160
const segmentCount = 60
const bubbleCount = 500
const segmentLengthBase = 5
const fadeIn = (t, m) => t / m
const fadeOut = (t, m) => (m - t) / m
const fadeInOut = (t, m) => {
let hm = 0.5 * m
return abs((t + hm) % m - hm) / hm
}
const angle = (x1, y1, x2, y2) => atan2(y2 - y1, x2 - x1)
let buffer
let canvas
let ctx
let creature
let bubbles
let center
let tick
let simplex
class AttributeArray {
constructor(count, attrs) {
this.count = count
this.attrs = attrs
this.spread = attrs.length
this.values = new Float32Array(count * this.spread)
}
get length() {
return this.values.length
}
set(a, i, normalize = false) {
normalize && (i *= this.spread)
this.values.set(a, i)
}
get(i, normalize = false) {
normalize && (i *= this.spread)
return this.values.slice(i, i + this.spread)
}
forEach(cb) {
let i = 0
l.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0