28:null 29:["$","title",null,{"children":"3D Flow Field First Try: Failed | Gordon Tu | Observable"}] 2e:T841,// Continuously updates { while (true) { for (let i = 0; i < particleCount; i++) { let indexedVector = flowfield[ Math.floor( particles.geometry.attributes.position.array[i * 3] / size0 ) ][ Math.floor( particles.geometry.attributes.position.array[i * 3 + 1] / size0 ) ][ Math.floor( particles.geometry.attributes.position.array[i * 3 + 2] / size0 ) ]; accelerationVector[i * 3] = indexedVector.x; accelerationVector[i * 3 + 1] = indexedVector.y; accelerationVector[i * 3 + 2] = indexedVector.z; } ////////////////////////////////////////////////////// //////Code below changes the positions, but as position grows, it can go out of bound// ////////////////////////////////////////////////////// // for (let i = 0; i < particleCount; i++) { // 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; // } // particles.geometry.attributes.velocity.array[i * 3] += // accelerationVector[i * 3]; // particles.geometry.attributes.velocity.array[i * 3 + 1] += // accelerationVector[i * 3 + 1]; // particles.geometry.attributes.velocity.array[i * 3 + 2] += // accelerationVector[i * 3 + 2]; // particles.geometry.attributes.position.array[i * 3] += // particles.geometry.attributes.velocity.array[i * 3]; // particles.geometry.attributes.position.array[i * 3 + 1] += // particles.geometry.attributes.velocity.array[i * 3 + 1]; // particles.geometry.attributes.position.array[i * 3 + 2] += // particles.geometry.attributes.velocity.array[i * 3 + 2]; // } cube.rotation.z += 0.01; renderer.render(scene, camera); yield particles.geometry.attributes.position.array[0]; } }2f:T5b4,particles = { const particleGeometry = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); for (let i = 0; i < particleCount; i++) { positions[i * 3] = random(0, 1) * size0 * columns; // x coordinate positions[i * 3 + 1] = random(0, 1) * size0 * rows; // y coordinate positions[i * 3 + 2] = random(0, 1) * size0 * depths; // z coordinate } const velocityVector = new Float32Array(particleCount * 3); for (let i = 0; i < particleCount; i++) { // position can be negative velocityVector[i * 3] = random(-1, 1); velocityVector[i * 3 + 1] = random(-1, 1); velocityVector[i * 3 + 2] = random(-1, 1); } particleGeometry.setAttribute( "position", new THREE.BufferAttribute(positions, 3) ); particleGeometry.setAttribute( "acceleration", new THREE.BufferAttribute(accelerationVector, 3) ); particleGeometry.setAttribute( "velocity", new THREE.BufferAttribute(velocityVector, 3) ); const particleMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.05 }); const shaderMaterial = new THREE.ShaderMaterial({ vertexShader: vertexShader, fragmentShader: fragmentShader, transparent: true, depthTest: false, depthWrite: false, blending: THREE.AdditiveBlending }); const particleSystem = new THREE.Points(particleGeometry, shaderMaterial); // return [accelerationVector, positions]; return particleSystem; }30:[] 2c:{"id":"0e2b3d69e44bac5e","slug":null,"title":"3D Flow Field First Try: Failed","thumbnail":"807efd63363f9c161b9fb34d8b33633acbc06d3eac524e4745105b83544249f1","access_level":"public","create_time":"$D2023-03-05T21:55:49.342Z","update_time":"$D2023-03-08T22:52:27.447Z","view_time":null,"first_public_time":"$D2023-03-05T21:55:49.342Z","has_unpublished_edits":null,"fork":{"id":"4d9b7665f00a916c","slug":"three-js","title":"Three.js","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":639,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"3D Flow Field First Try: Failed","cells":[{"id":242,"value":"# 3D Flow Field First Try: Failed\n

[Docs](https://threejs.org/docs/) | [Examples](https://threejs.org/examples/)

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"renderer.domElement","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"particleCount = 1000;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"accelerationVector = new Float32Array(particleCount * 3);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"{\n let a = [1,2,3,4]\n return a[5]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"size0 = .5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"# Flow Field ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":341,"value":"viewof step_strength = Inputs.range([0, 2], {\n label: \"Strength of Each Angle Vector\",\n value: 0.5,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"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":463,"value":"size = 30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"// function generateFlowfield(noiseZ = 0) {\nflowfield = {\n let noise4D = 0;\n let flow_Field = new Array(columns);\n for (let col = 0; col < columns; col++) {\n flow_Field[col] = new Array(rows);\n\n for (let row = 0; row < rows; row++) {\n flow_Field[col][row] = new Array(depths);\n for (let depth = 0; depth < depths; depth++) {\n let angleNoise =\n p5Instance.noise(\n col / noise_step_magnitude,\n row / noise_step_magnitude,\n depth / noise_step_magnitude,\n noise4D\n ) *\n Math.PI *\n 2;\n const angleVector = new THREE.Vector3().setFromSphericalCoords(\n step_strength,\n angleNoise,\n 0\n );\n flow_Field[col][row][depth] = angleVector;\n }\n }\n }\n return flow_Field;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"## Flow Field Parameter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":345,"value":"columns = Math.floor(width / size) + 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"rows = Math.floor(height / size ) + 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"depths =Math.floor(height / size ) + 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"{\n particles.geometry.attributes.position.needsUpdate = true;\n particles.geometry.attributes.acceleration.needsUpdate = true;\n particles.geometry.attributes.velocity.needsUpdate = true;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"vertexShader = `\n // attribute vec3 position;\n attribute vec3 acceleration;\n attribute vec3 velocity;\n varying vec3 vColor;\n\n float size0 = 0.05;\n void main() {\n\n vec3 normalizedToIndex = position / size0;\n \n // vec3 updatedVelocity = velocity + acceleration;\n // vec3 updatedPosition = position + updatedVelocity;\n \n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n gl_PointSize = 10.0;\n vColor = vec3(0.8705882352941177,0.8784313725490196,0.9019607843137255);\n }\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"fragmentShader = `\n varying vec3 vColor;\n void main() {\n gl_FragColor = vec4(vec3(.5), 1.0);\n }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"cube = {\n const material = new THREE.MeshNormalMaterial();\n const geometry = new THREE.BoxGeometry(1, 1, 1);\n const cube = new THREE.Mesh(geometry, material);\n return cube;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x001b42);\n scene.add(cube);\n scene.add(particles);\n return scene;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"camera = {\n const fov = 45;\n const aspect = width / height;\n const near = 1;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(2, 2, -2)\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({antialias: true});\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n const controls = new OrbitControls(camera, renderer.domElement);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"# Utility","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":470,"value":"import {random} from \"@makio135/utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"function hexToRgb(hex) {\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? {\n r: parseInt(result[1], 16) / 255,\n g: parseInt(result[2], 16) / 255,\n b: parseInt(result[3], 16) / 255\n }\n : null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.150.0/build/three.min.js\");\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"OBC = import(\"https://unpkg.com/three@0.150.0/examples/jsm/controls/OrbitControls.js?module\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"OrbitControls = OBC.OrbitControls ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"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":357,"value":"p5Instance = new P5()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2d:"$2c:body"