week 15

munusshih · May 9, 2024 · 516ac23 · 516ac23
1 parent 8479502
commit 516ac23
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -305,6 +305,13 @@ <h4 class="effect p5sketch" id="p5clockclock">Week 14</h4>
 
 						<div id="week14"></div>
 					</details>
+					<details id="week15-details">
+						<summary>
+							<h4 class="effect p5sketch" id="p5colorclock">Week 15</h4>
+						</summary>
+
+						<div id="week15"></div>
+					</details>
 				</div>
 			</article>
 		</section>

diff --git a/js/p5clock.js b/js/p5clock.js
@@ -83,3 +83,58 @@ let clock2 = function(p) {
 };
 
 new p5(clock2, 'p5clockclock');
+
+let colorClock = function(p) {
+    let walker = [];
+    let colorList = ['#F21D2F', '#F27999', '#0F398C', '#107329', '#F2911B', '#0D0D0D', '#F21D2F', '#F27999', '#0F398C', '#107329', '#F2911B', '#ffffff'];
+
+    p.setup = function() {
+        p.createCanvas(335, 335);
+        p.noStroke();
+
+        for (let i = 0; i < 100; i++) {
+            walker.push(new Walker());
+        }
+    };
+
+    p.draw = function() {
+        if (p.frameCount % 10000 === 0) {
+            p.clear();
+        }
+        for (let i = 0; i < walker.length; i++) {
+            walker[i].draw();
+            walker[i].walk();
+        }
+    };
+
+    class Walker {
+        constructor() {
+            this.color = p.random(colorList);
+            this.currentRadius = p.random(p.width / 2);
+            this.currentAngle = p.max(p.random(360), p.random(360));
+            this.currentSize = p.min(p.random(p.width / 20), p.random(p.width / 20));
+            this.radWalk = (p.random(-3, 3) + p.random(-3, 3)) / 2;
+            this.angWalk = p.random(-0.03, 0.03);
+            this.sizeWalk = (p.random(-3, 3) + p.random(-3, 3)) / 2;
+        }
+        draw() {
+            p.fill(this.color);
+            p.ellipse(p.width / 2 + this.currentRadius * p.cos(this.currentAngle),
+                p.height / 2 + this.currentRadius * p.sin(this.currentAngle), this.currentSize);
+        }
+        walk() {
+            if (this.currentRadius + this.radWalk < 300) {
+                this.currentRadius += this.radWalk;
+                this.currentAngle += this.angWalk;
+            }
+            if (this.currentSize + this.sizeWalk > 0 && this.currentSize + this.sizeWalk < 20) {
+                this.currentSize += this.sizeWalk;
+            }
+            this.radWalk = (p.random(-3, 3) + p.random(-3, 3)) / 2;
+            this.angWalk = p.random(-0.03, 0.03);
+            this.sizeWalk = (p.random(-1, 1) + p.random(-1, 1)) / 2;
+        }
+    }
+};
+
+new p5(colorClock, 'p5colorclock');
diff --git a/weeks/15.html b/weeks/15.html
@@ -0,0 +1,76 @@
+<article class="space--after-quadruple">
+    <div class="space--after-quadruple">
+        <h4>Description</h4>
+        <p>Congratulations on the completion of the semester! Before we
+            celebrate, we’ll be doing a crit on your final project. Joining us
+            to guest crit is <a href="https://atomicfarmer.com/">Richard Lehmann</a>. After that, we’ll talk about
+            what’s next. Please be sure to keep in touch with us! (and continue
+            to code!)</p>
+        </p>
+    </div>
+
+    <div class="space--after-quadruple">
+        <h4>Lecture</h4>
+        <p>
+            <a
+                href="https://www.figma.com/proto/HSGp3BZBCnnAbVafzawhwA/Week-15?page-id=0%3A1&type=design&node-id=1-110&viewport=450%2C593%2C0.02&t=U2rGaRPcd3D0HcW1-1&scaling=contain&mode=design">What's
+                Next</a>
+        </p>
+    </div>
+
+    <div class="space--after-quadruple">
+        <h4>Assignments</h4>
+
+        <ul>
+            <li>
+                <h5><span>Submit All Assignments in Canvas</span></h5>
+                <p class="space--after-single">Please make sure you submit all
+                    your assignments in teams before 5/14 at 6 PM ET. This
+                    includes all previous projects, worksheets, final project,
+                    your presentation, and any other assignments you may have
+                    missed. If you have any questions, please reach out to me on
+                    Slack or via email.</p>
+                </p>
+            </li>
+        </ul>
+    </div>
+
+    <div class="space--after-quadruple">
+        <h4>Resources</h4>
+
+        <ul>
+            <li>
+
+                <a href="https://p5js.org/">p5.js</a>
+
+            </li>
+            <li>
+
+                <a href="http://paperjs.org/">
+                    paper.js</a>
+
+            </li>
+            <li>
+
+                <a href="https://threejs.org/">
+                    three.js</a>
+
+            </li>
+            <li>
+
+                <a href="https://react.dev/">react.dev</a>
+
+            </li>
+            <li>
+                <a href="https://tailwindcss.com/docs/installation">Tailwind</a>
+                </h3>
+            </li>
+            <li>
+                <a href="https://sass-lang.com/">Sass</a></h3>
+            </li>
+            <li>
+                <a href="https://getbootstrap.com/">Bootstrap</a></h3>
+            </li>
+        </ul>
+    </div>
+</article>