Скачать или смотреть AI-Coded Physics Simulation in JavaScript: Interactive 3D Blocks Demo with ChatGPT

In this video, I showcase a free interactive physics simulation entirely coded by ChatGPT-3 Mini High. Using the Cannon.js physics engine and Three.js for 3D rendering, this project highlights just how capable AI has become in generating working, functional JavaScript-based simulations.

The simulation includes orbit controls, dynamic block selection, customizable colors, cylinders with variable radii, and real-time collision handling—all without me writing a single line of code myself. It even came with a full HTML and CSS setup, plus a helpful overview section.

We walk through the code structure, its limitations (like lack of drag-and-drop), and areas for improvement like snapping elements or sound effects. I also discuss the process of writing a brief for AI-generated code and how surprisingly effective that approach has been. The simulation demonstrates real-time collisions and the memory footprint of each block, showing practical implications of scaling complexity.

Let me know what you’d add or improve—this could evolve into something pretty amazing.

Explore the simulation here:
https://bionichaos.com/Blox

The tools I develop are available on https://bionichaos.com

You can support my work on   / bionichaos  

You can join this channel to get access to perks:
   / @bionichaos  

#AIProgramming
#ChatGPT
#JavaScriptSimulation
#ThreeJS
#CannonJS
#PhysicsSimulation
#WebDevelopment
#AIProjects
#CodeWithAI
#OpenAI
#bionichaos
#Interactive3D
#AIDevelopment

0:00 Introduction to the ChatGPT-generated simulation
0:06 Overview of Cannon.js and Three.js integration
0:15 Using orbit controls and selecting blocks
0:24 Changing colors and selecting elements
0:31 Customizing cylinder properties
0:37 HTML and JavaScript overview
0:44 Using the simulation controls
1:00 Code limitations: no movement, only rotation
1:10 Element selection and rotation features
1:16 Simulation physics and collisions explained
1:25 Object placement and behavior issues
1:36 CSS was generated but not the focus
1:44 Developer brief and website availability
1:52 Effective use of prompts for code generation
2:00 LLMs generating code from briefs
2:08 AI limitations and unexpected results
2:16 Collision logic and block interference
2:24 Improving the developer brief
2:30 Optional features and AI decision-making
2:37 Giving AI flexibility in coding
2:45 Future plans for the simulation
2:54 Memory usage considerations
3:04 Physics validation and further improvements
3:17 Feedback request and improvement ideas
3:29 Interactivity and building capabilities
3:33 Snap-to-feature and future direction
3:42 Publishing and expanding the project
3:49 Adding sound effects and other features
4:00 Final thoughts and next steps