Loading video...

Video Failed to Load

Go Home

i made a website that turns music into geometric patterns, using midi data as input to threejs

measure_plan's profile picture

AA

27,521 subscribers

61,540 views • 3 months ago •via X (Twitter)

ArtsMusicScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

i made a website that turns sound into cymatic star patterns, using midi data as input to threejs
0:34

i made a website that turns sound into cymatic star patterns, using midi data as input to threejs

AA

162,880 views • 2 months ago

shaping terrain with soundwaves made an audioreactive app that turns music into terrain, using midi data as input to a threejs scene
0:36

shaping terrain with soundwaves made an audioreactive app that turns music into terrain, using midi data as input to a threejs scene

AA

28,879 views • 1 month ago

i made a tool that visualizes sound as a 3D data structure notes are placed based on the circle of fifths and relative volume built with threejs and web midi api
0:41

i made a tool that visualizes sound as a 3D data structure notes are placed based on the circle of fifths and relative volume built with threejs and web midi api

AA

32,894 views • 3 months ago

made a simulator that turns sound into chladni patterns
0:22

made a simulator that turns sound into chladni patterns

AA

17,390 views • 3 months ago

i made a website that turns your microphone into a paint brush
0:27

i made a website that turns your microphone into a paint brush

AA

87,034 views • 3 months ago

i connected my piano to threejs and made an audioreactive midi visualizer
0:21

i connected my piano to threejs and made an audioreactive midi visualizer

AA

470,151 views • 8 months ago

i made a website that simulates chromesthesia, turning music into brush strokes
0:29

i made a website that simulates chromesthesia, turning music into brush strokes

AA

49,539 views • 3 months ago

I’ve started finger drumming as a new hobby, so I created a visualizer for it with Unity. It was made without coding—just using VFX Graph and Input System with a MIDI extension.
0:20

I’ve started finger drumming as a new hobby, so I created a visualizer for it with Unity. It was made without coding—just using VFX Graph and Input System with a MIDI extension.

Keijiro Takahashi

73,286 views • 1 year ago

i made a pendulum simulator 16 pendulums oscillate through wave patterns making music along the way built with kimi k2.6, threejs, tonejs you are getting very sleepy ..
0:53

i made a pendulum simulator 16 pendulums oscillate through wave patterns making music along the way built with kimi k2.6, threejs, tonejs you are getting very sleepy ..

AA

66,305 views • 5 months ago

using ERA5 50 hPa data to drive particles around a globe in a threejs compute shader
0:22

using ERA5 50 hPa data to drive particles around a globe in a threejs compute shader

Codetard

82,084 views • 1 year ago

I made a promo video for my coffee app/website — made using a combination of Ideogram, Runway and Pika with music from Google's MusicFX. The website is:
0:22

I made a promo video for my coffee app/website — made using a combination of Ideogram, Runway and Pika with music from Google's MusicFX. The website is:

Ryan Morrison

18,908 views • 2 years ago

Built a web app with AI using Three.js + WebGL that turns motion, mechanics and symmetry into an interactive 3D experience featuring a gear mechanism, gyroscope, turbine, coil and geometric structures. Workflow ↓
0:24

Built a web app with AI using Three.js + WebGL that turns motion, mechanics and symmetry into an interactive 3D experience featuring a gear mechanism, gyroscope, turbine, coil and geometric structures. Workflow ↓

Techartist

24,529 views • 2 months ago

At Reclaim, we focus on getting access to verified data from any website using zkTLS ( web proofs ) We’ve now made a Base Starter Kit so that Based Builders can access previously unavailable data points and head into prod in 10 minutes! Get started:
6:02

At Reclaim, we focus on getting access to verified data from any website using zkTLS ( web proofs ) We’ve now made a Base Starter Kit so that Based Builders can access previously unavailable data points and head into prod in 10 minutes! Get started:

Reclaim Protocol

15,357 views • 1 year ago

Excited to announce A website that turns any website into a get API with /extract endpoint. Data on the web has never been more accessible! Thanks to , for starting this fabulous trend. Check out his GitHub repo below!
0:31

Excited to announce A website that turns any website into a get API with /extract endpoint. Data on the web has never been more accessible! Thanks to , for starting this fabulous trend. Check out his GitHub repo below!

Caleb Peffer (Hiring!)

235,143 views • 1 year ago

I made a lenticular printing style website レンチキュラー風ウェブサイトできた #threejs #webgl #webdesign
0:26

I made a lenticular printing style website レンチキュラー風ウェブサイトできた #threejs #webgl #webdesign

Kitasenju Design

879,311 views • 3 years ago

ok here it is - my first Opus 5.5 vibecoded threejs 3D experience my God!! Opus is creative!! I made a road that forgets which way is down. It folds 90° up a yellow wall, runs upside down across a ceiling, and turns into sheet music: steer through the notes to play each street's melody. Watercolour. Ink. A radio on the roof. #vibejam
0:51

ok here it is - my first Opus 5.5 vibecoded threejs 3D experience my God!! Opus is creative!! I made a road that forgets which way is down. It folds 90° up a yellow wall, runs upside down across a ceiling, and turns into sheet music: steer through the notes to play each street's melody. Watercolour. Ink. A radio on the roof. #vibejam

Chetan Ankola

67,000 views • 9 days ago

i made a 3D stained glass type design tool it renders live in the browser using threejs and webgl shaders
0:30

i made a 3D stained glass type design tool it renders live in the browser using threejs and webgl shaders

AA

47,343 views • 5 months ago

Quick passion demo using threejs spark and World Labs to make this mock up of a conservationist website with a really satisfying mouseover effect. I want to see more technology that helps/honors nature. Play around with it/get the code ⬇️
0:30

Quick passion demo using threejs spark and World Labs to make this mock up of a conservationist website with a really satisfying mouseover effect. I want to see more technology that helps/honors nature. Play around with it/get the code ⬇️

Nicholas H

10,117 views • 5 months ago

𝗛𝗼𝘄 𝗖𝗼𝗻𝘃𝗼𝗹𝘂𝘁𝗶𝗼𝗻𝗮𝗹 𝗡𝗲𝘂𝗿𝗮𝗹 𝗡𝗲𝘁𝘄𝗼𝗿𝗸𝘀 𝗪𝗼𝗿𝗸 A Convolutional Neural Network (CNN) works by using layers to process images: • Convolutional layers scan the input image using filters to detect features like edges, textures, and patterns.👇
0:59

𝗛𝗼𝘄 𝗖𝗼𝗻𝘃𝗼𝗹𝘂𝘁𝗶𝗼𝗻𝗮𝗹 𝗡𝗲𝘂𝗿𝗮𝗹 𝗡𝗲𝘁𝘄𝗼𝗿𝗸𝘀 𝗪𝗼𝗿𝗸 A Convolutional Neural Network (CNN) works by using layers to process images: • Convolutional layers scan the input image using filters to detect features like edges, textures, and patterns.👇

𝗿𝗮𝗺𝗮𝗸𝗿𝘂𝘀𝗵𝗻𝗮— 𝗲/𝗮𝗰𝗰

41,799 views • 1 year ago