2b:null 2c:["$","title",null,{"children":"Coding Journey | stevenzhou01 | Observable"}] 31:Ta75,### Randomness (Apr 26 - May 5)

**1. Perlin noise in 2D**
a. The pixel array (to visualize perlin noise in 2D)
- Mapping the 2D canvas grid into an 1D array in order to change the color of each indivual pixel of a canvas.
- It takes 4 spots of the array for a pixel, referring to its R, G, B, alpha value.
- E.g. pixels[0] = R, pixels[1] = G, pixels[2] = B, pixels[3] = alpha, which is the color values of the first pixel. If there are 60 pixels, the array length is 240.
- The first grid starts from pixels[0], the second starts from pixels[4], the third - pixels[8], and so on.

- So if the pixel location is (x,y), the pixel index = (x + y * width) * 4. Then the 4 color parameters of the (x,y) pixel are pixels[n], pixels[n+1], pixels[n+2], pixels[n+3}. Then we can use nested loops for() to represent all the pixels in a canvas.

**2. 2D Perlin Noise**

- **Simplex noise** is the result of an n-dimensional noise function comparable to Perlin noise ("classic" noise) but with fewer directional artifacts, in higher dimensions, and a lower computational overhead.
- **[OpenSimplex Noise](https://gist.github.com/KdotJPG/b1270127455a94ac5d19)** is a patent‑free noise function that creates natural-looking patterns by working on a triangle grid where each vertex has a fixed random gradient vector.
At a query point P, we compute dot products between the P→vertex vectors and the gradient vectors to get three contributions. We then interpolate (blend) these contributions using weights based on distance from P to each vertex — the result is the final noise value.

**3. Random Walker (Coding challenge)**
- floor (3.4) = 3
- ceil (3.4) = 4
- round (3.4) = 3

**1st iteration**
inc = 3;

strokeWeight with noise

**2nd iteration**

32:Te11,### Angles and Rotation (May 9 - May 29)

**1. Angles and Rotation**
a. Radian
One radian is the angle created when you take the radius of a circle and "wrap" it along the edge (the circumference). Because the entire circumference of a circle is 2πr, there are exactly 2π radians in a full 360° circle. More "natural" for computers

b. Rotate

**2. Angular Motion**
Reference to the concept of velocity and acceleration

pos.add(vel);
vel.add(acc);
angle += angleV;
angleV += angleA;

**3. Angles and Vectors**
angle = vel.heading(); // Getting an angle from a vector using tangant (for example, you can make a triangle object point towards the moving direction)
vel = p5.Vector.fromAngle(angle); // Creating a vector from an angle (for example, you can "drive" an object by controlling the angle)

**4. Polar Coordinates**
a. SOHCAHTOA - Trigonometric functions
sin, cos, tan
b. Polar coordinates: (θ, r), which helps to easily think in controlling angle and r to change the position.
Cartesian coordinates: (x,y), but this is more "natural" for computers
c. 1st iteration

**5. Graphing Sine Wave**

class Wave {
amplitude - height
period - width
phase - offset
}

y = sin (TWO_PI * x/period + phase) amplitude

2nd iteration

**6. Pendulum Simulation**

1st iteration (double pendulum)

2nd iteration (double pendulum + "attraction brush" drawing)

**7. Spring Forces**
**Hooke's Law**
Fspring = - k * x
x: extension or displacement
k: constant, the "stiffness" of the spring
-: because the spring force is the opposite direction of the force applied
1st iteration

33:Td34,### Particles (May 30 - Jun 5 & Sept 19 - Sept 22)

**1. Particle System Simulation**
Particle Attributes - initial position
- initial velocity (both speed and direction)
- initial size
- initial transparency
- shape
- lifetime

**2. Particle System with Emitters**
1st iteration

2nd iteration
[Fireworks I](https://editor.p5js.org/pollodude/sketches/9eA11ciUm)
[Fireworks II](https://editor.p5js.org/pollodude/sketches/Pdq5QxkXV)

**3. Particle Systems with Inheritance**
With inheritance you write the shared code once in a **parent class** and let **child classes** reuse it and change only what's different.

i. What `extends` means
`extends` says: "this new class is a specialized version of that other class."
```javascript class Square extends Particle { // Square automatically has pos, vel, lifespan, update(), isDead()... } ``` Even with an empty body, `Square` already does everything `Particle` does. You only write the parts that should differ. If you define a method with the same name as one in the parent, the child's version **overrides** the parent's: ```javascript class Square extends Particle { show() { // overrides Particle's show() noStroke(); fill(255, 100, 100, this.lifespan); rectMode(CENTER); square(this.pos.x, this.pos.y, 10); } } ``` Now `Square` moves exactly like `Particle` (inherited `update()`) but draws itself differently (it draws squares). ii. What `super` means
`super` is a way to reach the **parent class** from inside the child. It has two uses.
a. `super(...)` in the constructor

If the child has its own constructor, you must call `super(...)` first. It runs the parent's constructor, which sets up `pos`, `vel`, and `lifespan`. Only after that can you add new properties.
```javascript class Spark extends Particle { constructor(x, y) { super(x, y); // run Particle's constructor first this.size = random(2, 6); // then add Spark-only stuff this.vel.mult(2); // and even tweak inherited properties } } ``` If you use `this` before calling `super()`, JavaScript throws an error.
b. `super.method()` in other methods
This calls the parent's version of a method, so you can **extend** the behavior instead of replacing it:
```javascript class Heavy extends Particle { update() { this.vel.y += 0.2; // extra: gravity super.update(); // then do the normal Particle update } } ``` Without the `super.update()` line, the particle would never move or age, because you'd have overridden `update()` completely.

The loop calls `update()`, `show()`, and `isDead()` on every particle without caring which type it is. Each object runs its own version of the method. This is called **polymorphism**, and it's the main payoff of inheritance: one array can hold many particle types.

Iteration - Flame drawing: https://editor.p5js.org/pollodude/full/tn-7RzX-6

.34:[{"id":"8ccb87c857e356084fd58e1baf269781cf599a0ed9f72d37763e81ef6418a1ba72e45fb474c5cf91acc8cd0d843a85d6acd95f213dec84a43e7644b6346ff6bb","href":"https://static.observableusercontent.com/files/8ccb87c857e356084fd58e1baf269781cf599a0ed9f72d37763e81ef6418a1ba72e45fb474c5cf91acc8cd0d843a85d6acd95f213dec84a43e7644b6346ff6bb","name":"Screenshot 2026-05-18 at 12.13.52 AM.png","type":"image/png","lastModified":1779695754130.068,"size":618542},{"id":"728c909f5ef7533134e22cc38c631b177964994cc6702217c8dd1bd791e9a58a813824940a30c7f743ea2f899ef07dcbb06e1b73ba2a6f73220757d5ad6d7882","href":"https://static.observableusercontent.com/files/728c909f5ef7533134e22cc38c631b177964994cc6702217c8dd1bd791e9a58a813824940a30c7f743ea2f899ef07dcbb06e1b73ba2a6f73220757d5ad6d7882","name":"Screenshot 2026-05-25 at 3.54.16 PM.png","type":"image/png","lastModified":1779695665691.972,"size":328719},{"id":"2a72df7091a88e42a5c36aa2e98b85e50e7b6c2abeeff5ae11b993b73fc028736ff52ca5e6010018d5c435ee9b4bbe7940cfacf6556ef4cb6f0c9936afbdc36e","href":"https://static.observableusercontent.com/files/2a72df7091a88e42a5c36aa2e98b85e50e7b6c2abeeff5ae11b993b73fc028736ff52ca5e6010018d5c435ee9b4bbe7940cfacf6556ef4cb6f0c9936afbdc36e","name":"Screenshot 2026-05-29 at 8.22.10 PM.png","type":"image/png","lastModified":1780121768262.865,"size":792237},{"id":"9f61353e2fba44db548ddad33b43627960da3a3a68da0558d8ae7ca25073c5296c2106dbab4b40c53ae83a3125b66d3f8e1c6cd9d5c7e996cb47ca42e2dca5b1","href":"https://static.observableusercontent.com/files/9f61353e2fba44db548ddad33b43627960da3a3a68da0558d8ae7ca25073c5296c2106dbab4b40c53ae83a3125b66d3f8e1c6cd9d5c7e996cb47ca42e2dca5b1","name":"Screenshot 2026-05-29 at 9.00.50 PM.png","type":"image/png","lastModified":1780121789921.451,"size":719774},{"id":"c9e9b700a07c1c54254a2d7c36d4e12c38ab2a0ec2113d8bdfaefc4711e5be1dc681c31e594100b2178627641c349458bee5492d36cbff626ea5d8e0d1405b69","href":"https://static.observableusercontent.com/files/c9e9b700a07c1c54254a2d7c36d4e12c38ab2a0ec2113d8bdfaefc4711e5be1dc681c31e594100b2178627641c349458bee5492d36cbff626ea5d8e0d1405b69","name":"canvas_pixel.png","type":"image/png","lastModified":1777197479636.701,"size":2920868},{"id":"0e3822c2320866a1e65724a620ab5870f812b65e0eb6209a227dacf6d50f3a9059dbe268090640eea67652ffc0c332d24528604578758a5b0f0a7aa9d3c6f658","href":"https://static.observableusercontent.com/files/0e3822c2320866a1e65724a620ab5870f812b65e0eb6209a227dacf6d50f3a9059dbe268090640eea67652ffc0c332d24528604578758a5b0f0a7aa9d3c6f658","name":"Screenshot 2026-05-05 at 5.26.00 PM.png","type":"image/png","lastModified":1777986267507.513,"size":400883},{"id":"a4745f677c8c32aac1146fe7bc9194fcb6f96db9eea9e82caab8b17a84bce4ab956276e6a166041888e29308fa328d2ceb30f19a83523c81f983607bfe77bfd1","href":"https://static.observableusercontent.com/files/a4745f677c8c32aac1146fe7bc9194fcb6f96db9eea9e82caab8b17a84bce4ab956276e6a166041888e29308fa328d2ceb30f19a83523c81f983607bfe77bfd1","name":"Screenshot 2026-05-05 at 9.18.07 PM.png","type":"image/png","lastModified":1777987134781.353,"size":346290},{"id":"c94912be049b60d6c16d4da15a520e6e6e803452c096972a2e8cead0b9dd8c938eb151bb7d1a72d2704eb83ff9f7ebb459551bee997b3c78dcdff85c48be7ab8","href":"https://static.observableusercontent.com/files/c94912be049b60d6c16d4da15a520e6e6e803452c096972a2e8cead0b9dd8c938eb151bb7d1a72d2704eb83ff9f7ebb459551bee997b3c78dcdff85c48be7ab8","name":"Screenshot 2026-05-05 at 10.52.26 PM.png","type":"image/png","lastModified":1777992791434.521,"size":1715069},{"id":"9ced43156f410948c53d15f74d1079b58effa46f96b541b18761904067a6f9881abfcbc1e6affcd5fad6b06695ed5a1c3af77e178e3377c930ee7956cdd5f861","href":"https://static.observableusercontent.com/files/9ced43156f410948c53d15f74d1079b58effa46f96b541b18761904067a6f9881abfcbc1e6affcd5fad6b06695ed5a1c3af77e178e3377c930ee7956cdd5f861","name":"Screenshot 2026-05-05 at 9.37.05 PM.png","type":"image/png","lastModified":1777988764884.485,"size":317554},{"id":"11e7a1cfcf8fae7b924d34cdf7cd515482ecedfc1a43751ddf4151eaa72b74480d4ab9719e90e20feb831390e42121227689d4f321ea4045fc36809d6db17c20","href":"https://static.observableusercontent.com/files/11e7a1cfcf8fae7b924d34cdf7cd515482ecedfc1a43751ddf4151eaa72b74480d4ab9719e90e20feb831390e42121227689d4f321ea4045fc36809d6db17c20","name":"Screenshot 2026-05-06 at 12.04.08 PM.png","type":"image/png","lastModified":1778040298720.66,"size":1901161},{"id":"1c77a8eb1869f309ddc6527b09a223af74b2653ee567fb07c0af95701bcae1aadc969a3302bae48863e3f35283e3058c879f439e9f42b1c61df8066605514c44","href":"https://static.observableusercontent.com/files/1c77a8eb1869f309ddc6527b09a223af74b2653ee567fb07c0af95701bcae1aadc969a3302bae48863e3f35283e3058c879f439e9f42b1c61df8066605514c44","name":"Screenshot 2026-05-06 at 11.53.55 AM.png","type":"image/png","lastModified":1778040288084.749,"size":1661349},{"id":"040b8b1d0839fa41e0e7d869a5b1b48b2b4bd4f643f43398af3527325772780170e8c91891cb185a7c090576c01771098d91195c5545da46f9a9651c027e203b","href":"https://static.observableusercontent.com/files/040b8b1d0839fa41e0e7d869a5b1b48b2b4bd4f643f43398af3527325772780170e8c91891cb185a7c090576c01771098d91195c5545da46f9a9651c027e203b","name":"Screenshot 2026-05-09 at 11.47.06 PM.png","type":"image/png","lastModified":1778424197456.601,"size":268111},{"id":"1d37ed7a7172c8ea4b29b7e3d1046a447df12a039704ac3bef3b03f7f2f0fc218362c6e61457e257c6785c5e5211c0881aee2d2e6e5354e3fb1b37bd2d809c91","href":"https://static.observableusercontent.com/files/1d37ed7a7172c8ea4b29b7e3d1046a447df12a039704ac3bef3b03f7f2f0fc218362c6e61457e257c6785c5e5211c0881aee2d2e6e5354e3fb1b37bd2d809c91","name":"Screenshot 2026-05-09 at 11.52.41 PM.png","type":"image/png","lastModified":1778424204879.704,"size":364043},{"id":"a3644491f64adb8f362a01305556a0666b4e5075b48241ac32dd478dc6e94fc5e2ed7b49798d2b6a06c0ee5d8322011c910a02fdfde1b9e16dd05b9879be32e6","href":"https://static.observableusercontent.com/files/a3644491f64adb8f362a01305556a0666b4e5075b48241ac32dd478dc6e94fc5e2ed7b49798d2b6a06c0ee5d8322011c910a02fdfde1b9e16dd05b9879be32e6","name":"Screenshot 2026-05-12 at 5.49.40 PM.png","type":"image/png","lastModified":1778579438508.839,"size":116538},{"id":"7e98b7d424476ef260007a2fb869230c612d7fd8141f4e7590b3dc96448deb0c5d30080fdaa2b8d7c08cf5187dc88292c470d2d46377e28265ed596c2c9ac82d","href":"https://static.observableusercontent.com/files/7e98b7d424476ef260007a2fb869230c612d7fd8141f4e7590b3dc96448deb0c5d30080fdaa2b8d7c08cf5187dc88292c470d2d46377e28265ed596c2c9ac82d","name":"Screenshot 2026-05-12 at 5.43.40 PM.png","type":"image/png","lastModified":1778579431204.23,"size":139888},{"id":"a49f5f3ecba566d50a58abf6f6ffd492b8674c320cca5f22f77e135118977e1134dcab853ff910ca924d8ed2df438bc5afe537a1bfdf79857aaee373a225d46c","href":"https://static.observableusercontent.com/files/a49f5f3ecba566d50a58abf6f6ffd492b8674c320cca5f22f77e135118977e1134dcab853ff910ca924d8ed2df438bc5afe537a1bfdf79857aaee373a225d46c","name":"Screenshot 2026-05-16 at 2@1.49.53 PM.png","type":"image/png","lastModified":1778914227987.71,"size":512224},{"id":"a49f5f3ecba566d50a58abf6f6ffd492b8674c320cca5f22f77e135118977e1134dcab853ff910ca924d8ed2df438bc5afe537a1bfdf79857aaee373a225d46c","href":"https://static.observableusercontent.com/files/a49f5f3ecba566d50a58abf6f6ffd492b8674c320cca5f22f77e135118977e1134dcab853ff910ca924d8ed2df438bc5afe537a1bfdf79857aaee373a225d46c","name":"Screenshot 2026-05-16 at 2.49.53 PM.png","type":"image/png","lastModified":1778914212942.274,"size":512224}] 2f:{"id":"44a45a75e6c2a32f","slug":null,"title":"Coding Journey","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-04-26T07:43:23.100Z","update_time":"$D2026-09-30T13:35:25.891Z","view_time":null,"first_public_time":"$D2026-04-27T03:17:24.131Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"97db974a0b88bc30","login":"stevenzhou01","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1e2dd4f7120a4e62cca461b2d703afd96e08ebd45e344b3a342ca62b0cfd87e2","tier":"starter_2024"},"version":299,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f37ed0ff88be839d","login":"stevenzhou01","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1e2dd4f7120a4e62cca461b2d703afd96e08ebd45e344b3a342ca62b0cfd87e2","tier":null}],"members":[{"type":"individual","id":"f37ed0ff88be839d","login":"stevenzhou01","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1e2dd4f7120a4e62cca461b2d703afd96e08ebd45e344b3a342ca62b0cfd87e2","tier":null,"role":"editor"},{"type":"team","id":"97db974a0b88bc30","login":"stevenzhou01","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1e2dd4f7120a4e62cca461b2d703afd96e08ebd45e344b3a342ca62b0cfd87e2","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Coding Journey","cells":[{"id":0,"value":"# Coding Journey","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"Going over the Nature of Code by Daniel Shiffman","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"### Autonomous Agents (Sept 30)\n

\n** 1. Autonomous Steering Agents Introduction **
\n- An autonomous agent has a limited ability to perceive environment.
\n- An autonomous agent processes the information from its environment and calculates an action.
\n- An autonomous agent has no leader.
\n

\nReference: Steering Behaviors for Autonomous Characters by Craig Reynolds
\n- Action Selection: strategy, goals, planning
\n- Steering: path determination
\n- Locomotion: animation, articulation (how it moves, shapes)
\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"