eryn/p5js-experiments
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rotating blue reticle thing

Browse source
This commit is contained in:
Eryn Wells 2022-01-23 18:27:05 -08:00
parent 68103ad538
commit 133bb24018
2 changed files with 59 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
first-local-server/index.html
View file

@ -8,7 +8,8 @@
<style>
body {
padding: 0;
margin: 0;
margin: 0 auto;
width: 800px;
}
</style>
<script src="../p5.js"></script>
@ -17,6 +18,7 @@
</head>
<body>
<h1>First Local Server</h1>
<main>
</main>
</body>

61
first-local-server/sketch.js
View file

@ -1,7 +1,60 @@
function setup() {
// put setup code here
class Arc {
constructor(radius, length, speed, weight) {
this.size = radius * 2.0;
this.length = length;
this.speed = speed / weight;
this.weight = weight;
this.offset = Math.random() * TWO_PI;
}
function draw() {
// put drawing code here
draw() {
stroke('rgba(20%, 50%, 100%, 0.7)');
strokeWeight(this.weight);
noFill();
arc(200, 200, this.size, this.size, this.offset, this.offset + QUARTER_PI);
}
tick() {
this.offset += this.speed;
if (this.offset > TWO_PI) {
this.offset = this.offset - TWO_PI;
}
}
}
let arcsToDraw = [];
function createArcs() {
console.log("Creating Arcs");
const maximumLenth = PI;
const minimumLength = PI / 4;
arcsToDraw = new Array();
let radius = 25;
while (arcsToDraw.length < 20) {
let length = Math.random() * (maximumLenth - minimumLength) + minimumLength;
let speed = Math.random() * 0.05;
let weight = Math.random() * (15 - 8) + 8;
arcsToDraw.push(new Arc(radius, length, speed, weight));
radius += 7.5;
}
}
function mouseClicked() {
createArcs();
}
function setup() {
createArcs();
createCanvas(400, 400);
}
function draw() {
background(240);
for (let a of arcsToDraw) {
a.draw();
a.tick();
}
}