28:null 29:["$","title",null,{"children":"Learning Flowfield 1: Tutorial 101 | Gordon Tu | Observable"}] 2e:T458,flowFieldParticle = { function roundAbs(x) { return Math.floor(Math.abs(x)); } const context = DOM.context2d(width, height); let particle = new Particle(); let flowField = new Array(columns).fill(1); let noiseZ = 0.004; // while (true) { // For each column for (let column = 0; column < columns; column++) { flowField[column] = new Array(rows).fill(1); // For each row for (let row = 0; row < rows; row++) { let angle = n.simplex3(column / 50, row / 50, noiseZ) * Math.PI * 2; // a random direction let length = n.simplex3( column / 100 + 40000, row / 100 + 40000, noiseZ ); flowField[column][row] = [angle, length]; } } context.save(); let acc = flowField[roundAbs(particle.position.x / size)][ roundAbs(particle.position.y / size) ]; // console.log(acc); // acc is going one direction, but it can go out of bound, where there is no acceleration. particle.drivenByForce(context, ...acc); noiseZ += 0.004; yield context.canvas; // } }2f:T443,flowFieldParticleWithBound = { function roundAbs(x) { return Math.floor(Math.abs(x)); } const context = DOM.context2d(width, height); let particle = new Particle(); let flowField = new Array(columns).fill(1); let noiseZ = 0.004; while (true) { // For each column for (let column = 0; column < columns; column++) { flowField[column] = new Array(rows).fill(1); // For each row for (let row = 0; row < rows; row++) { let angle = n.simplex3(column / 50, row / 50, noiseZ) * Math.PI * 2; // a random direction let length = n.simplex3( column / 100 + 40000, row / 100 + 40000, noiseZ ); flowField[column][row] = [angle, length]; } } let acc = flowField[roundAbs(particle.position.x / size)][ roundAbs(particle.position.y / size) ]; // context.clearRect(0, 0, width, height); context.save(); particle.drivenByForce(context, ...acc); particle.goBackToField(); context.restore(); noiseZ += 0.004; yield context.canvas; } }30:[] 2c:{"id":"108373f068b0d335","slug":null,"title":"Learning Flowfield 1: Tutorial 101","thumbnail":"47448870bb1666ec8af191fb39d8e7ee818d8cdf6fb1d276ac92e4a2d9d8e2f2","access_level":"public","create_time":"$D2023-02-24T20:54:04.233Z","update_time":"$D2023-03-04T20:18:34.170Z","view_time":null,"first_public_time":"$D2023-02-24T20:54:04.233Z","has_unpublished_edits":null,"fork":{"id":"7a0980291ec2d753","slug":"interactive-html-canvas","title":"Interactive HTML Canvas","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"95a475743860b9ed","login":"tututwo","name":"Gordon Tu","avatar_url":"https://avatars-next.observableusercontent.com/4ac96dec3c5f9a5db3ebff1df2ae0966ce479368ab735e84e62a4b12da898290","tier":"starter_2024"},"version":581,"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":"Learning Flowfield 1: Tutorial 101","cells":[{"id":0,"value":"# Learning Flowfield 1: Tutorial 101","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"## Apply field vector as acceleration/force to object","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"**Essentially, it's a line, but rotated.** \n\nTo draw a line, you need *length*. To rotate, you need *angle*\n\nIn the example below, we rotate the whole canvas and drew a line","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"canvas = { \n const context = DOM.context2d(width, height);\n\n context.translate(width/2, height/2)\n context.rotate(Math.PI/4)\n\n context.strokeStyle = \"black\"\n \n context.beginPath()\n context.moveTo(0,0)\n context.lineTo(0, height/4)\n context.stroke()\n \n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"## Let's draw a grid of rotated lines\n\nUsing for loop, we first loop through `columns`(defined at the bottom of the page), to create certain number of columns, and then for each column, we loop through `rows` to create certain number of rows","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"grid = {\n const context = DOM.context2d(width, height);\n\n // For each column\n for (let column = 0; column < columns; column++) {\n // For each row\n for (let row = 0; row < rows; row++) {\n context.save();\n // translate to xxx column, xxx row\n context.translate(size * (column - 1), size * (row - 1));\n context.rotate(Math.PI / 4);\n\n context.strokeStyle = \"black\";\n\n context.beginPath();\n context.moveTo(0, 0);\n context.lineTo(0, height / 40);\n context.stroke();\n context.restore();\n }\n }\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"## Now I want the line to rotate around in *some* way, and change its length in *some* way.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":510,"value":"* To change rotation, we change the value in `context.rotate(angle)`\n* To change length, we change the value in `context.lineTo(0, length)`\n* To change the values in a random but continuous/organic way, we can replace the value with **noise**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":484,"value":"## NOISE ALTERT!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":527,"value":"

sin() is a function. The y value also grows smoothly along with increment of x. Such functions repeats itself at every 2π, periodically and predicably.
Now imagine, a function whose y value also grows smoothly along with increment of x, but just does not repeats itself. There is no period or predicability. A random trigonometry function

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"flowField = {\n const context = DOM.context2d(width, height);\n let noiseZ = 0;\n\n while (true) {\n context.fillStyle = \"white\";\n context.fillRect(0, 0, width, height);\n // For each column\n for (let column = 0; column < columns; column++) {\n // For each row\n for (let row = 0; row < rows; row++) {\n let angle = n.simplex3(column / 50, row / 50, noiseZ) * Math.PI * 2; // a random direction\n let length = n.simplex3(\n column / 100 + 40000,\n row / 100 + 40000,\n noiseZ\n );\n context.save();\n // translate to xxx column, xxx row\n context.translate(size * (column - 1), size * (row - 1));\n\n context.rotate(angle);\n\n context.strokeStyle = \"black\";\n\n context.beginPath();\n context.moveTo(0, 0);\n context.lineTo(0, size * length * 1.5);\n context.stroke();\n context.restore();\n }\n }\n\n noiseZ += 0.004;\n yield context.canvas;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"## Nature of Code: Chapter 2\n\nI learned acceleration is a vector, and acceleration times mass = Force, F = ma. Now I can consider the lines with length and rotation **vectors**. Those vector lines can be velocity or acceleration. In this case, I want them to be accleration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"### What if...\n\nI throw a ball, with the mass of 1kg, from a starting position, (x,y), and a initial velocity, (x,y), into this **field of accelerations**, this particle with constant velocity then will be receiving different accelerations depending on where it's moving to, as if it dragged by **Force**. \n\n#### Here is What I do: \n1. Start the ball at some point on canvas. `(width/2, height/2)` in my case\n2. Remember the canvas is divided into columns and rows, with a rotated line in each grid?\n3. Check grid item the particle is closest to\n4. Apply the vector(rotated line) as the acceleration to the particle\n5. Repeat *Step 4*, but keep checking the particle position(*Step3*)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":232,"value":"### Step 1: Start the particle at some point on canvas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"Below is a **Particle**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"class Particle {\n constructor(params) {\n this.acceleration = p5Instance.createVector(0, 0);\n this.velocity = P5.Vector.random2D();\n this.position = p5Instance.createVector(width/2, height/2) // initial position\n }\n\n drivenByForce(context, x = 0, y = 0) {\n this.acceleration.add(p5Instance.createVector(x, y));\n this.velocity.add(this.acceleration);\n this.position.add(this.velocity);\n\n this.velocity.limit(2);\n\n this.acceleration.setMag(0);\n context.fillStyle = `hsla(50%, 50%, 50%, 1)`;\n context.fillRect(this.position.x, this.position.y, 8, 8);\n }\n\n goBackToField() {\n if (this.position.x > width) {\n this.position.x = 0;\n } else if (this.position.x < -size) {\n this.position.x = width - 1;\n }\n if (this.position.y > height) {\n this.position.y = 0;\n } else if (this.position.y < -size) {\n this.position.y = height - 1;\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"### Step 3: Check with grid item(consider the canvas is divided into grids by those rotated lines), the particle is closest to","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":239,"value":"columnRowIndex = {\n let particle = new Particle();\n function roundAbs(x) {\n return Math.floor(Math.abs(x));\n }\n let columnRowIndex = [\n roundAbs(particle.position.x/ size),\n roundAbs(particle.position.y / size)\n ];\n return columnRowIndex;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"

This is where Things start to differ

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":270,"value":"**We have the column and row index, but no data to be indexed!**\n\nWhat are we indexing?\n\n**The grid data**\n\n### Step 2. Ok, let's make a grid data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":284,"value":"flowFieldDataDemo = {\n let flowField = new Array(columns);\n let noiseZ = 0.004;\n\n for (let column = 0; column < columns; column++) {\n flowField[column] = new Array(rows)\n // For each row\n for (let row = 0; row < rows; row++) {\n let angle = n.simplex3(column / 50, row / 50, noiseZ) * Math.PI * 2; // a random direction\n let length = n.simplex3(column / 100 + 40000, row / 100 + 40000, noiseZ);\n flowField[column][row]=[angle, length]\n }\n }\n\n return flowField;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"{\n const [columnIndex, rowIndex] = columnRowIndex\n\n return flowFieldDataDemo[columnIndex][rowIndex]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"When we pass in the `columnRowIndex` generated by the current particle position, we get the vector(acceleration) of the grid the particle is in","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":415,"value":"*Uncomment the while true and check the chart*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":418,"value":"**acc can go out of bound, where there is no acceleration. Then acc is undefined**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":317,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"### Step 3. Let's put it back","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":431,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"size = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"columns = Math.floor(width / size) + 1;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"rows = Math.floor(height / size) + 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"n = new noise.Noise(Math.random())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"noise = require(\"https://bundle.run/noisejs@2.1.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"# Library","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":177,"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":175,"value":"p5Instance = new P5()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"# Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":219,"value":" * https://tylerxhobbs.com/essays/2020/flow-fields\n * https://codepen.io/DonKarlssonSan/post/particles-in-simplex-noise-flow-field\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2d:"$2c:body"