canvas蓝色线条流动湍流世界动画效果代码-html代码-BFW代码库

canvas蓝色线条流动湍流世界动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas蓝色线条流动湍流世界动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
 

</head>
<body>

  <script >

let App = {}
App.setup = function () {
	// The setup function initializes everything in a permanent way (will never be set anew)
	
	const canvas = document.createElement('canvas')
	//const maxWidth = 9933, maxHeight = 14043
	//const quality = 0.1
	//this.filename = "artwork"
	
	this.canvas = canvas
	this.canvas.width = window.innerWidth//maxWidth * quality//window.innerWidth
	this.canvas.height = window.innerHeight//maxHeight * quality//3370//window.innerHeight
	this.ctx = this.canvas.getContext('2d')
	this.width = this.canvas.width
	this.height = this.canvas.height
	this.dataToImageRatio = Math.max(this.width, this.height) / 1000
  
	// Blend mode /!\ Don't use if you can! Can be a mega source of lag, proportional to canvas size
	this.ctx.globalCompositeOperation = 'darker'// This one is OK
	//this.ctx.globalCompositeOperation = 'lighter'// This one is OK

	this.ctx.imageSmoothingEnabled = false
	this.ctx.webkitImageSmoothingEnabled = false
	this.ctx.msImageSmoothingEnabled = false
	this.xC = this.width / 2
	this.yC = this.height / 2

	document.getElementsByTagName('body')[0].appendChild(canvas)

	// Particle system properties
	this.lifespan = 300
	this.popPerBirth = 5
	this.maxPop = 1500
	this.birthFreq = 1
}
App.start = function () {
	// The start function sets, and potentially resets things that will change over time
	this.stepCount = 0
	this.particles = []
	
	// Counters for UI
	this.drawnInLastFrame = 0
	this.deathCount = 0
	
	// Initial paint (background most often)
	this.initDraw()
}
App.evolve = function () {
	let time1 = performance.now()

	this.stepCount++

	// Use birth control
	if (this.stepCount % this.birthFreq == 0 && (this.particles.length + this.popPerBirth) < this.maxPop) {
		for (let n = 0; n < this.popPerBirth; n++) {
			this.birth()
		}
	}
	
	// Core sequence: MOVE everything then DRAW everything
	App.move()
	App.draw()

	let time2 = performance.now()

}
App.birth = function () {
	let x = -800 + 1600 * Math.random(),
		y = -800 + 1600 * Math.random()
		
	let particle = {
		hue: 195 + 3 * Math.floor(3 * Math.random()),
		sat: 65 + 30 * Math.random(),
		lum: 15 + Math.floor(50*Math.random()),
		x,
		y,
		xLast: x, yLast: y,
		xSpeed: 0, ySpeed: 0,
		age: 0,
		name: 'seed-' + Math.ceil(10000000 * Math.random())
	}

	this.particles.push(particle)
}
App.kill = function (deadParticleName) {
	this.particles = this.particles.filter(p => p.name !== deadParticleName)
}
App.move = function () {
	for (let i = 0; i < this.particles.length; i++) {
		// Get particle
		let p = this.particles[i]

		// Save last position
		p.xLast = p.x
		p.yLast = p.y
		
		// Reset velocity, as we're dealing with velocity fields and not forces
		p.xSpeed = 0; p.ySpeed = 0
		
		// Eddies, boys
		let eddies = [], baseK = 7
		eddies.push({ x: -300, y: -300, K: 10 * baseK, r0: 180 })
		eddies.push({ x: 300, y: -300, K: 15 * baseK, r0: 150 })
		eddies.push({ x: 300, y: 300, K: 10 * baseK, r0: 250 })
		eddies.push({ x: -300, y: 300, K: 15 * baseK, r0: 150 })
		eddies.push({ x: 0, y: 0, K: 5 * baseK, r0: 20 })
		
		for (var e = 0; e < eddies.length; e++) {
			let eddy = eddies[e]
			let dx = p.x - eddy.x,
			dy = p.y - eddy.y,
			r = Math.sqrt(dx*dx + dy*dy),
			theta = Utils.segmentAngleRad(0, 0, dx, dy, true),
			cos = Math.cos(theta), sin = Math.sin(theta),
			K = eddy.K, // intensity
			r0 = edd.........完整代码请登录后点击上方下载按钮下载查看