p5实现热气球穿越云层升起动画效果代码-html代码-BFW代码库

p5实现热气球穿越云层升起动画效果代码

代码语言：html

所属分类：动画

代码描述：p5实现热气球穿越云层升起动画效果代码，点击键盘的space空格键，会切换不同的云层和天气。

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
	margin: 0;
	padding: 0;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #b29270;
}
</style>



</head>

<body  >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
      <script >
//press space to mix
//click to pause

//color palettes from: https://farbvelo.elastiq.ch/
let colorArray;
let playBool = true;
let colorArray2;
let colorArray3;
let t, bg, g;
let nClouds;
let cB, cS, cC, cP, cP2;
let clouds = [];
function setup() {
	noStroke();
	g = min(windowWidth * 0.9, windowHeight * 0.9);
	createCanvas(windowWidth * 0.9, windowHeight * 0.9);
	nClouds = max(20, floor(g / 30));
	colorArray = [
		color(50, 35, 24),
		color(60, 57, 51),
		color(74, 80, 76),
		color(112, 99, 90),
		color(126, 115, 107),
		color(99, 127, 129),
		color(106, 150, 156),
		color(146, 181, 188),
		color(183, 194, 189),
		color(216, 201, 180)
	];
	colorArray2 = [
		color(203, 154, 110),
		color(193, 136, 93),
		color(183, 118, 77),
		color(173, 99, 61),
		color(162, 81, 46),
		color(142, 66, 36),
		color(114, 55, 32),
		color(87, 44, 28),
		color(61, 33, 24),
		color(37, 23, 19)
	];
	colorArray3 = [
		color(43, 49, 52),
		color(44, 53, 63),
		color(45, 66, 75),
		color(45, 73, 86),
		color(45, 80, 98),
		color(63, 91, 105),
		color(94, 96, 108),
		color(123, 112, 110),
		color(150, 129, 111),
		color(178, 146, 112)
	];
	bg = colorArray3[floor(random(0, colorArray3.length))];
	for (let i = 0; i < nClouds; i++) {
		clouds.push(new Cloud());
	}
	cB = colorArray[floor(random(0, colorArray.length))];
	cS = colorArray[floor(random(0, colorArray.length))];
	cC = colorArray2[floor(random(0, colorArray2.length))];
	cP = colorArray[floor(random(0, colorArray.length))];
	cP2 = colorArray[floor(random(0, colorArray.length))];
}
function draw() {
	if (playBool) {
		t = frameCount;
		background(bg);
		balloon();
		for (let i = 0; i < clouds.length; i++) {
			clouds[i].display();
		}
	} else {
		frameCount--;
	}
}

class Cloud {
	constructor() {
		this.c = colorArray[floor(random(0, colorArray.length))];
		this.c.setAlpha(10);
		this.size = random(10, 60);
		this.pos = createVect.........完整代码请登录后点击上方下载按钮下载查看