Creative Coding with Claude 3.5 Sonnet Artifacts and p5.js
What are Artifacts? I asked Sonnet itself.
You can upload charts and ask it to modify. It will modify the charts and render it in the window itself. It supports basic web dev rendering - HTML, CSS, Javascript, React and Tailwind. Also supports Typescript (it manages the dependencies which are hidden at this point of time)
You can render a lot of things in the window itself. It's an excellent UX choice. It separates the flow for code and chat and you can iterate between versions. You can essentially write code, render the program in the UI, see results in real time and then iterate further.
I made a bunch of creative coding demos with help of html, css and p5.js. Currently, Artifacts doesn't support downloading libraries, they have a preset of dependencies. So you can't download libraries like p5.js (creative coding, animation), cannon.js (lightweight 3D physics engine), d3.js (charts, networks) or three.js (3D).
The simple trick here is to ask Claude to use CDNs.
I cooked up a bunch of visualizations pretty easily. First up, the A* visualization with help of p5.js. By the way, if you want to learn more about p5.js, check out The Coding Train.
A* search visualization using claude sonnet 3.5 via artefacts. lets gooo pic.twitter.com/ljIvdZSAIT
— sankalp (@dejavucoder) June 21, 2024
The series of prompts I used
Let's code a grid and then A* search algorithm using p5.js. Make it purple and white.
render please # comment: It was not using CDN yet
You totally can. just write it in html css js and use p5js CDN
This is great. can you make the grid bigger. also the squares bigger. Add a button to restart the animation.
I made a simple vertical scrolling portfolio page with some 3D network like animations with help of three dot js
one advantage of being unemployed rn is i can play with new models lol. this time i tried making a simple portfolio page for sam alternativeman. i am never writing frontend code again for my side projects. pic.twitter.com/MnW0tHpqPD
— sankalp (@dejavucoder) June 21, 2024
Prompts in sequence
Let's make a threejs 3d website with animations that move around when you scroll down. it's about a machine learning researcher named sam alternativeman who worked at openai and anthropic. keep elegant, modern looking text. individual sections show up when you scroll down. one matrix / neural network like yellow color object in space like background present.
where is the animation dude. where is the space like background. please use three js library
the neural network thing should also move around when we scroll down
can we make the text bigger. also i can't still see more than one objects for the later sections.
maybe you could add different colored neural network object for later sections too. like purple?
i still can't see the blue and purple neural nets. also for openai, add text he invented the love is all you need paper.
Someone made a solar system with cannon js and three dot js
claude 3.5 sonnet's coding abilities are insane...
— João Montenegro (@JohnMontenegro) June 20, 2024
just made a threejs+cannonjs 3d solar system with physics and collisions in single conversation.
☀️🪐🤯 pic.twitter.com/WJkHDP9vPK
I liked this musical instrument demo too
5) Musical instruments pic.twitter.com/GK1WpeFCG9
— Alex Albert (@alexalbert__) June 21, 2024