See the Pen
Pursuit of PI by jake (@jak_e)
on CodePen.
Tappen / Klicken zum Bildschirmskalieren!
Cooles Game!
Pursuit of Pi
Apreggio
See the Pen
Musical Chord Progression Arpeggiator by jake (@jak_e)
on CodePen.
Tappen / Klicken zum Bildschirmskalieren!
A quick way to sketch out musical chord progressions.
uses my Scale Generator and Arpeggio Pattern Generator and the lovely Tone.js.
I’ve started collecting my musical composition stuff in this collection.
I also made a few videos as an intro to using Tone.js on CodePen and put them on YouTube.
– Jake
SongSeeds
See the Pen
Seeded Procedural Music Generator by jake (@jak_e)
on CodePen.
Tappen / Klicken zum Bildschirmskalieren!
Folgendes wird nach Eingabe eine unendliche Taktabfolge aus dem eingetippten”Seed” erstellen.
Prozedurale Erstellung versichert das der jeweilige ”Song” durch eingabe seines gleichbleibenden ”Seeds” wiederholt werden kann
Prozedere: 1.) Willkürlich auf Tastatur schlagen. 2.) Ladeschaltfläche verwenden.
3.) Listen & repeat.
,,
Generate interesting radial patterns with randomized parameters, or create your own shape. Built with webGL and Dat.GUI.
More information on the control panel values:
The numerator, denominator, and panel values are GLSL fragments that are compiled directly into the webGL program. The tokens in these expressions are the variables in the webGL code – the three chosen colors (col1, col2, col3) plus four shapes calculated from those colors (s1, s2, s3, s4) – which are then combined in an arithmetic expression along the lines of (numerator/denominator)*panel to produce a result. For these values, any valid GLSL expression or function is allowed, such as sqrt(s1+col2) + cos(s4).”
– Jake
Patterns
See the Pen
Radial Patternizr (click for new pattern) by Joshua Dzombic (@Killacorp)
on CodePen.
Tappen / Klicken zum Bildschirmskalieren!
Text des Schöpfers:
,,
Generate interesting radial patterns with randomized parameters, or create your own shape. Built with webGL and Dat.GUI.
More information on the control panel values:
The numerator, denominator, and panel values are GLSL fragments that are compiled directly into the webGL program. The tokens in these expressions are the variables in the webGL code – the three chosen colors (col1, col2, col3) plus four shapes calculated from those colors (s1, s2, s3, s4) – which are then combined in an arithmetic expression along the lines of (numerator/denominator)*panel to produce a result. For these values, any valid GLSL expression or function is allowed, such as sqrt(s1+col2) + cos(s4).”
– Scott Weaver
SCRTCH’N
See the Pen
Realtime scratching DJ turntable by pimskie (@pimskie)
on CodePen.
Tappen / Klicken zum Bildschirmskalieren!
Text des Schöpfers:
,,
We all seen turntables on which you can scratch. But when you do, a “scratch-effect.mp3” simply plays.
This is a realtime interactive turntable on which you can scratch. Drag it fast, drag it slow, back and forth. No “scratch.mp3” used as sound effect 💪🏻
All with the mighty power of the web Audio API 💖 Just press “Power” and give it a spin! 🤘🏻
Works best in Chrome.
For a more advanced (WIP) version: https://pimskie.dev/turntable/ including: – cue points – cross fading – tempo”
– Pimskie
Theremini
See the Pen
Musical Theremin by Joshua Dzombic (@Killacorp)
on CodePen.
Tappen / Klicken zum Bildschirmskalieren!
Ein Bootleg von: https://www.femurdesign.com/theremin/ Drückt da mal auf den Knopf hier:
Sonst habt ihr da keine usability. ;o
Basicdrum
See the Pen
Percussion by Joshua Dzombic (@Killacorp)
on CodePen.
Tappen / Klicken zum Bildschirmskalieren!
Copyright (c) 2025 by Landon Schropp (https://codepen.io/LandonSchropp/pen/NWgXva) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.