diff options
| -rw-r--r-- | img/includes sound.png | bin | 0 -> 62009 bytes | |||
| -rw-r--r-- | index.html | 22 | ||||
| -rw-r--r-- | style.css | 39 |
3 files changed, 48 insertions, 13 deletions
diff --git a/img/includes sound.png b/img/includes sound.png Binary files differnew file mode 100644 index 0000000..13685b1 --- /dev/null +++ b/img/includes sound.png @@ -17,15 +17,15 @@ ?</p> <!-- TODO : Fast travel, SOUNDS --> <div id="content"> - <h1>MIDI art, and other forms of audio GFX</h1> + <h1>MIDI art, and other forms of <span id="sound" style="background: none">audio</span> 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> + <span>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.</span> <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> + <span>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.</span> <h3>DEMO !!!!</h3> - <p>Here are a few examples of MIDI art pieces :</p> + <span>Here are a few examples of MIDI art pieces :</span> <h4>A simple pixel art</h4> <h4>A more complex drawing</h4> <h4>This one was also made to sound coherent !</h4> @@ -33,21 +33,21 @@ <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> + <span>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.<span> + <span>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.</span> <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> + <span>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.</span> <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. + <span>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.</span> <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> + <span>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.</span> <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> + <span>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.</span> <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> + <span>This one brings up a ton of nostalgia from back when Windows Media Player was still widely used (up until about 15 years ago).</span> <!-- 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> @@ -1,21 +1,47 @@ body { background: url("img/bg.jpg"); color: beige; - --cont-margin: 15%; + --cont-margin: 25%; } #content { margin: auto 4vw; } +#content span { + background: green; +} + h1 { text-shadow: 0.2em -0.4em #00ed60, 0.4em 0.4em #a794ff; } -h2, h3, h4 { +#sound::after { + display: block; + position: absolute; + top: 1.5em; + background: url("img/includes sound.png") no-repeat; + width: 500px; + height: 300px; + border: orange dashed; +} + +h2 { transform: rotate3d(1, 1, 0, -25deg); } +h3, h4 { + transform: rotate3d(3, 1, 1, -10deg); +} + +a { + color: skyblue; +} + +a:visited { + color: orange; +} + #Introduction { font-style: italic; text-align: end; @@ -74,11 +100,20 @@ path#id_12 { margin-right: var(--cont-margin); } +.left-container * { + transform-origin: center left; +} + .right-container { text-align: end; margin-left: var(--cont-margin); } +.right-container * { + transform-origin: center right; +} + + @keyframes hop{ 25% { transform: translateY(0.5em); |
