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