p5实现一个蜻蜓组成的旋涡效果代码-html代码-BFW代码库

p5实现一个蜻蜓组成的旋涡效果代码

代码语言：html

代码描述：p5实现一个蜻蜓组成的旋涡效果代码，点击可增加蜻蜓数量

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

<html lang="en"><head>

  <meta charset="UTF-8">

  


</head>

<body >
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.0.10.2.js"></script>
      <script>
let n = 9;
function setup() {
	createCanvas(1120, 720);
	background(250);
	strokeWeight(0.5);
	angleMode(DEGREES);
}
function draw() {
	background(20, 10, 5);
	translate(width / 2, height / 2);
	push();
	t = frameCount / 10;
	rotate(-t);
	//scale(0.5,0.5)
	for (let j = 0; j < 8; j++) {
		for (let i = 0; i < n; i++) {
			push();
			scale(j * 0.15, j * 0.15);
			rotate((360 / n) * i + j * 10);
			dragonfly(-50 + j * 20 - 10 * sin(t * j + t * i));
			pop();
		}
	}
	pop();
	//noLoop();
	push();
	translate(320, 300);
	scale(0.2, 0.2);

	dragonfly(1);
	pop();
}

function dragonfly(d) {
	translate(0, d);
	p = height / 3;
	strokeWeight(2);
	line(0, p - 120, 20, p - 118);
	line(0, p - 120, -20, p - 118);
	line(-27, p - 127, -20, p - 118);
	line(27, p - 127, 20, p - 118);
	line(5, p - 120, 17, p - 132);
	line(-5, p - 120, -17, p - 132);
	line(0, p - 120, 20, p - 95);
	line(0, p - 120, -20, p - 95);
	strokeWeight(1);
	line(-17, p - 132, -2, p - 136);
	line(17, p - 132, 2, p - 136);
	line(30, p - 90, 20, .........完整代码请登录后点击上方下载按钮下载查看