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