28:null 29:["$","title",null,{"children":"Learn Flowfield 3: Coding Train Flow Field | Gordon Tu | Observable"}] 2e:T400,class Ptc { constructor(params) { this.acceleration = p5Instance.createVector(0, 0); this.velocity = P5.Vector.random2D(); this.position = p5Instance.createVector( Math.random() * width, Math.random() * height ); // initial position } update() { this.velocity.add(this.acceleration); this.position.add(this.velocity); this.velocity.limit(2); // so that at each frame, the original acceleration gets to added with newly queried acceleration this.acceleration.setMag(0); } applyForce(force) { this.acceleration.add(force); } show(context) { context.fillStyle = "black"; context.fillRect(this.position.x, this.position.y, 3, 3); } goBackToField() { if (this.position.x > width) { this.position.x = 0; } else if (this.position.x < -size) { this.position.x = width - 1; } if (this.position.y > height) { this.position.y = 0; } else if (this.position.y < -size) { this.position.y = height - 1; } } }2f:T6e5,canva = { let flowField = new Array(columns); const context = DOM.context2d(width, height); let noiseZ = 0; let particles = []; for (let i = 0; i < num_particle; i++) { particles.push(new Particle()); } particles[0] = new Particle(); let steps = 0; while (steps < num_steps) { steps++; // context.fillStyle = "white"; // context.fillRect(0, 0, width, height); // for (let col = 0; col < columns; col++) { // // for each column // flowField[col] = new Array(rows); // for (let row = 0; row < rows; row++) { // // let angle = p5Instance.noise(col, row) * Math.PI * 2; // // flowField[col][row] = [angle, step_length]; // //p5.js // let angle = // p5Instance.noise( // col / noise_step_magnitude, // row / noise_step_magnitude, // noiseZ // ) * // Math.PI * // 2; // let angleVector = P5.Vector.fromAngle(angle); // // let angleVector = P5.Vector.fromAngle(Math.PI / 4); // // let angleVector = P5.Vector.fromAngle(Math.sin(noiseZ) + Math.sin( col)); // context.save(); // context.translate(col * size, row * size); // context.rotate(angleVector.heading()); // context.beginPath(); // context.moveTo(0, 0); // context.lineTo(0, size * 0.8); // context.stroke(); // context.restore(); // } // } context.globalCompositeOperation = 'lighter'; for (let i = 0; i < particles.length; i++) { particles[i].follow(); particles[i].update(); particles[i].show(context); particles[i].goBackToField(); } noiseZ += 0.0; yield Promises.delay(30, context.canvas); } }30:T7f5,class Particle { constructor(params) { this.acceleration = p5Instance.createVector(0, 0); this.velocity = P5.Vector.random2D(); this.position = p5Instance.createVector( Math.random() * width, Math.random() * height ); // initial position this.colRowIndex = [0, 0]; this.color = ["#ffa822", "#134e6f", "#ff6150", "#1ac0c6", "#dee0e6"]; } update() { this.velocity.add(this.acceleration); this.position.add(this.velocity); this.velocity.limit(max_speed); // so that at each frame, the original acceleration gets to added with newly queried acceleration this.acceleration.setMag(0); } applyForce(force) { this.acceleration.add(force); } follow() { this.applyForce( flowfield[roundAbs(this.position.x / size)][ roundAbs(this.position.y / size) ] ); // console.log( // flowfield[roundAbs(this.position.y / size)] // ); } show(context) { context.fillStyle = this.color[randInt(0, 4)]; context.fillRect(this.position.x, this.position.y, 3, 3); } // drivenByForce(context) { // let angle = this.colRowIndex[0]; // // add the force to // this.acceleration.add( // p5Instance.createVector( // step_length * Math.cos(angle), // step_length * Math.sin(angle) // ) // ); // this.velocity.add(this.acceleration); // this.position.add(this.velocity); // this.velocity.limit(2); // // so that at each frame, the original acceleration gets to added with newly queried acceleration // this.acceleration.setMag(0); // context.fillStyle = `hsla(50%, 50%, 50%, 1)`; // context.fillRect(this.position.x, this.position.y, 2, 2); // } goBackToField() { if (this.position.x > width) { this.position.x = 0; } else if (this.position.x < -size) { this.position.x = width - 1; } if (this.position.y > height) { this.position.y = 0; } else if (this.position.y < -size) { this.position.y = height - 1; } } }31:[] 2c:{"id":"76b6232a5a64a0c1","slug":null,"title":"Learn Flowfield 3: Coding Train Flow Field","thumbnail":"9a118eccee1911806af8f734e3629b185cbbf981695e46c971c0af440d17436a","access_level":"public","create_time":"$D2023-03-04T00:44:07.565Z","update_time":"$D2023-03-04T19:35:55.181Z","view_time":null,"first_public_time":"$D2023-03-04T00:44:07.565Z","has_unpublished_edits":null,"fork":{"id":"b057aab34a76bc7e","slug":null,"title":"Learn Flowfield 2: practice run","owner":{"id":"95a475743860b9ed","login":"tututwo","name":"Gordon Tu"}},"stars":1,"starred":false,"owner":{"type":"team","id":"95a475743860b9ed","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":"starter_2024"},"version":388,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9589da0a366d19b2","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":null}],"members":[{"type":"individual","id":"9589da0a366d19b2","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"4ca549183d331d0c","slug":"flow-field","title":"Flow Field Learning Journey","owner":{"id":"95a475743860b9ed","login":"tututwo","name":"Gordon Tu"}},"type":"notebook","body":{"titling":"auto","title":"Learn Flowfield 3: Coding Train Flow Field","cells":[{"id":0,"value":"# Learn Flowfield 3: Coding Train Flow Field","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"# Until 19:00 min","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"viewof noise_step_magnitude = Inputs.range([0, 1], { label: \"Noise Step Magnitude\", value: .2 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"viewof max_speed = Inputs.range([0, 10], { label: \"Max Speed\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"viewof step_length = Inputs.range([0, 200], { label: \"Max Force\", value: 0.5 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof num_steps = Inputs.range([10, 300], { label: \"Number of Steps\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"flowfield = {\n let flowField = new Array(columns);\n\n for (let col = 0; col < columns; col++) {\n // for each column\n flowField[col] = new Array(rows);\n for (let row = 0; row < rows; row++) {\n let angle =\n p5Instance.noise(\n col / noise_step_magnitude + 1000,\n row / noise_step_magnitude + 1000\n ) *\n Math.PI *\n 2;\n\n flowField[col][row] = [angle , step_length];\n }\n }\n\n return flowField;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"1. Create a grid of rotate vectors with different length","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"// canvas = {\n// const context = DOM.context2d(width, height);\n\n// let i = 0;\n// while (i < 10) {\n// i++;\n// console.log(1);\n// for (let num = 0; num < num_particle; num++) {\n// let particle = new Particle();\n// context.save();\n// particle.queryCurrentAngleViaCurrentColRowIndex(flowfield);\n// particle.drivenByForce(context);\n\n// particle.goBackToField();\n\n// context.restore();\n// }\n\n// yield context.canvas;\n// }\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"P5 = require('p5@1.6.0/lib/p5.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"p5Instance = new P5()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"randInt(0, 4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"# Utility","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"function roundAbs(x) {\n return Math.floor(Math.abs(x));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"import { randInt } from \"@makio135/utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"# Flow Field Metrics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"num_particle = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"size = 30 // the size of each grid","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"columns = Math.floor(width / size) + 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"rows = Math.floor(height / size) +1 ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2d:"$2c:body"