diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..723ef36 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea \ No newline at end of file diff --git a/drums.html b/drums.html index 0e886d2..62d6003 100644 --- a/drums.html +++ b/drums.html @@ -43,17 +43,54 @@ ride + +
+ +
+
+ + tink +
+
+ + beatbox +
+
+ + drum +
+
+ + kick 707 +
+
+ + my first piano +
+
+ + piano +
+
+ + snare 707 +
+
+ + snare 707 b +
+
- - - - - - - - - + + + + + + + + + diff --git a/js/drums.js b/js/drums.js index 8cc2f47..b08b4ce 100644 --- a/js/drums.js +++ b/js/drums.js @@ -1,7 +1,8 @@ var mySketch = function(myDrums) { - let padRange = [9,10,11,12,25,26,27,28]; + let padRange = [9,10,11,12,25,26,27,28,36,37,38,39,40,41,42,43]; + let sounds = ['boom', 'kick', 'snare', 'tom', 'clap', 'hihat', 'openhat', 'ride', 'tink', 'beatbox', 'drum', 'kick_707', 'my_first_piano', 'piano_p6', 'snare_707', 'snare_707_b', 'thumb_piano_monotraum', 'triangle_01', 'violin', 'whistle']; var padNumber = 9; var indPadItem; var padWidth = 100; @@ -9,11 +10,32 @@ var mySketch = function(myDrums) { var padX = 50; var padY = 50; var amplitude; - var boom; - var volumeBoom; + var mic; myDrums.preload = function () { - //boom = myDrums.loadSound('sounds/ride.mp3'); + boom = myDrums.loadSound('sounds/boom.wav'); + kick = myDrums.loadSound('sounds/kick.wav'); + snare = myDrums.loadSound('sounds/snare.wav'); + tom = myDrums.loadSound('sounds/tom.wav'); + clap = myDrums.loadSound('sounds/clap.wav'); + hihat = myDrums.loadSound('sounds/hihat.wav'); + openhat = myDrums.loadSound('sounds/openhat.wav'); + ride = myDrums.loadSound('sounds/ride.wav'); + tink = myDrums.loadSound('sounds/tink.wav'); + beatbox = myDrums.loadSound('sounds/beatbox.mp3'); + drum = myDrums.loadSound('sounds/drum.mp3'); + kick_707 = myDrums.loadSound('sounds/Kick-707.mp3'); + my_first_piano = myDrums.loadSound('sounds/my_first_piano.mp3'); + piano_p6 = myDrums.loadSound('sounds/piano_p6.mp3'); + snare_707 = myDrums.loadSound('sounds/Snare-707.mp3'); + snare_707_b = myDrums.loadSound('sounds/Snare-707-b.mp3'); + thumb_piano_monotraum = myDrums.loadSound('sounds/thumb-piano_monotraum.mp3'); + triangle_01 = myDrums.loadSound('sounds/triangle_01.mp3'); + violin = myDrums.loadSound('sounds/violin-spiccato-g2.mp3'); + whistle = myDrums.loadSound('sounds/whistle.mp3'); + + flute = myDrums.loadSound('sounds/flute.mp3'); + } p5.midi.onInput = function (event) { @@ -29,7 +51,6 @@ var mySketch = function(myDrums) { myDrums.line(0, 0, myDrums.width, myDrums.height); const keys = Array.from(document.querySelectorAll('.key')); - keys.forEach(key => key.addEventListener('transitionend', removeTransition)); //console.log(keys); @@ -41,32 +62,46 @@ var mySketch = function(myDrums) { //console.log(boom); - myDrums.micOn(); + //myDrums.micOn(); myDrums.amplitude = new p5.Amplitude(); //boom.setVolume(0.5); - myDrums.amplitude.setInput(mic); + //myDrums.amplitude.setInput(mic); + myDrums.amplitude.setInput(boom); + + let sound = sounds.map(sound => { + console.log(sound); + }); + + myDrums.amplitude.setInput(kick); + myDrums.amplitude.setInput(snare); + myDrums.amplitude.setInput(tom); + myDrums.amplitude.setInput(clap); + myDrums.amplitude.setInput(hihat); + myDrums.amplitude.setInput(openhat); + myDrums.amplitude.setInput(ride); + myDrums.amplitude.smooth(0.9); // /console.log(myDrums.amplitude.getLevel()); } myDrums.draw = function () { - myDrums.background(0); + myDrums.background('#282828'); myDrums.fill(255); var level = myDrums.amplitude.getLevel(); //console.log(level); - var size = myDrums.map(level, 0, 1, 0, 1000); + var size = myDrums.map(level, 0, 1, 0, 200); myDrums.ellipse(myDrums.width/2, myDrums.height/2, size, size); } myDrums.playSound = function () { const padNumber = (event.data[1]); - const audio = document.querySelector(`audio[data-key="${event.data[1]}"]`); - const key = document.querySelector(`.key[data-key="${event.data[1]}"]`); - const pads = Array.from(document.querySelectorAll('.key')); - pads.forEach(pad => { - }); + //const audio = document.querySelector(`audio[data-key="${padNumber}"]`); + const key = document.querySelector(`.key[data-key="${padNumber}"]`); + //const pads = Array.from(document.querySelectorAll('.key')); + // pads.forEach(pad => { + //}); //console.log(pads); @@ -77,12 +112,79 @@ var mySketch = function(myDrums) { myDrums.strokeWeight(0); myDrums.text(padNumber, padX, padY); + //console.log(padRange); + //console.log(sounds); + // trigger sound on pad down only (127) if (event.data[2] == 127) { - if (!audio) return; - audio.currentTime = 0; - audio.play(); + //if (!audio) return; + //audio.currentTime = 0; + //audio.play(); + + + console.log(padNumber); + key.classList.add('playing'); + + if (padNumber == 9) { + boom.play(); + } + if (padNumber == 10) { + kick.play(); + } + if (padNumber == 11) { + snare.play(); + } + if (padNumber == 12) { + tom.play(); + } + if (padNumber == 25) { + clap.play(); + } + if (padNumber == 26) { + hihat.play(); + } + if (padNumber == 27) { + openhat.play(); + } + if (padNumber == 28) { + ride.play(); + } + + // User setting pads + + if (padNumber == 36) { + tink.play(); + } + + if (padNumber == 37) { + beatbox.play(); + } + + if (padNumber == 38) { + drum.play(); + } + + if (padNumber == 39) { + kick_707.play(); + } + + if (padNumber == 40) { + my_first_piano.play(); + } + + if (padNumber == 41) { + piano_p6.play(); + } + + if (padNumber == 42) { + snare_707.play(); + } + + if (padNumber == 43) { + snare_707_b.play(); + } + } } diff --git a/styles/_variables.scss b/styles/_variables.scss deleted file mode 100644 index 8506d8a..0000000 --- a/styles/_variables.scss +++ /dev/null @@ -1,134 +0,0 @@ -//Pick a color - -$first-color: hsl(10, 100%, 50%); - -// Find the complement - -$second-color: complement($first-color); - -//Check if you have a cool color on your hands. Cool colors will overpower warm colors when mixing. - -@function is-cool-color($color) { - @return hue($color) < 310 and hue($color) > 140; -} - -@function is-high-key-value($color) { - @return hue($color) > 20 and hue($color) < 190; -} - -@function is-highest-key-value($color) { - @return hue($color) > 30 and hue($color) <90; -} - -//Establish a relationship (similar lighting conditions) between colors. - -@function harmonious-mix($mix, $base) { - @if (is-cool-color($mix)){ - @if is-high-key-value($base) { - @return mix($mix, $base, 11%); - } - @else { - @return mix($mix, $base, 16%); - } - } - @else { - @if is-high-key-value($base) { - @return mix($mix, $base, 13%); - } - @else { - @return mix($mix, $base, 23%); - } - } -} - -@function mix-neutral($color) { - @if (is-highest-key-value($color)) { - @if is-high-key-value(complement($color)) { - @return mix(complement($color), $color, 19%); - } - @else { - @return mix(complement($color), $color, 13%); - } - } - @else if (is-high-key-value($color)) { - @if is-high-key-value(complement($color)) { - @return mix(complement($color), $color, 31%); - } - @else { - @return mix(complement($color), $color, 23%); - } - } - @else { - @if is-highest-key-value(complement($color)) { - @return mix(complement($color), $color, 31%); - } - @if is-high-key-value(complement($color)) { - @return mix(complement($color), $color, 26%); - } - @else { - @return mix(complement($color), $color, 23%); - } - } -} - -@function pick-contrast-of($color) { - @if is-high-key-value($color){ - @if lightness($color) < 30% { - @return lighten(complement($color), 86); - } - @else if lightness($color) > 70% { - @return darken(complement($color), 68); - } - @else { - @return darken(complement($color), 53); - } -} @else { - @if lightness($color) < 30% { - @return lighten(complement($color), 86); - } - @else if lightness($color) > 70% { - @return darken(complement($color), 68); - } - @else { - @return lighten(complement($color), 53); - } - } -} - -$primary-color: harmonious-mix($second-color, $first-color); -$complementary-color: harmonious-mix($first-color, $second-color); - -$analogous-color: adjust-hue($complementary-color, -40); -$complementary-analogous: mix($analogous-color, $complementary-color, 66); - -// Complementary Neutrals, highlight, midtone, shadow - -$complementary-neutral: mix-neutral($complementary-color); -$complementary-neutral-light: lighten($complementary-neutral, 33); -$complementary-neutral-dark: darken($complementary-neutral, 33); - -// Primary neutrals, highlight, midtone, shadow` - -$primary-neutral: mix-neutral($primary-color); -$primary-neutral-light: lighten($primary-neutral, 33); -$primary-neutral-dark: darken($primary-neutral, 33); - -// Primary tint and shade - -$primary-light: mix($primary-neutral-light, $primary-color, 45%); -$primary-dark: mix($primary-neutral-dark, $primary-color, 45%); - -$complementary-light: mix($complementary-neutral-light, $complementary-color, 45%); - -// Pure neutrals, highlight, midtone, shadow - -$white: lighten($primary-neutral-light, 15); -$neutral-gray: grayscale($primary-neutral); -$primary-gray: mix($primary-color, $complementary-color, 30); -$complementary-gray: mix($complementary-color, $primary-color, 63); -$black: grayscale($complementary-neutral-dark); - -// Analogous Colors - -$analogous-color: adjust-hue($complementary-color, -40); -$complementary-analogous: mix($analogous-color, $complementary-color, 66); diff --git a/styles/drums.css b/styles/drums.css index 54afd2f..3645183 100644 --- a/styles/drums.css +++ b/styles/drums.css @@ -16,11 +16,19 @@ body,html { position: absolute; } +hr { + background: rgba(0,0,0,0.4); + border: 0 none; + margin: 0 auto; + width: 80%; + height: 1px; +} + .keys { position: relative; display: flex; flex: 1; - min-height: 100vh; + min-height: 30vh; align-items: center; justify-content: center; } diff --git a/styles/styles.scss b/styles/styles.scss deleted file mode 100644 index b9ecfee..0000000 --- a/styles/styles.scss +++ /dev/null @@ -1,514 +0,0 @@ -@import "variables"; - -:root { - --black: black; - --white: white; -} - -html { - background: #222; - background-size: cover; - font-family: 'helvetica neue'; - text-align: center; - font-size: 10px; -} - -body { - margin: 0; - font-size: 2rem; - display: flex; - flex: 1; - min-height: 100vh; - align-items: center; -} - - -// navigation - -.demo-item { - width: 90vw; - min-height: 90vh; -} - -// clock - -.clock { - --second-degrees: 0; - display: inline-block; - width: 25rem; - height: 25rem; - // we must use a string literal because sass + custom props is anger - border: 20px solid #{"hsla(var(--second-degrees), 90%, 45%, 1)"}; - border-radius: 50%; - margin: 50px 3rem; - position: relative; - padding: 2rem; - box-shadow: - 0 0 0 4px rgba(0,0,0,0.1), - inset 0 0 0 3px #EFEFEF, - inset 0 0 10px var(--black), - 0 0 10px rgba(0,0,0,0.2); -} - -.clock.solid { - background-color: #{"hsla(var(--second-degrees), 90%, 45%, 1)"}; - box-shadow: none; -} - -.clock-face { - position: relative; - width: 100%; - height: 100%; - transform: translateY(-3px); /* account for the height of the clock hands */ -} - -.hand { - width: 50%; - height: 6px; - background: var(--white); - position: absolute; - top: 50%; - transform-origin: 100%; - transform: rotate(90deg); - transition: all 0.05s; - transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); -} - -// gem - - -//gem - - -@keyframes adjust0 { - $original-fill: lighten(mix($primary-color, $complementary-color, 60), 29); - 0% { - fill: adjust-hue($original-fill, 36); - } - 10% { - fill: adjust-hue($original-fill, 72); - } - 10% { - fill: adjust-hue($original-fill, 108); - } - 30% { - fill: adjust-hue($original-fill, 144); - } - 40% { - fill: adjust-hue($original-fill, 180); - } - 50% { - fill: adjust-hue($original-fill, 216); - } - 60% { - fill: adjust-hue($original-fill, 252); - } - 70% { - fill: adjust-hue($original-fill, 288); - } - 80% { - fill: adjust-hue($original-fill, 324); - } - 90% { - fill: adjust-hue($original-fill, 360); - } - 100% { - fill: grayscale($original-fill); - } -} - -@keyframes adjust1 { - $original-fill: lighten(mix($primary-color, $complementary-color, 60), 19); - 0% { - fill: adjust-hue($original-fill, 36); - } - 10% { - fill: adjust-hue($original-fill, 72); - } - 10% { - fill: adjust-hue($original-fill, 108); - } - 30% { - fill: adjust-hue($original-fill, 144); - } - 40% { - fill: adjust-hue($original-fill, 180); - } - 50% { - fill: adjust-hue($original-fill, 216); - } - 60% { - fill: adjust-hue($original-fill, 252); - } - 70% { - fill: adjust-hue($original-fill, 288); - } - 80% { - fill: adjust-hue($original-fill, 324); - } - 90% { - fill: adjust-hue($original-fill, 360); - } - 100% { - fill: grayscale($original-fill); - } -} - -@keyframes adjust2 { - $original-fill: darken(mix($primary-color, $complementary-color, 77), 17); - 0% { - fill: adjust-hue($original-fill, 36); - } - 10% { - fill: adjust-hue($original-fill, 72); - } - 10% { - fill: adjust-hue($original-fill, 108); - } - 30% { - fill: adjust-hue($original-fill, 144); - } - 40% { - fill: adjust-hue($original-fill, 180); - } - 50% { - fill: adjust-hue($original-fill, 216); - } - 60% { - fill: adjust-hue($original-fill, 252); - } - 70% { - fill: adjust-hue($original-fill, 288); - } - 80% { - fill: adjust-hue($original-fill, 324); - } - 90% { - fill: adjust-hue($original-fill, 360); - } - 100% { - fill: grayscale($original-fill); - } -} - -@keyframes adjust3 { - $original-fill: lighten(mix($primary-color, $complementary-color, 67), 14); - 0% { - fill: adjust-hue($original-fill, 36); - } - 10% { - fill: adjust-hue($original-fill, 72); - } - 10% { - fill: adjust-hue($original-fill, 108); - } - 30% { - fill: adjust-hue($original-fill, 144); - } - 40% { - fill: adjust-hue($original-fill, 180); - } - 50% { - fill: adjust-hue($original-fill, 216); - } - 60% { - fill: adjust-hue($original-fill, 252); - } - 70% { - fill: adjust-hue($original-fill, 288); - } - 80% { - fill: adjust-hue($original-fill, 324); - } - 90% { - fill: adjust-hue($original-fill, 360); - } - 100% { - fill: grayscale($original-fill); - } -} - -@keyframes adjust4 { - $original-fill: darken(mix($primary-color, $complementary-color, 70), 27); - 0% { - fill: adjust-hue($original-fill, 36); - } - 10% { - fill: adjust-hue($original-fill, 72); - } - 10% { - fill: adjust-hue($original-fill, 108); - } - 30% { - fill: adjust-hue($original-fill, 144); - } - 40% { - fill: adjust-hue($original-fill, 180); - } - 50% { - fill: adjust-hue($original-fill, 216); - } - 60% { - fill: adjust-hue($original-fill, 252); - } - 70% { - fill: adjust-hue($original-fill, 288); - } - 80% { - fill: adjust-hue($original-fill, 324); - } - 90% { - fill: adjust-hue($original-fill, 360); - } - 100% { - fill: grayscale($original-fill); - } -} - -@keyframes adjust5 { - $original-fill: lighten(mix($primary-color, $complementary-color, 73), 14); - 0% { - fill: adjust-hue($original-fill, 36); - } - 10% { - fill: adjust-hue($original-fill, 72); - } - 10% { - fill: adjust-hue($original-fill, 108); - } - 30% { - fill: adjust-hue($original-fill, 144); - } - 40% { - fill: adjust-hue($original-fill, 180); - } - 50% { - fill: adjust-hue($original-fill, 216); - } - 60% { - fill: adjust-hue($original-fill, 252); - } - 70% { - fill: adjust-hue($original-fill, 288); - } - 80% { - fill: adjust-hue($original-fill, 324); - } - 90% { - fill: adjust-hue($original-fill, 360); - } - 100% { - fill: grayscale($original-fill); - } -} - -@keyframes adjust6 { - $original-fill: darken(mix($primary-color, $complementary-color, 75), 7); - 0% { - fill: adjust-hue($original-fill, 36); - } - 10% { - fill: adjust-hue($original-fill, 72); - } - 10% { - fill: adjust-hue($original-fill, 108); - } - 30% { - fill: adjust-hue($original-fill, 144); - } - 40% { - fill: adjust-hue($original-fill, 180); - } - 50% { - fill: adjust-hue($original-fill, 216); - } - 60% { - fill: adjust-hue($original-fill, 252); - } - 70% { - fill: adjust-hue($original-fill, 288); - } - 80% { - fill: adjust-hue($original-fill, 324); - } - 90% { - fill: adjust-hue($original-fill, 360); - } - 100% { - fill: grayscale($original-fill); - } -} - - -.💎 { - .gem0 { - fill: lighten(mix($primary-color, $complementary-color, 60), 29); - animation: adjust0 5s linear infinite alternate; - } - .gem1 { - fill: lighten(mix($primary-color, $complementary-color, 60), 19); - animation: adjust1 5s linear infinite alternate; - } - .gem2 { - fill: darken(mix($primary-color, $complementary-color, 77), 7); - animation: adjust2 5s linear infinite alternate; - } - .gem3 { - fill: lighten(mix($primary-color, $complementary-color, 67), 11); - animation: adjust3 5s linear infinite alternate; - } - .gem4 { - fill: darken(mix($primary-color, $complementary-color, 70), 60); - animation: adjust4 5s linear infinite alternate; - } - .gem5 { - fill: lighten(mix($primary-color, $complementary-color, 73), 11); - animation: adjust5 5s linear infinite alternate; - } - .gem6 { - fill: darken(mix($primary-color, $complementary-color, 75), 7); - animation: adjust6 5s linear infinite alternate; - } -} - - -.💎 { - display: block; - margin: auto; - width: 410px; - padding: 0 30px; - fill: $complementary-neutral-light; - stroke: none; -} -// end gem - -.value-scale { - -} - -.value-scale div, .color-value-scale div, .saturation-value-scale div { - height: 77px; - width: calc(8vw - 11px); - margin-right: 5px; - display: inline-block; - border: 1px solid #efefef; -} - -.value-scale .value1 { - background-color: hsl(0, 0%, 0%); -} -.value-scale .value2 { - background-color: hsl(0, 0%, 10%); -} -.value-scale .value3 { - background-color: hsl(0, 0%, 20%); -} -.value-scale .value4 { - background-color: hsl(0, 0%, 30%); -} -.value-scale .value5 { - background-color: hsl(0, 0%, 40%); -} -.value-scale .value6 { - background-color: hsl(0, 0%, 50%); -} -.value-scale .value7 { - background-color: hsl(0, 0%, 60%); -} -.value-scale .value8 { - background-color: hsl(0, 0%, 70%); -} -.value-scale .value9 { - background-color: hsl(0, 0%, 80%); -} -.value-scale .value10 { - background-color: hsl(0, 0%, 90%); -} -.value-scale .value11 { - background-color: hsl(0, 0%, 100%); -} - -// -.saturation-value-scale .value1 { - background-color: hsl(0, 100%, 0%); -} -.saturation-value-scale .value2 { - background-color: hsl(0, 100%, 10%); -} -.saturation-value-scale .value3 { - background-color: hsl(0, 100%, 20%); -} -.saturation-value-scale .value4 { - background-color: hsl(0, 100%, 30%); -} -.saturation-value-scale .value5 { - background-color: hsl(0, 100%, 40%); -} -.saturation-value-scale .value6 { - background-color: hsl(0, 100%, 50%); -} -.saturation-value-scale .value7 { - background-color: hsl(0, 100%, 60%); -} -.saturation-value-scale .value8 { - background-color: hsl(0, 100%, 70%); -} -.saturation-value-scale .value9 { - background-color: hsl(0, 100%, 80%); -} -.saturation-value-scale .value10 { - background-color: hsl(0, 100%, 90%); -} -.saturation-value-scale .value11 { - background-color: hsl(0, 100%, 100%); -} - -// -.color-value-scale .value1 { - background-color: hsl(0, 100%, 0%); -} -.color-value-scale .value2 { - background-color: hsl(30, 100%, 10%); -} -.color-value-scale .value3 { - background-color: hsl(60, 100%, 20%); -} -.color-value-scale .value4 { - background-color: hsl(90, 100%, 30%); -} -.color-value-scale .value5 { - background-color: hsl(120, 100%, 40%); -} -.color-value-scale .value6 { - background-color: hsl(160, 100%, 50%); -} -.color-value-scale .value7 { - background-color: hsl(190, 100%, 60%); -} -.color-value-scale .value8 { - background-color: hsl(220, 100%, 70%); -} -.color-value-scale .value9 { - background-color: hsl(260, 100%, 80%); -} -.color-value-scale .value10 { - background-color: hsl(290, 100%, 90%); -} -.color-value-scale .value11 { - background-color: hsl(330, 100%, 100%); -} - -.🍰 { - font-size: 16px; - color: #efefef; -} - -.demo-text-block { - text-align: left; - margin: 10px auto 45px auto; - padding: 30px; - background-color: hsla(10, 30%, 80%, .2); - max-width: 800px; - font-size: 15px; - color: #efefef; -}