Codestin Search App

- A - clap -

- S - hihat -

- D - kick -

- F - openhat -

- G - boom -

- H - ride -

- J - snare +

+ A + clap +

+ S + hihat +

+ D + kick +

+ F + openhat +

+ G + boom +

+ H + ride +

+ J + snare +

+ K + tom +

+ L + tink +

- K - tom -

- L - tink -

- -

- - + + From efcdf2f8c5f1bf136f99a78c4d8975a956ef9aa9 Mon Sep 17 00:00:00 2001 From: Bejamin Schachter Date: Wed, 14 Dec 2016 14:19:30 -0500 Subject: [PATCH 2/8] setup --- 02 - JS + CSS Clock/index.html | 33 +++---------------- .../{ => index}/index-FINISHED.html | 0 .../{index-START.html => index/index.html} | 29 ++++++++++++++-- 3 files changed, 31 insertions(+), 31 deletions(-) rename 02 - JS + CSS Clock/{ => index}/index-FINISHED.html (100%) rename 02 - JS + CSS Clock/{index-START.html => index/index.html} (59%) diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html index 1c777557da..e6585f00d0 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock/index.html @@ -60,37 +60,14 @@ height:6px; background:black; 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); + top:50%; } - - - + diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index/index-FINISHED.html similarity index 100% rename from 02 - JS + CSS Clock/index-FINISHED.html rename to 02 - JS + CSS Clock/index/index-FINISHED.html diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index/index.html similarity index 59% rename from 02 - JS + CSS Clock/index-START.html rename to 02 - JS + CSS Clock/index/index.html index 2712384201..1c777557da 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index/index.html @@ -61,13 +61,36 @@ background:black; 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); } + - + + const mins = now.getMinutes(); + const minsDegrees = ((mins / 60) * 360) + 90; + minsHand.style.transform = `rotate(${minsDegrees}deg)`; + + const hour = now.getMinutes(); + const hourDegrees = ((mins / 12) * 360) + 90; + hourHand.style.transform = `rotate(${hourDegrees}deg)`; + } + + setInterval(setDate, 1000); + + From 4de39fa149da830e6ebd4b9c87f0599a9b270f76 Mon Sep 17 00:00:00 2001 From: Bejamin Schachter Date: Wed, 14 Dec 2016 14:38:31 -0500 Subject: [PATCH 3/8] finishes 02 --- 02 - JS + CSS Clock/index.html | 112 ++++++++++++++++++++------------- 1 file changed, 67 insertions(+), 45 deletions(-) diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html index e6585f00d0..0aa9b115df 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock/index.html @@ -16,57 +16,79 @@

Update CSS Variables with JS

${this.value}

From 95047a84d12332d539d1ab4470df1f6b6ed5bcb8 Mon Sep 17 00:00:00 2001 From: Bejamin Schachter Date: Wed, 21 Dec 2016 16:02:12 -0500 Subject: [PATCH 7/8] finish 08 --- 08 - Fun with HTML5 Canvas/index-START.html | 19 ----- 08 - Fun with HTML5 Canvas/index.html | 80 +++++++++++++++++++++ 2 files changed, 80 insertions(+), 19 deletions(-) delete mode 100644 08 - Fun with HTML5 Canvas/index-START.html create mode 100644 08 - Fun with HTML5 Canvas/index.html diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html deleted file mode 100644 index 37c148df07..0000000000 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - Codestin Search App - - -

- - - - - - diff --git a/08 - Fun with HTML5 Canvas/index.html b/08 - Fun with HTML5 Canvas/index.html new file mode 100644 index 0000000000..1e8da46dcd --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index.html @@ -0,0 +1,80 @@ + + + + + Codestin Search App + + +

+ + + + + From 30244749324f843caf398707db0ca56ac9ed7e7b Mon Sep 17 00:00:00 2001 From: Bejamin Schachter Date: Wed, 4 Jan 2017 17:19:41 -0500 Subject: [PATCH 8/8] finished w/o filters --- 19 - Webcam Fun/index.html | 4 ++-- 19 - Webcam Fun/scripts.js | 45 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 47 insertions(+), 2 deletions(-) diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html index d4ffc4dc2a..c66610092b 100755 --- a/19 - Webcam Fun/index.html +++ b/19 - Webcam Fun/index.html @@ -10,7 +10,7 @@

- +

diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js index 00355f5a9c..3f24f7f760 100644 --- a/19 - Webcam Fun/scripts.js +++ b/19 - Webcam Fun/scripts.js @@ -3,3 +3,48 @@ const canvas = document.querySelector('.photo'); const ctx = canvas.getContext('2d'); const strip = document.querySelector('.strip'); const snap = document.querySelector('.snap'); + + +function getVideo() { + navigator.mediaDevices.getUserMedia({ + video: true, + audio: false + }) + .then(localmediastream => { + console.log(localmediastream); + video.src = window.URL.createObjectURL(localmediastream); + video.play(); + }) + .catch(err => console.error(err)); +} + + +function paintToCanvas() { + const width = video.videoWidth; + const height = video.videoHeight; + canvas.width = width; + canvas.height = height; + + return setInterval(() => { + ctx.drawImage(video, 0, 0, width, height); + let pixels = ctx.getImageData(0, 0, width, height); + console.log(pixels); + debugger; + }, 16); +} + +function takePhoto() { + snap.currentTime = 0; + snap.play(); + const data = canvas.toDataURL('image/jpeg'); + + const link = document.createElement('a'); + link.href = data; + link.setAttribute('download', 'handsome'); + link.innerHTML = ` person

`; + strip.insertBefore(link, strip.firstChild); + +} + +getVideo(); +video.addEventListener('canplay', paintToCanvas);