diff --git a/first-local-server/index.html b/first-local-server/index.html index e8e44a5..d60d2b5 100644 --- a/first-local-server/index.html +++ b/first-local-server/index.html @@ -8,7 +8,8 @@ @@ -17,6 +18,7 @@ +

First Local Server

diff --git a/first-local-server/sketch.js b/first-local-server/sketch.js index de6c862..53dfec4 100644 --- a/first-local-server/sketch.js +++ b/first-local-server/sketch.js @@ -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; + } + + 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() { - // put drawing code here + background(240); + for (let a of arcsToDraw) { + a.draw(); + a.tick(); + } } \ No newline at end of file