diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 53 |
1 files changed, 35 insertions, 18 deletions
@@ -16,23 +16,40 @@ </svg> ?</p> <!-- TODO : Fast travel, SOUNDS --> - <h1>MIDI art, and other forms of audio GFX</h1> - <h2>MIDI notes pixel art</h2> - <h3>MIDI ???</h3> - <div class="right-container"> - <p>So there's this thing called MIDI, which stands for Musical Instrument Digital Interface. I won't get into any technical details, you just need to know that it's a way to make sound with a computer. You can usually write musical pieces with specific softwares called <abbr title="Digital Audio Workstation">DAW</abbr>s.</p> + <div id="content"> + <h1>MIDI art, and other forms of audio GFX</h1> + <div class="right-container"> + <h2>MIDI notes pixel art</h2> + <h3>MIDI ???</h3> + <p>So there's this thing called MIDI, which stands for Musical Instrument Digital Interface. I won't get into any technical details, you just need to know that it's a way to make sound with a computer. You can usually write musical pieces with specific softwares called <abbr title="Digital Audio Workstation">DAW</abbr>s.</p> + <h3>MIDI art ???</h3> + <p>When composing, the notes are displayed on a grid, which can be seen as a canvas. From there on, we can start making pixel art ! The best part is, you can customize each note with a certain sound and create a very unique sounding pixel art.</p> + <h3>DEMO !!!!</h3> + <p>Here are a few examples of MIDI art pieces :</p> + <h4>A simple pixel art</h4> + <h4>A more complex drawing</h4> + <h4>This one was also made to sound coherent !</h4> + </div> + <div class="left-container"> + <h2>~ Oscilloscopes and stuff ~</h2> + <h3>Waveform art</h3> + <p>So you know how sound is just a wave ? Well turns out you can shape that wave ! I won't get into some complicated math, but basically, the most simple wave is a sine wave, a nice, smooth, round wave, repeating itself as regularly as possible. Using the previously mentioned complicated math, you can shape the waveform to your liking and create some unique designs.<p> + <p>However, waveform art has a rather cumbersome limitation : Since we are using a mathematical functions (and graphing it in <a href="https://en.wikipedia.org/wiki/Cartesian_coordinate_system">cartesian coordinates</a>, the line can only go right and up or down. This means we can never loop back and go left : to put it simply, this method allows us to draw the letter 'V', but not the letter 'O'. The good part is, other methods allow us to remedy this problem.</p> + <h3>Messing around with oscilloscopes</h3> + <p>Oscilloscopes are very basic electronic devices, which take 2 signals in entry, and display them on a grid. You can fiddle with the entry signal to manipulate the visual output. But in our case the entry signal is duplicated to both left and right speakers. The process creates a very unique type of music, along with an interesting video clip. This genre was initiated by two polish composers/programmers. They ended up developing a software that functions alongside the Blender 3d modeling program, and outputs the corresponding signal to an oscilloscope. The project is better described on the <a href="https://oscilloscopemusic.com">>Oscilloscope Music<</a> website.</p> + <h4>Examples !!</h4> + </div> + <div class="right-container"> + <h2>Audio visualizers</h2> + <p>Audio visualizers are graphical displays mostly used as a video complement to audio content. They illustrate the audio specter by graphing the audio frenquencies all through the audio media. + <h3>Graphs</h3> + <p>Graphs are the most basic audio visualizers. Some are actually made of 2 graphs, displaying data for stereo audio (left and right channels), and some only show a single graph of the overall frequencies. An audio visualizer graph displays audio frequencies at any point in time, from low to high frequencies.</p> + <h3>Circles</h3> + <p>Circular audio visualizers are somewhat similar to graphs, usually representing both audio channels, and using the center of the circle to display a logo or some other image. Frequencies from low to high are represented from the bottom to the top, extending away from the center of the circle.</p> + <h3>Windows Media Player</h3> + <p>This one brings up a ton of nostalgia from back when Windows Media Player was still widely used (up until about 15 years ago).</p> + <!-- Sooooo 2000s --> + </div> + <footer>Submission for the <a href="https://forum.melonland.net/index.php?topic=3244.msg31935#msg31935">Surf Club E-Zine #2</a>, written by <a href="https://marcellus.cc">>Marcellus<</a></footer> </div> - <h3>MIDI art ???</h3> - <div class="left-container"> - <p>When composing, the notes are displayed on a grid, which can be seen as a canvas. From there on, we can start making pixel art ! The best part is, you can customize each note with a certain sound and create a very unique sounding pixel art.</p> - </div> - <h3>DEMO !!!!</h3> - <h2>~ Oscilloscopes and stuff ~</h2> - <h3>Waveform art</h3> - <h2>Audio visualizers</h2> - <h3>Graphs</h3> - <h3>Circles</h3> - <h3>Windows Media Player</h3> - <!-- Sooooo 2000s --> - <footer>Submission for the <a href="https://forum.melonland.net/index.php?topic=3244.msg31935#msg31935">Surf Club E-Zine #2</a>, written by <a href="https://marcellus.cc">>Marcellus<</a></footer> </body> |