From 7a7791ed9ad69986010ed7b2ba9e86a5caf4c440 Mon Sep 17 00:00:00 2001 From: Martial Simon Date: Sun, 25 Aug 2024 12:29:36 +0200 Subject: feat: almost finished the text content --- index.html | 53 +++++++++++++++++++++++++++++++++++------------------ style.css | 19 +++++++++++++++++++ 2 files changed, 54 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index ae42dad..a8e94e9 100644 --- a/index.html +++ b/index.html @@ -16,23 +16,40 @@ ?

-

MIDI art, and other forms of audio GFX

-

MIDI notes pixel art

-

MIDI ???

-
-

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 DAWs.

+
+

MIDI art, and other forms of audio GFX

+
+

MIDI notes pixel art

+

MIDI ???

+

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 DAWs.

+

MIDI art ???

+

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.

+

DEMO !!!!

+

Here are a few examples of MIDI art pieces :

+

A simple pixel art

+

A more complex drawing

+

This one was also made to sound coherent !

+
+
+

~ Oscilloscopes and stuff ~

+

Waveform art

+

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.

+

However, waveform art has a rather cumbersome limitation : Since we are using a mathematical functions (and graphing it in cartesian coordinates, 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.

+

Messing around with oscilloscopes

+

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 >Oscilloscope Music< website.

+

Examples !!

+
+
+

Audio visualizers

+

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. +

Graphs

+

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.

+

Circles

+

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.

+

Windows Media Player

+

This one brings up a ton of nostalgia from back when Windows Media Player was still widely used (up until about 15 years ago).

+ +
+
-

MIDI art ???

-
-

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.

-
-

DEMO !!!!

-

~ Oscilloscopes and stuff ~

-

Waveform art

-

Audio visualizers

-

Graphs

-

Circles

-

Windows Media Player

- - diff --git a/style.css b/style.css index 5685341..ec11886 100644 --- a/style.css +++ b/style.css @@ -1,12 +1,21 @@ body { background: url("img/bg.jpg"); color: beige; + --cont-margin: 15%; +} + +#content { + margin: auto 4vw; } h1 { text-shadow: 0.2em -0.4em #00ed60, 0.4em 0.4em #a794ff; } +h2, h3, h4 { + transform: rotate3d(1, 1, 0, -25deg); +} + #Introduction { font-style: italic; text-align: end; @@ -60,6 +69,16 @@ path#id_12 { animation-delay: 3.6s; } +.left-container { + text-align: start; + margin-right: var(--cont-margin); +} + +.right-container { + text-align: end; + margin-left: var(--cont-margin); +} + @keyframes hop{ 25% { transform: translateY(0.5em); -- cgit v1.2.3