p5实现旋转刻度罗盘效果

代码语言:html

所属分类:背景

代码描述:p5实现旋转刻度罗盘效果

代码标签: 刻度 罗盘 效果

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

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

<style>
html,
body {
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}
</style>

</head>
<body translate="no">

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/p5.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/lodash-min.js"></script>
<script>
let artwork;
let colorArray;
let btnRegen;

function degrees_to_radians(degrees) {
	var pi = Math.PI;
	return degrees * (pi / 180);
}

function setup() {
	createCanvas(windowWidth, windowHeight);
	artwork = new Artwork();
	setupRegenButton();
	artwork.createNew(50, 10, 20);
}

function mousePressed(event) {
	btnRegen.onClick();
	return false;
}

function draw() {
	background(0, 0, 0);
	btnRegen.draw();
	artwork.display();
}

function windowResized() {
	waitress = millis() + 2000;
	if (fullscreen()) {
		resizeCanvas(displayWidth, displayHeight);
	} else {
		resizeCanvas(windowWidth, windowHeight);
	}
	showing = true;
	setup();
}

class Artwork {
	constructor() {
		this.rings = [];

		this.centerRadius;
		this.baseBandSize;

		this.rotationRate = 10;
		this.rotationIndex = 0;
	}

	createNew(numberOfRings, centerRadius, baseBandSize) {
		this.centerRadius = .........完整代码请登录后点击上方下载按钮下载查看

网友评论0