As a firm believer in the philosophy that the best way to truly understand something is through hands-on experience, I’ve embarked on a series of experiments to explore the capabilities of artificial intelligence tools. Here, you’ll find details of a few AI projects I’ve undertaken recently and what I have learned about the potential of this transformative technology.
| Using ChatGPT4.0, I asked the tool to create a javascript version of hangman, however I asked it to replace the hangman imagery with a sci-fi theme. ChatGPT picked the theme of an alien invasion. The coding took five iterations to get something functional, with a majority of the issues centering around an unusable UI. The work around for this was to be very specific in the prompt regarding what I expected. For example, Including within the prompt to ”the screen should update dynamically as the user plays to indicate which letters have been guessed previously “. The graphical representation of the alien invasion missed the mark a bit, but I thought it was funny and did not ask the AI to correct. | Demo |
| Using ChatGPT3.5, I asked the the tool to create a music theory reference website to allow users to quickly calculate first inversion chord spelling of popular chord progressions (i.e. I IV, V) using various keys (i.e. A, C, G#) and mode/scales (i.e. Major, Minor, Dorian). Through ~15 iterations I was able to get the AI to generate a functional and “clean” interface for this reference tool, however the accuracy was way off. Using ChatGPT 4.0 I was able to create a much more reliable reference page in only 4 iterations. The only thing I needed to manually correct on my own was an alignment of the modal windows. In the GPT only version the piano keys were spaced awkwardly. | Demo |
| I was speaking with a eurorack module manufacturer when an idea for a new module occured to me. As I was explaining the concept to him, I wondered if it would be possible to use ChatGPT 4.0 to rapidly build a prototype. After many failed attempts, this prompt proved successful. “Could you create a single file website utilizing HTML, CSS, javascript, and Web Audio API to create an interactive tool that to demonstrate subtractive synthesis? Here are the elements I would like for you to include: – An 8 step sequencer where the user can set the pitch, velocity, and turn on or off each step individually. The pitch value should be set via a drop down where the values correspond to pitches on a piano with a two olive range. The velocity should be controlled with a slider and should include a label indicating the current set value. The sequencer should be across the top of the page and be as wide as possible. – Three oscillators. The user should be able to set the wave form (sine, square, triangle, sawtooth) and the volume independently for each oscillator. The user can turn the volume level to zero if they don’t want to hear a particular oscillator. These settings should be grouped together in a box somewhere below the step sequencer. – There should be a slider for setting the tempo. This should update a label which displays the tempo setting in BPM. The range for this slider should be between 60 BPM and 300 BPM. This setting should be in it’s own box somewhere below the step sequencer. – In a box at the very bottom of the page should be five buttons, “start” to start the sequencer. “Stop” to stop the sequencer. “Randomize” to randomize all possible settings, a “reset” which both stops the sequencer and resets all settings to their default settings, and a help button which opens a modal window providing instructions on how to use this website. – The title of the page should be “simple Euphonica Demo” – All settings, such as sliders, should have corresponding labels to indicate the current setting. – The site should have a clean modern look, with different colors for each section. -I want you to generate a fully functional website with all the features listed above. Do not leave any javascript or other code unfinished. “ | Demo |
| Using ChatGPT 4.1 Using only HTML, CSS and JavaScript I want you to create an interactive website consisting of a square divided up into 50 smaller equally sized squares. Initially all the squares are white with a black border, but as the user’s curser rolls over a square, it fades to a dark blue over 1 second. All adjacent squares to the dark blue square fade to a lighter blue color which is 20% lighter than the dark blue. When the user’s curser moves out of a square it fades back to white over 1 second of time, as does the immediately adjacent squares. please modify this code such that the fade in happens in 3ms and the fade out happens in 2 seconds. also make the squares adjacent to the light blue squares, also blue but 50% lighter one more change, if the users curser has not moved for 4 seconds, then all the blues fade back to white. on the right-side of the grid, add three buttons, labeled blue, green, and red. When the user clicks one of the colors, change the CSS so that the square the curser is overing over is the new colors and the adjust squares are lighter by the same percentage. the Blue you are using now is the default selected when the page loads. ok add 3 more buttons on the right for more color options please update the code so that a sound is played for each square as it fades back to white. the tone of the sound should be change based on the color and the position of the square relative to the top of the screen. Higher tones for the top and lower tones at the bottom. All tones should sound harmonious with each other. please update the code so that a sound is instead played immediately when the curser enters a square. It should sound like a pleasant bell that fades out in volume over 1 second. The note played should be determined by the position of the square relative to the top left. The tone of the bell sounds should be reflective of the color. If the user moves the curser out of a square before the 1 second fade out, the sound should still play for the full 1 second. Even if the sound for the next square starts. two changes. 1. when the page first loads, there is no sound. The sound only starts when you select a color, but it should start right away. Please fix. 2. I want the sound tone to be different per color. For example the bell sound for blue. a beep tone for green, a buzz for red, etc I dont understand the problem. When the page first loads, there is no sound. but if I select a color it then plays a sound. I want the sound to play by default on load as if the user had selected the blue button. Can you fix? To which the AI replied “Yes! The problem is that browsers (especially Chrome and Safari) block audio playback until the user interacts with the page (like a click or keypress) for security/privacy reasons. This is not something you can bypass with code alone. How to fix: You need to wait for a user gesture (like a click anywhere) before enabling sound.” | Demo |
| Using ChatGPT 4.1 Utilizing only HTML, CSS, and Javascript in a single file, create a website to visually demonstrate euclidean rhythms. You should include 4 tone layers where the user can change the number of divisions and BPM of each tone layer. The 4 tone layers should be “kick” , “snare”, “tom”, “hi-hat”. Include a button for starting and stopping as well as a way to set the master BPM. In the layer boxes, please replace the BPM dropdown with a rotation dropdown which allows the user to rotate the pattern so that it’s “start” position is offset. Next to the start button add a randomizer button that randomizes all settings except for the master BPM | Demo |