Adding page for coding challenge 159 (#3064)

duskvirkus · shiffman · web-flow · commit 46ca712ae30e · 2021-02-19T23:08:14.000-05:00
* spelling fix

* Adding page for CC159

* adding lint exception

* Update 159-simple-pendulum-simulation.md

Co-authored-by: Daniel Shiffman &lt;daniel@shiffman.net&gt;
diff --git a/.eslintignore b/.eslintignore
@@ -6,6 +6,7 @@ CodingChallenges/CC_100.1_NeuroEvolution_FlappyBird/P5/neuralnetwork/
 CodingChallenges/CC_100.5_NeuroEvolution_FlappyBird/P5/neuralnetwork/
 CodingChallenges/CC_137_4D_Noise_Loop/P5/OpenSimplexNoise.js
 CodingChallenges/CC_156_Pi_Digits/p5-multi/node
+CodingChallenges/CC_159_simple_pendulum_simulation/P5
 Tutorials/p5.js/10/10.02_p5.js_what_is_JSON_pt1/libraries/p5.serialport.js
 Tutorials/p5.js/10/10.03_p5.js_what_is_JSON_pt2/libraries/p5.serialport.js
 Tutorials/P5JS/p5.js_video/11.8_p5.js_seriously/libraries/
diff --git a/CodingChallenges/CC_159_simple_pendulum_simulation/P5/index.html b/CodingChallenges/CC_159_simple_pendulum_simulation/P5/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.min.js"></script>
+  
+  <meta charset="utf-8" />
+</head>
+
+<body>
+  <script src="sketch.js"></script>
+</body>
+
+</html>
diff --git a/CodingChallenges/CC_159_simple_pendulum_simulation/P5/sketch.js b/CodingChallenges/CC_159_simple_pendulum_simulation/P5/sketch.js
@@ -0,0 +1,44 @@
+// Simple Pendulum Simulation
+// The Coding Train / Daniel Shiffman
+// https://thecodingtrain.com/CodingChallenges/159-simple-pendulum-simulation.html
+// https://youtu.be/NBWMtlbbOag
+// https://editor.p5js.org/codingtrain/sketches/SN-39sHAC
+
+let angle;
+
+let angleV = 0;
+let angleA = 0;
+
+let bob;
+let len;
+let origin;
+
+let gravity = 1;
+
+function setup() {
+  createCanvas(600, 800);
+  origin = createVector(300, 0);
+  angle = PI / 4;
+  bob = createVector();
+  len = 200;
+}
+
+function draw() {
+  background(0);
+
+  let force = gravity * sin(angle);
+  angleA = (-1 * force) / len;
+  angleV += angleA;
+  angle += angleV;
+
+  // angleV *= 0.99;
+
+  bob.x = len * sin(angle) + origin.x;
+  bob.y = len * cos(angle) + origin.y;
+
+  stroke(255);
+  strokeWeight(8);
+  fill(127);
+  line(origin.x, origin.y, bob.x, bob.y);
+  circle(bob.x, bob.y, 64);
+}
diff --git a/CodingChallenges/CC_159_simple_pendulum_simulation/Processing/cc_159_simple_pendulum_simulation/cc_159_simple_pendulum_simulation.pde b/CodingChallenges/CC_159_simple_pendulum_simulation/Processing/cc_159_simple_pendulum_simulation/cc_159_simple_pendulum_simulation.pde
@@ -0,0 +1,44 @@
+// Simple Pendulum Simulation
+// The Coding Train / Daniel Shiffman
+// https://thecodingtrain.com/CodingChallenges/159-simple-pendulum-simulation.html
+// https://youtu.be/NBWMtlbbOag
+// https://editor.p5js.org/codingtrain/sketches/SN-39sHAC
+
+float angle;
+
+float angleV = 0;
+float angleA = 0;
+
+PVector bob;
+float len;
+PVector origin;
+
+float gravity = 1;
+
+void setup() {
+  size(600, 800);
+  origin = new PVector(300, 0);
+  angle = PI/4;
+  bob = new PVector();
+  len = 200;
+}
+
+void draw() {
+  background(0);
+  
+  float force = gravity * sin(angle);
+  angleA = (-1 * force) / len;
+  angleV += angleA;
+  angle += angleV;
+  
+  // angleV *= 0.99
+  
+  bob.x = len * sin(angle) + origin.x;
+  bob.y = len * cos(angle) + origin.y;
+  
+  stroke(255);
+  strokeWeight(8);
+  fill(127);
+  line(origin.x, origin.y, bob.x, bob.y);
+  circle(bob.x, bob.y, 64);
+}
diff --git a/_CodingChallenges/159-simple-pendulum-simulation.md b/_CodingChallenges/159-simple-pendulum-simulation.md
@@ -0,0 +1,73 @@
+---
+title: "Simple Pendulum Simulation"
+video_number: 159
+date: 2021-02-16
+video_id: NBWMtlbbOag
+web_editor: SN-39sHAC
+repository: CC_159_simple_pendulum_simulation
+
+links:
+  - title: "Nature of Code Playlist"
+    url: /learning/nature-of-code/index
+  - title: "Applications of Differential Equations - The Simple Pendulum"
+    author: "San Joaquin Delta College"
+    url: http://calculuslab.deltacollege.edu/ODE/7-A-2/7-A-2-h.html
+  - title: "Simple Pendulum (myPhysicsLab.com)"
+    url: https://www.myphysicslab.com/pendulum/pendulum-en.html
+  - title: "Object Oriented Simple Pendulum (Nature of Code Book)"
+    url: https://github.com/nature-of-code/noc-examples-p5.js/tree/master/chp03_oscillation/NOC_3_10_PendulumExampleSimplified
+
+videos:
+  - title: "Polar Coordinates - Nature of Code"
+    author: "The Coding Train"
+    url: /learning/nature-of-code/3.4-polar-coordinates
+  - title: "3.2 Angular Motion - Nature of Code"
+    author: "The Coding Train"
+    url: /learning/nature-of-code/3.2-angular-motion
+  - title: "Double Pendulum - Coding Challenge #93"
+    author: "The Coding Train"
+    url: /CodingChallenges/093-double-pendulum
+  - title: "Coding Train Live! (February 6th 2021)"
+    author: "The Coding Train"
+    video_id: dpqNqyQCcbY
+
+topics:
+  - title: "Choo choo!! 2021 Coding Challenge!"
+    time: "0:00"
+  - title: "Code! Drawing a bob and an arm."
+    time: "0:43"
+  - title: "Explain! How are we going to think about this?"
+    time: "1:08"
+  - title: "Code! Add our main variables."
+    time: "2:55"
+  - title: "Explain! How do we figure out where the bob is? Trigonometry is the answer!"
+    time: "3:20"
+  - title: "Code! Use the polar coordinates formulas we just worked out."
+    time: "4:39"
+  - title: "Code! Let's use angular motion!"
+    time: "6:30"
+  - title: "Explain! What is the force of the pendulum? Trigonometry is the answer!"
+    time: "7:55"
+  - title: "Code! Add the pendulum force."
+    time: "10:46"
+  - title: "Whoops! Correction on why we multiply by -1."
+    time: "12:04"
+  - title: "Code! Add -1 to the formula."
+    time: "13:34"
+  - title: "Whoops! I figured out some things that I never really understood."
+    time: "13:57"
+  - title: "Code! Correct the 3 step process."
+    time: "14:24"
+  - title: "Something doesn't feel quite right."
+    time: "15:32"
+  - title: "Explain! Angular acceleration relates to the arm length!"
+    time: "16:59"
+  - title: "Code! Let's divide by length."
+    time: "18:58"
+  - title: "Code! You could add some damping."
+    time: "19:54"
+  - title: "Ideas! What could you do next?"
+    time: "20:21"
+---
+
+Choo choo! In this challenge, I build on chapter 3 (Oscillating Motion) of the Nature of Code series and simulate a simple pendulum in p5.js via angular acceleration.
diff --git a/_CodingChallenges/index.md b/_CodingChallenges/index.md
@@ -2,6 +2,7 @@
 title: Coding Challenges
 layout: series-index
 reverse: true
+playlist_id: PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
 ---
 
 Watch me take on some viewer submitted Coding Challenges in p5.js and Processing!
diff --git a/_learning/nature-of-code/3.2-angular-motion.md b/_learning/nature-of-code/3.2-angular-motion.md
diff --git a/_learning/nature-of-code/3.7-additive-waves.md b/_learning/nature-of-code/3.7-additive-waves.md
@@ -7,6 +7,11 @@ repository: nature-of-code/3.7-additive-waves
 can_contribute: true
 web_editor: qcRsZ_O5a
 
+videos:
+  - title: "Simple Pendulum Simulation"
+    author: "The Coding Train"
+    url: /CodingChallenges/159-simple-pendulum-simulation
+
 topics:
   - title: "Welcome back!"
     time: "0:00"
