[{"data":1,"prerenderedAt":200},["ShallowReactive",2],{"embed-brownian-distribution":3},{"id":4,"title":5,"author":6,"body":9,"date":188,"description":189,"extension":190,"featured":191,"lastUpdated":188,"meta":192,"navigation":191,"path":193,"responsive":194,"seo":195,"stem":196,"tags":197,"thumbnail":198,"__hash__":199},"experiments\u002Fexperiments\u002Fbrownian-distribution.md","Basic Brownian distribution",[7,8],"andretchen0","alvarosabu",{"type":10,"value":11,"toc":179},"minimark",[12,29,34,41,69,73,76,96,100,103,146,150,176],[13,14,15,16,20,21,28],"p",{},"This experiment demonstrates ",[17,18,19],"strong",{},"spatial object distribution"," using a random walk algorithm inspired by ",[22,23,27],"a",{"href":24,"rel":25},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FBrownian_motion",[26],"nofollow","Brownian motion principles",". Rather than animating particles in motion, this visualization shows how objects can be positioned in 3D space using statistical patterns derived from random walk algorithms.",[30,31,33],"h3",{"id":32},"what-youll-see","What You'll See",[13,35,36,37,40],{},"The scene features ",[17,38,39],{},"2000 geometric objects"," (spheres, cubes, and pyramids) distributed throughout 3D space following a Brownian distribution pattern. Each object:",[42,43,44,51,57,63],"ul",{},[45,46,47,50],"li",{},[17,48,49],{},"Is positioned"," using a random walk algorithm that simulates particle displacement patterns",[45,52,53,56],{},[17,54,55],{},"Changes color on hover"," from the theme color to bright yellow",[45,58,59,62],{},[17,60,61],{},"Resets position"," when moving outside the boundary constraints",[45,64,65,68],{},[17,66,67],{},"Adapts to dark\u002Flight mode"," with appropriate color schemes",[30,70,72],{"id":71},"central-animation","Central Animation",[13,74,75],{},"At the center of the chaos, three geometric shapes (pyramid, cube, sphere) perform a synchronized dance:",[42,77,78,84,90],{},[45,79,80,83],{},[17,81,82],{},"Vertical oscillation"," using trigonometric functions",[45,85,86,89],{},[17,87,88],{},"Dynamic scaling"," that pulses with the animation",[45,91,92,95],{},[17,93,94],{},"Phase-shifted timing"," creating a wave-like effect",[30,97,99],{"id":98},"technical-implementation","Technical Implementation",[13,101,102],{},"The experiment showcases several advanced TresJS concepts:",[42,104,105,115,121,127,137],{},[45,106,107,110,111],{},[17,108,109],{},"Instanced Rendering",": Efficiently renders 2000 objects using ",[112,113,114],"code",{},"TresInstancedMesh",[45,116,117,120],{},[17,118,119],{},"Random Walk Distribution",": Implements spatial distribution using random walk patterns with boundary constraints",[45,122,123,126],{},[17,124,125],{},"Interactive Materials",": Hover effects using pointer events",[45,128,129,132,133,136],{},[17,130,131],{},"Loop Integration",": Smooth animations using ",[112,134,135],{},"useLoop"," composable",[45,138,139,142,143],{},[17,140,141],{},"Dark Mode Support",": Reactive color schemes using ",[112,144,145],{},"useDark",[30,147,149],{"id":148},"key-features","Key Features",[42,151,152,158,164,170],{},[45,153,154,157],{},[17,155,156],{},"Performance Optimized",": Uses Three.js instancing for smooth 60fps rendering",[45,159,160,163],{},[17,161,162],{},"Interactive",": Hover over any particle to see it highlight",[45,165,166,169],{},[17,167,168],{},"Responsive",": Adapts to different screen sizes and themes",[45,171,172,175],{},[17,173,174],{},"Statistically Accurate",": Implements random walk distribution patterns based on Brownian motion statistics",[13,177,178],{},"This visualization serves as both an educational tool for understanding random distributions and a performance benchmark for TresJS's capability to handle large numbers of interactive objects.",{"title":180,"searchDepth":181,"depth":181,"links":182},"",2,[183,185,186,187],{"id":32,"depth":184,"text":33},3,{"id":71,"depth":184,"text":72},{"id":98,"depth":184,"text":99},{"id":148,"depth":184,"text":149},"2025-01-01","Basic scene with grouping\u002Fparenting and Brownian distribution of instances","md",true,{},"\u002Fexperiments\u002Fbrownian-distribution",false,{"title":5,"description":189},"experiments\u002Fbrownian-distribution",[135],"\u002Fexperiments\u002Fbrownian-distribution.webp","Ed9V8W6Tu15lZa2BeTOR_TDkcEzL9de3hvU-kaP_XwI",1791549577845]