p5实现旋转刻度罗盘效果-html代码-BFW代码库

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 = centerRadius;
                this.baseBandSize = baseBandSize;

                for (let i = 0; i < numberOfRings; i++) {
                        this.rings.push(
                                new Ring(
                                        i,
                                        i,
                                        this.baseBandSize,
                                        this.centerRadius,
                                        color(random(0, 256), random(0, 256), random(0, 256)),
                                        color(random(0, 256), random(0, 256), random(0, 256))
                                )
                        );
                }
        }

        display() {
                _.forEach(this.rings, (r) => r.display());
        }
}

class Ring {
        constructor(
                id,
                layer,
                baseBandSize,
                centerRadius,
                ringTriangleColor,
                ringOuter
        ) {
                this.id = id;
                this.layer = layer;
                this.baseBandSize = baseBandSize;
                this.centerRadius = centerRadius;
                this.ringTriangleColor = ringTriangleColor;
                this.ringOuter = ringOuter;
                this.innerRadius = this.centerRadius + this.layer * this.baseBandSize;
                this.outerRadius = this.innerRadius + this.baseBandSize;
                this.angle = 0;
                this.rateOfChange = 0.25;
                this.directionClockwise = this.layer % 2;

                this.inverseDensity = 3;
                this.maxRotations = 360 / this.inverseDensity;
                this.angleFind = 360 / this.maxRotations;
                this.tick = [];
                this.tickMax = [];
                this.tickMin = [];
                this.ticksTarget = [];

                this.tick.length = this.maxRotations;
                this.tickMax.length = this.maxRotations;
                this.tickMin.length = this.maxRotations;
                this.ticksTarget.length = this.maxRotations;

                this.rateOfTickChange = 0.5;
                for (let i = 0; i < this.maxRotations; i++) {
                        this.........完整代码请登录后点击上方下载按钮下载查看