p5实现点线canvas绘制动画效果代码-html代码-BFW代码库

p5实现点线canvas绘制动画效果代码

代码语言：html

所属分类：动画

代码描述：p5实现点线canvas绘制动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Secular+One&amp;display=swap'>
  
<style>
body {
	margin: 0;
	padding: 0;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: black;
}
</style>



</head>

<body  >
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
      <script  >
//even and odd vertex indicated by color
//mouse position allows for play (left/right is time and updown is a radius factor)
//click to mix and press a key to play/pause
let playBool = true;
let pathArray = [];
let nodeArray = [];
let eColor, oColor, nTotal, r, t;
function setup() {
	cnv = createCanvas(windowWidth * 0.9, windowHeight * 0.9);
	r = min(width, height) / 3;
	strokeWeight(0.2);
	background(25, 125, 155);
	randomKgraph();
	console.log(pathArray);
	for (let i = 0; i < nTotal; i++) {
		nodeArray.push(new nodes(nTotal, i));
	}
	noCursor();
}

function draw() {
	if (!playBool) {
		frameCount--;
	}
	t = 400 * sin(frameCount / 1000) + mouseX / 10 - width / 2;
	r =
		min(width, height) / 3 +
		(min(width, height) / 3) * sin(t / 50) +
		tan(t / 100) +
		mouseY -
		height / 2;
	background(25, 125, 155, 2);
	eColor = color(
		100 - 50 * sin(t / 5),
		150 - 50 * sin(t / 7),
		200 - 90 * sin(t / 7),
		100
	); //even node/vertex color
	oColor = color(
		250 - 50 * cos(t / 5),
		200 - 50 * cos(t / 7),
		180 - 50 * cos(t / 9),
		100
	); //odd node/vertex color
	translate(width / 2, height / 2);
	drawPaths();
	for (let i = 0; i < nTotal; i++) {
		nodeArray[i].display();
	}
}
//symetric array of connections. only one path per node set.
function randomKgraph() {
	nTotal = int(random(10, 50)); //numb.........完整代码请登录后点击上方下载按钮下载查看