blob: ae42dad62c08c00c92d8b28915d4ea1f9e86048f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!DOCTYPE html>
<head>
<title>Visual Audio Art</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="Introduction">What if I told you you could draw with
<svg height="1em" viewBox="0 0 300 90" xmlns="http://www.w3.org/2000/svg">
<g class="wavy" id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="1em" stroke="beige" stroke-width="1mm" fill="beige" style="stroke:beige;stroke-width:0.03mm;fill:beige">
<path d="M 0 60.352 L 7.764 58.838 A 11.666 11.666 0 0 0 8.745 61.642 A 8.329 8.329 0 0 0 11.743 64.966 A 9.295 9.295 0 0 0 13.936 65.941 Q 16.984 66.895 22.168 66.895 A 31.151 31.151 0 0 0 26.648 66.601 Q 35.352 65.329 35.352 58.545 A 6.593 6.593 0 0 0 34.835 55.898 A 6.289 6.289 0 0 0 32.959 53.491 A 11.484 11.484 0 0 0 31.014 52.249 Q 28.871 51.143 25.635 50.342 A 297.95 297.95 0 0 1 20.446 49.019 Q 13.597 47.2 10.517 45.929 A 15.601 15.601 0 0 1 9.277 45.361 A 16.663 16.663 0 0 1 6.381 43.469 A 12.658 12.658 0 0 1 3.955 40.845 A 10.284 10.284 0 0 1 2.406 37.153 Q 2.1 35.73 2.1 34.085 A 12.923 12.923 0 0 1 2.1 34.082 A 15.944 15.944 0 0 1 2.858 29.045 A 12.885 12.885 0 0 1 7.275 22.852 A 16.95 16.95 0 0 1 12.58 20.117 Q 16.668 18.799 22.266 18.799 Q 28.522 18.799 32.942 20.52 A 17.635 17.635 0 0 1 35.986 22.046 A 13.961 13.961 0 0 1 42.3 31.109 A 18.047 18.047 0 0 1 42.383 31.494 L 34.473 32.471 A 7.836 7.836 0 0 0 33.495 29.636 A 7.242 7.242 0 0 0 31.006 27.148 Q 28.076 25.342 22.266 25.342 A 29.034 29.034 0 0 0 18.2 25.601 Q 13.494 26.27 11.592 28.669 A 6.309 6.309 0 0 0 10.303 32.715 A 6.84 6.84 0 0 0 10.637 34.902 A 5.639 5.639 0 0 0 12.329 37.402 Q 14.166 38.996 18.03 40.028 A 32.174 32.174 0 0 0 18.848 40.234 L 24.658 41.748 Q 30.944 43.291 34.443 44.803 A 20.355 20.355 0 0 1 36.108 45.605 A 17.488 17.488 0 0 1 39.398 47.898 A 14.329 14.329 0 0 1 41.602 50.366 A 10.873 10.873 0 0 1 43.378 54.731 A 14.827 14.827 0 0 1 43.604 57.373 A 15.907 15.907 0 0 1 42.7 62.85 A 13.645 13.645 0 0 1 37.915 69.165 Q 33.273 72.652 25.721 73.293 A 42.014 42.014 0 0 1 22.168 73.438 A 51.678 51.678 0 0 1 16.62 73.16 Q 10.551 72.503 6.86 70.288 A 14.321 14.321 0 0 1 0.768 62.864 A 19.933 19.933 0 0 1 0 60.352 Z" id="id_0" vector-effect="non-scaling-stroke"/>
<path d="M 104.821 53.715 A 46.551 46.551 0 0 0 105.42 45.996 A 53.636 53.636 0 0 0 105.04 39.413 Q 103.935 30.492 99.609 25.439 Q 95.592 20.747 88.657 19.299 A 33.159 33.159 0 0 0 81.885 18.652 A 30.497 30.497 0 0 0 75.289 19.326 A 20.102 20.102 0 0 0 64.38 25.513 A 20.626 20.626 0 0 0 60.832 31.1 Q 59.431 34.303 58.777 38.322 A 47.871 47.871 0 0 0 58.203 45.996 A 50.935 50.935 0 0 0 58.398 50.544 Q 59.288 60.462 64.233 66.309 A 19.314 19.314 0 0 0 74.504 72.614 A 28.727 28.727 0 0 0 81.592 73.438 Q 93.164 73.438 99.292 66.382 A 21.533 21.533 0 0 0 102.605 61.183 Q 104.122 57.867 104.821 53.715 Z M 96.191 45.996 A 52.933 52.933 0 0 0 95.927 40.512 Q 95.251 34.042 92.847 30.322 A 10.894 10.894 0 0 0 85.509 25.47 A 17.652 17.652 0 0 0 82.031 25.146 A 17.115 17.115 0 0 0 77.697 25.661 A 11.249 11.249 0 0 0 70.947 30.42 A 17.718 17.718 0 0 0 68.814 35.054 Q 67.475 39.397 67.433 45.594 A 59.52 59.52 0 0 0 67.432 45.996 Q 67.432 56.127 70.863 61.467 A 14.624 14.624 0 0 0 70.947 61.597 A 11.342 11.342 0 0 0 79.181 66.785 A 16.338 16.338 0 0 0 81.494 66.943 A 18.088 18.088 0 0 0 85.826 66.458 A 11.154 11.154 0 0 0 92.725 61.719 Q 96.048 56.71 96.185 46.854 A 61.627 61.627 0 0 0 96.191 45.996 Z" id="id_1" vector-effect="non-scaling-stroke"/>
<path d="M 120.898 19.629 L 129.688 19.629 L 129.688 53.125 A 38.259 38.259 0 0 0 129.837 56.642 Q 130.286 61.481 132.08 63.696 Q 134.432 66.6 140.415 66.65 A 25.231 25.231 0 0 0 140.625 66.65 A 14.852 14.852 0 0 0 145.102 66.008 A 11.695 11.695 0 0 0 150.586 62.354 A 14.192 14.192 0 0 0 153.325 57.201 Q 153.96 55.114 154.158 52.609 A 29.995 29.995 0 0 0 154.248 50.244 L 154.248 19.629 L 163.086 19.629 L 163.086 61.182 A 462.56 462.56 0 0 0 163.096 64.39 Q 163.137 70.288 163.342 72.168 A 8.967 8.967 0 0 0 163.379 72.461 L 155.078 72.461 A 1.681 1.681 0 0 1 155.06 72.34 Q 155.02 72.015 154.98 71.143 Q 154.932 70.068 154.858 68.677 Q 154.785 67.285 154.688 63.428 L 154.541 63.428 A 26.856 26.856 0 0 1 152.242 66.945 Q 150.842 68.74 149.278 69.982 A 13.799 13.799 0 0 1 147.534 71.167 A 16.399 16.399 0 0 1 142.918 72.905 Q 140.96 73.338 138.704 73.419 A 29.415 29.415 0 0 1 137.646 73.438 A 27.701 27.701 0 0 1 133.011 73.076 Q 127.791 72.188 124.927 69.116 A 12.6 12.6 0 0 1 122.433 64.981 Q 120.898 60.982 120.898 54.834 L 120.898 19.629 Z" id="id_2" vector-effect="non-scaling-stroke"/>
<path d="M 223.096 72.461 L 214.258 72.461 L 214.258 38.525 Q 214.258 32.053 211.822 28.827 A 8.288 8.288 0 0 0 211.694 28.662 Q 209.131 25.439 203.516 25.439 A 13.508 13.508 0 0 0 198.238 26.443 A 12.722 12.722 0 0 0 193.579 29.858 A 14.911 14.911 0 0 0 190.388 36.02 Q 189.794 38.283 189.711 40.959 A 28.443 28.443 0 0 0 189.697 41.846 L 189.697 72.461 L 180.908 72.461 L 180.908 30.908 A 462.56 462.56 0 0 0 180.898 27.7 Q 180.857 21.802 180.652 19.922 A 8.967 8.967 0 0 0 180.615 19.629 L 188.916 19.629 A 1.681 1.681 0 0 1 188.934 19.75 Q 188.974 20.074 189.014 20.947 Q 189.056 21.87 189.116 23.028 A 480.513 480.513 0 0 0 189.136 23.413 Q 189.209 24.805 189.307 28.662 L 189.453 28.662 Q 193.888 20.005 203.29 18.835 A 24.771 24.771 0 0 1 206.348 18.652 A 24.857 24.857 0 0 1 211.096 19.076 Q 213.811 19.605 215.904 20.794 A 12.271 12.271 0 0 1 218.945 23.218 A 14.01 14.01 0 0 1 221.709 27.943 Q 222.478 30.071 222.821 32.704 A 35.343 35.343 0 0 1 223.096 37.256 L 223.096 72.461 Z" id="id_3" vector-effect="non-scaling-stroke"/>
<path d="M 274.219 63.965 L 273.975 63.965 Q 271.582 69.092 267.627 71.411 A 16.059 16.059 0 0 1 262.951 73.204 Q 260.95 73.648 258.633 73.718 A 29.013 29.013 0 0 1 257.764 73.73 A 22.638 22.638 0 0 1 252.109 73.068 A 14.823 14.823 0 0 1 243.262 66.943 A 22.163 22.163 0 0 1 240.527 61.176 Q 238.746 55.625 238.631 47.602 A 78.109 78.109 0 0 1 238.623 46.484 A 59.078 59.078 0 0 1 239.353 36.743 Q 242.259 19.457 256.729 18.868 A 25.455 25.455 0 0 1 257.764 18.848 Q 262.772 18.848 266.394 20.356 A 15.29 15.29 0 0 1 267.651 20.947 A 13.781 13.781 0 0 1 272.271 24.966 A 18.83 18.83 0 0 1 274.023 27.832 L 274.121 27.832 L 274.023 20.459 L 274.023 0 L 282.813 0 L 282.813 61.572 Q 282.813 69.824 283.105 72.461 L 274.707 72.461 Q 274.517 71.75 274.374 69.061 A 99.026 99.026 0 0 1 274.365 68.896 A 127.535 127.535 0 0 1 274.276 66.875 Q 274.24 65.876 274.227 64.989 A 67.856 67.856 0 0 1 274.219 63.965 Z M 247.705 46.191 A 64.265 64.265 0 0 0 247.922 51.68 Q 248.499 58.386 250.61 61.987 A 9.553 9.553 0 0 0 257.551 66.739 A 14.673 14.673 0 0 0 260.059 66.943 A 15.531 15.531 0 0 0 264.337 66.389 A 10.899 10.899 0 0 0 270.605 61.792 A 16.277 16.277 0 0 0 272.481 57.757 Q 273.793 53.673 273.989 47.604 A 67.963 67.963 0 0 0 274.023 45.41 Q 274.023 34.912 270.728 30.127 A 10.595 10.595 0 0 0 264.22 25.786 A 17.381 17.381 0 0 0 260.156 25.342 A 13.544 13.544 0 0 0 256.394 25.833 A 9.515 9.515 0 0 0 250.635 30.371 A 16.918 16.918 0 0 0 249.059 34.184 Q 247.922 38.107 247.74 43.907 A 72.766 72.766 0 0 0 247.705 46.191 Z" id="id_4" vector-effect="non-scaling-stroke"/>
</g>
</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>
<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>
|
