├── composer.phar ├── css ├── audio.css ├── reset.css ├── style.css └── video.css ├── img ├── pause.png ├── play.png └── stevie-nicks2.jpg ├── index.html ├── js ├── canvas.js ├── creative_coding.js ├── fx.js ├── mic.js ├── motion_detection.js ├── quicksettings.min.js ├── soundcloud.js ├── soundcloud2.js ├── soundcloud_old.js ├── vector.js └── video.js ├── part1.html ├── part10a.html ├── part10b.html ├── part10c.html ├── part10d.html ├── part10e.html ├── part11.html ├── part11a.html ├── part11b.html ├── part11c.html ├── part11d.html ├── part12a.html ├── part12b.html ├── part12d.html ├── part12e.html ├── part12f.html ├── part12g.html ├── part13a.html ├── part13a2.html ├── part13b.html ├── part13c.html ├── part13c2.html ├── part13c3.html ├── part13d.html ├── part13e.html ├── part13f.html ├── part13f2.html ├── part13f3.html ├── part14a.html ├── part15a.html ├── part16a_pixelation.html ├── part16b_pixelation.html ├── part16c_pixelation.html ├── part16d_pixelation.html ├── part17a_motion_detection.html ├── part17b_motion_detection.html ├── part17c_motion_detection.html ├── part17d_motion_detection_scaled.html ├── part17e_motion_detection.html ├── part17f_motion_detection.html ├── part17g_motion_detection.html ├── part17h_motion_detection.html ├── part17i_motion_detection.html ├── part17j_motion_detection.html ├── part17k_motion_detection_scaled.html ├── part2b.html ├── part2c.html ├── part2d.html ├── part2e.html ├── part2f.html ├── part2g.html ├── part2h.html ├── part2i.html ├── part2j.html ├── part2k.html ├── part2l.html ├── part2m.html ├── part3a.html ├── part3b.html ├── part3c.html ├── part3d.html ├── part3e.html ├── part3f.html ├── part3g.html ├── part4a.html ├── part4b.html ├── part4c.html ├── part5a.html ├── part5b.html ├── part5c.html ├── part5d.html ├── part5e.html ├── part6a.html ├── part6b.html ├── part6c.html ├── part6d.html ├── part7.html ├── part7a.html ├── part7aa.html ├── part7ab.html ├── part7ac.html ├── part7ad.html ├── part7b.html ├── part7cc.html ├── part8a.html ├── part8a2.html ├── part8a3.html ├── part8b.html ├── part8c.html ├── part8d.html ├── part9a.html ├── part9b.html ├── part9c.html ├── sin.html └── template.html /composer.phar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeorgeGally/creative_coding/dff8a093f93ed86b18fd1819a77a61030041ba25/composer.phar -------------------------------------------------------------------------------- /css/audio.css: -------------------------------------------------------------------------------- 1 | audio { 2 | position: fixed; 3 | bottom: 10px; 4 | z-index: 10; 5 | width: 100%; 6 | } 7 | 8 | #audioplayer { 9 | z-index: 9999; 10 | width: 100%; 11 | position: absolute; 12 | background: #fff; 13 | height: 120px; 14 | padding-top: 10px; 15 | top: -100px; 16 | transition: 1s; 17 | } 18 | 19 | #playButton{ 20 | height:40px; 21 | width: 40px; 22 | border: none; 23 | background-size: 50% 50%; 24 | background-position: center; 25 | float: left; 26 | cursor: pointer; 27 | margin-top: 5px; 28 | } 29 | 30 | .play{ background: url('../img/play.png') no-repeat; } 31 | .pause{ background: url('../img/pause.png') no-repeat; } 32 | 33 | 34 | 35 | #timeline{ 36 | width: 82%; 37 | height: 11px; 38 | background: #ddd; 39 | margin-top: 20px; 40 | margin-right: 30px; 41 | border-radius: 3px; 42 | display: inline-block; 43 | cursor: pointer; 44 | } 45 | 46 | #playtime{ 47 | font-family: helvetica, arial, sans; 48 | float: right; 49 | margin-left: 0px; 50 | font-size: 12px; 51 | color: #aaa; 52 | } 53 | 54 | #playhead{ 55 | width: 15px; 56 | height: 15px; 57 | border-radius: 50%; 58 | border: 1px solid #fff; 59 | margin-top: -3px; 60 | background: rgba(200, 200, 200, 0.8); 61 | } 62 | 63 | #trackImage { 64 | width: 90px; 65 | height: 90px; 66 | float: left; 67 | background: #eee; 68 | margin: 0 10px 0 10px; 69 | display: inline-block; 70 | } 71 | 72 | 73 | 74 | #artistInfo, #artistInfo a, #trackInfo, #trackInfo a { 75 | font-family: helvetica, arial, sans; 76 | text-decoration: none; 77 | color: #000; 78 | margin-left: 10px; 79 | } 80 | 81 | #artistInfo { 82 | font-weight: bold; 83 | font-size: 16px; 84 | line-height: 20px; 85 | } 86 | #trackInfo, #trackInfo a { 87 | font-size: 18px; 88 | line-height: 24px; 89 | color: #37adea; 90 | } 91 | 92 | 93 | #artistInfo a:hover, #trackInfo a:hover { 94 | text-decoration: underline; 95 | color: orange; 96 | } 97 | 98 | 99 | #soundcloudLogo { 100 | display: block; 101 | margin: 18px 0 0 10px; 102 | } 103 | 104 | .wrapper { 105 | position: relative; 106 | overflow: hidden; 107 | width: 100%; 108 | height: 100px; 109 | } 110 | 111 | #audioplayer.wrapper:hover { 112 | transition: 1s; 113 | top: 0 !important; 114 | } 115 | -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, embed, 11 | figure, figcaption, footer, header, hgroup, 12 | menu, nav, output, ruby, section, summary, 13 | time, mark, audio, video { 14 | margin: 0; 15 | padding: 0; 16 | border: 0; 17 | font-size: 100%; 18 | font: inherit; 19 | vertical-align: baseline; 20 | } 21 | /* HTML5 display-role reset for older browsers */ 22 | article, aside, details, figcaption, figure, 23 | footer, header, hgroup, menu, nav, section { 24 | display: block; 25 | } 26 | body { 27 | line-height: 1; 28 | } 29 | ol, ul { 30 | list-style: none; 31 | } 32 | blockquote, q { 33 | quotes: none; 34 | } 35 | blockquote:before, blockquote:after, 36 | q:before, q:after { 37 | content: ''; 38 | content: none; 39 | } 40 | table { 41 | border-collapse: collapse; 42 | border-spacing: 0; 43 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, embed, 11 | figure, figcaption, footer, header, hgroup, 12 | menu, nav, output, ruby, section, summary, 13 | time, mark, audio, video { 14 | margin: 0; 15 | padding: 0; 16 | border: 0; 17 | font: inherit; 18 | font-size: 100%; 19 | vertical-align: baseline; 20 | } 21 | 22 | @font-face { 23 | font-family: 'SquareFont'; 24 | src: url('SquareFont.eot'); 25 | src: url('../fonts/SquareFont.eot?#iefix') format('embedded-opentype'), 26 | url('../fonts/SquareFont.woff') format('woff'), 27 | url('../fonts/SquareFont.ttf') format('truetype'); 28 | font-weight: normal; 29 | font-style: normal; 30 | } 31 | 32 | 33 | html { 34 | line-height: 1; 35 | } 36 | 37 | ol, ul { 38 | list-style: none; 39 | } 40 | 41 | table { 42 | border-collapse: collapse; 43 | border-spacing: 0; 44 | } 45 | 46 | caption, th, td { 47 | text-align: left; 48 | font-weight: normal; 49 | vertical-align: middle; 50 | } 51 | 52 | q, blockquote { 53 | quotes: none; 54 | } 55 | q:before, q:after, blockquote:before, blockquote:after { 56 | content: ""; 57 | content: none; 58 | } 59 | 60 | a img { 61 | border: none; 62 | } 63 | 64 | article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { 65 | display: block; 66 | } 67 | 68 | html, body { 69 | margin: 0; 70 | height: 100%; 71 | background: #f7f7f7; 72 | } 73 | 74 | canvas { 75 | position: absolute; 76 | top: 0; 77 | left: 0; 78 | bottom: 0; 79 | right: 0; 80 | background-size: cover; 81 | z-index: 0; 82 | -webkit-transform: translate3d(0, 0, 0); 83 | } 84 | 85 | #canvas2 { 86 | position: absolute; 87 | top: 0; 88 | left: -10000px; 89 | bottom: 0; 90 | right: 0; 91 | background-size: cover; 92 | z-index: 0; 93 | } 94 | 95 | 96 | .collection { 97 | position: fixed; 98 | top: 0; 99 | width: 100%; 100 | z-index: 1; 101 | } 102 | .collection a { 103 | display: block; 104 | padding: 5px; 105 | background: rgba(0, 0, 0, 0.6); 106 | color: #fff; 107 | text-decoration: none; 108 | font: 700 12px Consolas, system, monospace; 109 | -webkit-transition: all 250ms linear; 110 | transition: all 250ms linear; 111 | } 112 | .collection a:hover { 113 | background: #fff; 114 | color: #000; 115 | } 116 | .collection .prev { 117 | text-align: left; 118 | float: left; 119 | } 120 | .collection .next { 121 | text-align: right; 122 | float: right; 123 | } 124 | 125 | #selekta { 126 | position: absolute; 127 | top: 30px; 128 | left: 50px; 129 | z-index: 999; 130 | } 131 | 132 | #warning { 133 | font: 700 12px Consolas, system, monospace; 134 | color: #fff; 135 | background: #c82222; 136 | position: absolute; 137 | bottom: 45%; 138 | left: 0; 139 | right: 0; 140 | z-index: 10001; 141 | text-align: center; 142 | padding: 20px; 143 | display: none; 144 | } 145 | 146 | #gui { 147 | position: absolute; 148 | z-index: 999; 149 | } 150 | -------------------------------------------------------------------------------- /css/video.css: -------------------------------------------------------------------------------- 1 | #videoOutput { 2 | width: 100%; 3 | height: 100%; 4 | position: absolute; 5 | top: 0; 6 | left: 0; 7 | z-index: 999; 8 | 9 | } -------------------------------------------------------------------------------- /img/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeorgeGally/creative_coding/dff8a093f93ed86b18fd1819a77a61030041ba25/img/pause.png -------------------------------------------------------------------------------- /img/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeorgeGally/creative_coding/dff8a093f93ed86b18fd1819a77a61030041ba25/img/play.png -------------------------------------------------------------------------------- /img/stevie-nicks2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeorgeGally/creative_coding/dff8a093f93ed86b18fd1819a77a61030041ba25/img/stevie-nicks2.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /js/canvas.js: -------------------------------------------------------------------------------- 1 | 2 | // allows me global access to canvas and it’s width and height properties 3 | var w, width, h, height; 4 | var canvas; 5 | 6 | // this enables me to have many canvases all positioned on top of eachother at 100% width and height of page 7 | function createCanvas(canvas_name){ 8 | canvas = document.createElement('canvas'); 9 | var body = document.querySelector('body'); 10 | canvas.setAttribute("id", canvas_name); 11 | canvas.style.position = "absolute"; 12 | canvas.style.left = "0px"; 13 | canvas.style.top = "0px"; 14 | body.appendChild(canvas); 15 | var ctx = canvas.getContext('2d'); 16 | resize(); 17 | window.addEventListener("resize", resize, false); 18 | return ctx; 19 | } 20 | 21 | 22 | function createGLCanvas(canvas_name){ 23 | canvas = document.createElement('canvas'); 24 | var body = document.querySelector('body'); 25 | canvas.setAttribute("id", canvas_name); 26 | canvas.style.position = "absolute"; 27 | canvas.style.left = "0px"; 28 | canvas.style.top = "0px"; 29 | body.appendChild(canvas); 30 | var gl = canvas.getContext('webgl'); 31 | if (!gl) var gl = canvas.getContext('experimental-webgl'); 32 | resize(); 33 | window.addEventListener("resize", resize, false); 34 | return gl; 35 | } 36 | 37 | function resize(){ 38 | var c = document.getElementsByTagName('canvas'); 39 | width = w = window.innerWidth; 40 | height = h = window.innerHeight; 41 | for(var i = 0; i < c.length; i++) { 42 | c[i].width = width; 43 | c[i].height = height; 44 | 45 | } 46 | //console.log("resize: " + w +":" + h); 47 | } 48 | 49 | 50 | function createHiddenCanvas(canvas_name){ 51 | var ctx = createCanvas(canvas_name) 52 | canvas.style.left = -w+"px"; 53 | return ctx; 54 | } 55 | -------------------------------------------------------------------------------- /js/fx.js: -------------------------------------------------------------------------------- 1 | // MIRROR THE CANVAS 2 | var p = CanvasRenderingContext2D.prototype; 3 | 4 | 5 | 6 | p.triangulate = function(grid_w, grid_h, alpha) { 7 | 8 | if (grid_h == undefined) { 9 | grid_h = grid_w; 10 | } 11 | 12 | if (alpha == undefined) { 13 | alpha = 0.8; 14 | } 15 | 16 | var ww = Math.ceil(w/grid_w); 17 | var hh = Math.ceil(h/grid_h); 18 | var imgData = this.getImageData(0,0,w,h); 19 | this.clearRect(0,0,w,h); 20 | //var sourceBuffer8 = new Uint8Array(imgData.data.buffer); 21 | //var sourceBuffer8 = new Uint8ClampedArray(imgData.data.buffer); 22 | 23 | var sourceBuffer32 = new Uint32Array(imgData.data.buffer); 24 | var i =0; 25 | for(var x = 0; x < w; x += grid_w) { 26 | 27 | for(var y = 0; y < h; y += grid_h) { 28 | 29 | var pos = (x + y * w); 30 | var b = (sourceBuffer32[pos] >> 16) & 0xff; 31 | var g = (sourceBuffer32[pos] >> 8) & 0xff; 32 | var r = (sourceBuffer32[pos] >> 0) & 0xff; 33 | this.fillStyle = rgba(r,g,b, alpha); 34 | 35 | if (i%2) { 36 | this.fillTriangle(x, y - grid_h, x, y + grid_h, x - grid_w, y ); 37 | } else { 38 | this.fillTriangle(x - grid_w, y - grid_h, x, y, x - grid_w , y + grid_h); 39 | } 40 | 41 | i++; 42 | } 43 | } 44 | 45 | } 46 | -------------------------------------------------------------------------------- /js/mic.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | function Microphone (_fft) { 4 | 5 | var FFT_SIZE = _fft || 2048; 6 | 7 | this.spectrum = new Uint8Array(FFT_SIZE/2); 8 | this.data = []; 9 | this.volume = this.vol = 0; 10 | this.peak_volume = 0; 11 | 12 | var self = this; 13 | var audioContext = new AudioContext(); 14 | 15 | var SAMPLE_RATE = audioContext.sampleRate; 16 | window.AudioContext = window.AudioContext || window.webkitAudioContext; 17 | navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; 18 | 19 | window.addEventListener('load', init, false); 20 | 21 | function init () { 22 | try { 23 | startMic(new AudioContext()); 24 | } 25 | catch (e) { 26 | console.error(e); 27 | alert('Web Audio API is not supported in this browser'); 28 | } 29 | } 30 | 31 | 32 | function startMic (context) { 33 | 34 | navigator.getUserMedia({ audio: true }, processSound, error); 35 | 36 | function processSound (stream) { 37 | 38 | // analyser extracts frequency, waveform, and other data 39 | var analyser = context.createAnalyser(); 40 | analyser.smoothingTimeConstant = 0.2; 41 | analyser.fftSize = FFT_SIZE; 42 | 43 | var node = context.createScriptProcessor(FFT_SIZE*2, 1, 1); 44 | 45 | node.onaudioprocess = function () { 46 | 47 | // getByteFrequencyData returns the amplitude for each frequency 48 | analyser.getByteFrequencyData(self.spectrum); 49 | self.data = adjustFreqData(self.spectrum); 50 | 51 | // getByteTimeDomainData gets volumes over the sample time 52 | //analyser.getByteTimeDomainData(dataArray); 53 | self.vol = self.getRMS(self.spectrum); 54 | // get peak 55 | if (self.vol > self.peak_volume) self.peak_volume = self.vol; 56 | self.volume = self.vol; 57 | }; 58 | 59 | var input = context.createMediaStreamSource(stream); 60 | 61 | input.connect(analyser); 62 | analyser.connect(node); 63 | node.connect(context.destination); 64 | 65 | } 66 | 67 | function error () { 68 | console.log(arguments); 69 | } 70 | 71 | } 72 | 73 | /////////////////////////////////////////////// 74 | ////////////// SOUND UTILITIES ////////////// 75 | ///////////////////////////////////////////// 76 | this.mapSound = function(_me, _total, _min, _max){ 77 | 78 | if (self.spectrum.length > 0) { 79 | 80 | var min = _min || 0; 81 | var max = _max || 100; 82 | //actual new freq 83 | var new_freq = Math.floor(_me /_total * self.data.length); 84 | //console.log(self.spectrum[new_freq]); 85 | // map the volumes to a useful number 86 | return map(self.data[new_freq], 0, self.peak_volume, min, max); 87 | } else { 88 | return 0; 89 | } 90 | 91 | } 92 | 93 | this.mapRawSound = function(_me, _total, _min, _max){ 94 | 95 | if (self.spectrum.length > 0) { 96 | 97 | var min = _min || 0; 98 | var max = _max || 100; 99 | //actual new freq 100 | var new_freq = Math.floor(_me /_total * (self.spectrum.length)/2); 101 | //console.log(self.spectrum[new_freq]); 102 | // map the volumes to a useful number 103 | return map(self.spectrum[new_freq], 0, self.peak_volume, min, max); 104 | } else { 105 | return 0; 106 | } 107 | 108 | } 109 | 110 | 111 | this.getVol = function(){ 112 | 113 | // map total volume to 100 for convenience 114 | self.volume = map(self.vol, 0, self.peak_volume, 0, 100); 115 | return self.volume; 116 | } 117 | 118 | this.getVolume = function() { return this.getVol();} 119 | 120 | //A more accurate way to get overall volume 121 | this.getRMS = function (spectrum) { 122 | 123 | var rms = 0; 124 | for (var i = 0; i < spectrum.length; i++) { 125 | rms += spectrum[i] * spectrum[i]; 126 | } 127 | rms /= spectrum.length; 128 | rms = Math.sqrt(rms); 129 | return rms; 130 | } 131 | 132 | //freq = n * SAMPLE_RATE / MY_FFT_SIZE 133 | function mapFreq(i){ 134 | var freq = i * SAMPLE_RATE / FFT_SIZE; 135 | return freq; 136 | } 137 | 138 | // getMix function. Computes the current frequency with 139 | // computeFreqFromFFT, then returns bass, mids and his 140 | // sub bass : 0 > 100hz 141 | // mid bass : 80 > 500hz 142 | // mid range: 400 > 2000hz 143 | // upper mid: 1000 > 6000hz 144 | // high freq: 4000 > 12000hz 145 | // Very high freq: 10000 > 20000hz and above 146 | 147 | this.getMix = function(){ 148 | var highs = []; 149 | var mids = []; 150 | var bass = []; 151 | for (var i = 0; i < self.spectrum.length; i++) { 152 | var band = mapFreq(i); 153 | var v = map(self.spectrum[i], 0, self.peak_volume, 0, 100); 154 | if (band < 500) { 155 | bass.push(v); 156 | } 157 | if (band > 400 && band < 6000) { 158 | mids.push(v); 159 | } 160 | if (band > 4000) { 161 | highs.push(v); 162 | } 163 | } 164 | //console.log(bass); 165 | return {bass: bass, mids: mids, highs: highs} 166 | } 167 | 168 | 169 | this.getBass = function(){ 170 | return this.getMix().bass; 171 | } 172 | 173 | this.getMids = function(){ 174 | return this.getMix().mids; 175 | } 176 | 177 | this.getHighs = function(){ 178 | return this.getMix().highs; 179 | } 180 | 181 | this.getHighsVol = function(_min, _max){ 182 | var min = _min || 0; 183 | var max = _max || 100; 184 | var v = map(this.getRMS(this.getMix().highs), 0, self.peak_volume, min, max); 185 | return v; 186 | } 187 | 188 | this.getMidsVol = function(_min, _max){ 189 | var min = _min || 0; 190 | var max = _max || 100; 191 | var v = map(this.getRMS(this.getMix().mids), 0, self.peak_volume, min, max); 192 | return v; 193 | } 194 | 195 | this.getBassVol = function(_min, _max){ 196 | var min = _min || 0; 197 | var max = _max || 100; 198 | var v = map(this.getRMS(this.getMix().bass), 0, self.peak_volume, min, max); 199 | return v; 200 | } 201 | 202 | 203 | function adjustFreqData(frequencyData, ammt) { 204 | // get frequency data, remove obsolete 205 | //analyserNode.getByteFrequencyData(frequencyData); 206 | 207 | frequencyData.slice(0,frequencyData.length/2); 208 | var new_length = ammt || 16; 209 | var newFreqs = [], prevRangeStart = 0, prevItemCount = 0; 210 | // looping for my new 16 items 211 | for (let j=1; j<=new_length; j++) { 212 | // define sample size 213 | var pow, itemCount, rangeStart; 214 | if (j%2 === 1) { 215 | pow = (j-1)/2; 216 | } else { 217 | pow = j/2; 218 | } 219 | itemCount = Math.pow(2, pow); 220 | if (prevItemCount === 1) { 221 | rangeStart = 0; 222 | } else { 223 | rangeStart = prevRangeStart + (prevItemCount/2); 224 | } 225 | 226 | // get average value, add to new array 227 | var newValue = 0, total = 0; 228 | for (let k=rangeStart; k freq) { 257 | break; 258 | } 259 | } 260 | 261 | return [closest, closestFreq]; 262 | } 263 | 264 | 265 | return this; 266 | 267 | }; 268 | 269 | 270 | 271 | var Mic = new Microphone(); 272 | -------------------------------------------------------------------------------- /js/motion_detection.js: -------------------------------------------------------------------------------- 1 | 2 | function motionDetection(){ 3 | var motion = []; 4 | // draw the video and get its pixels 5 | ctx.drawImage(video, 0, 0, video.width, video.height); 6 | var data = ctx.getImageData(0, 0, video.width, video.height).data; 7 | // we can now loop over all the pixels of the video 8 | for (var y = 0; y < video.height; y++) { 9 | for (var x = 0; x < video.width; x++) { 10 | var pos = (x + y * video.width) * 4; 11 | var r = data[pos]; 12 | var g = data[pos+1]; 13 | var b = data[pos+2]; 14 | if(old[pos] && Math.abs(old[pos].red - r) > threshold) { 15 | // push the x, y and rgb values into the motion array 16 | // but multiply the x and y values bck up by scalefactor 17 | // to get their actual screen position 18 | motion.push({x: x * scalefactor, y: y * scalefactor, r: r, g: g, b: b}); 19 | } 20 | old[pos] = { red: r, green: g, blue: b}; 21 | } 22 | } 23 | 24 | return motion; 25 | } 26 | -------------------------------------------------------------------------------- /js/vector.js: -------------------------------------------------------------------------------- 1 | function Vector(x, y, z) { 2 | this.x = x || 0; 3 | this.y = y || 0; 4 | this.z = z || 0; 5 | } 6 | 7 | Vector.prototype = { 8 | negative: function() { 9 | return new Vector(-this.x, -this.y, -this.z); 10 | }, 11 | add: function(v) { 12 | if (v instanceof Vector) return new Vector(this.x + v.x, this.y + v.y, this.z + v.z); 13 | else return new Vector(this.x + v, this.y + v, this.z + v); 14 | }, 15 | subtract: function(v) { 16 | if (v instanceof Vector) return new Vector(this.x - v.x, this.y - v.y, this.z - v.z); 17 | else return new Vector(this.x - v, this.y - v, this.z - v); 18 | }, 19 | multiply: function(v) { 20 | if (v instanceof Vector) return new Vector(this.x * v.x, this.y * v.y, this.z * v.z); 21 | else return new Vector(this.x * v, this.y * v, this.z * v); 22 | }, 23 | divide: function(v) { 24 | if (v instanceof Vector) return new Vector(this.x / v.x, this.y / v.y, this.z / v.z); 25 | else return new Vector(this.x / v, this.y / v, this.z / v); 26 | }, 27 | equals: function(v) { 28 | return this.x == v.x && this.y == v.y && this.z == v.z; 29 | }, 30 | dot: function(v) { 31 | return this.x * v.x + this.y * v.y + this.z * v.z; 32 | }, 33 | cross: function(v) { 34 | return new Vector( 35 | this.y * v.z - this.z * v.y, 36 | this.z * v.x - this.x * v.z, 37 | this.x * v.y - this.y * v.x 38 | ); 39 | }, 40 | length: function() { 41 | return Math.sqrt(this.dot(this)); 42 | }, 43 | magnitude: function() { 44 | return Math.sqrt(this.dot(this)); 45 | }, 46 | mag: function() { 47 | var x = this.x, 48 | y = this.y, 49 | z = this.z; 50 | return Math.sqrt(x * x + y * y + z * z); 51 | }, 52 | unit: function() { 53 | return this.divide(this.length()); 54 | }, 55 | min: function() { 56 | return Math.min(Math.min(this.x, this.y), this.z); 57 | }, 58 | max: function() { 59 | return Math.max(Math.max(this.x, this.y), this.z); 60 | }, 61 | limit: function(high) { 62 | if (this.mag() > high) { 63 | this.normalize(); 64 | this.mult(high); 65 | } 66 | }, 67 | mult: function(v) { 68 | if (typeof v === "number") { 69 | this.x *= v; 70 | this.y *= v; 71 | this.z *= v; 72 | } else { 73 | this.x *= v.x; 74 | this.y *= v.y; 75 | this.z *= v.z; 76 | } 77 | }, 78 | div: function(v) { 79 | if (typeof v === "number") { 80 | this.x /= v; 81 | this.y /= v; 82 | this.z /= v; 83 | } else { 84 | this.x /= v.x; 85 | this.y /= v.y; 86 | this.z /= v.z; 87 | } 88 | }, 89 | setMag: function(v_or_len, len) { 90 | if (len === undefined) { 91 | len = v_or_len; 92 | this.normalize(); 93 | this.mult(len); 94 | } else { 95 | var v = v_or_len; 96 | v.normalize(); 97 | v.mult(len); 98 | return v; 99 | } 100 | }, 101 | normalize: function() { 102 | var m = this.mag(); 103 | if (m > 0) { 104 | this.div(m); 105 | } 106 | }, 107 | toAngles: function() { 108 | return { 109 | theta: Math.atan2(this.z, this.x), 110 | phi: Math.asin(this.y / this.length()) 111 | }; 112 | }, 113 | angleTo: function(a) { 114 | return Math.acos(this.dot(a) / (this.length() * a.length())); 115 | }, 116 | toArray: function(n) { 117 | return [this.x, this.y, this.z].slice(0, n || 3); 118 | }, 119 | clone: function() { 120 | return new Vector(this.x, this.y, this.z); 121 | }, 122 | init: function(x, y, z) { 123 | this.x = x; this.y = y; this.z = z; 124 | return this; 125 | } 126 | }; 127 | 128 | Vector.negative = function(a, b) { 129 | b.x = -a.x; b.y = -a.y; b.z = -a.z; 130 | return b; 131 | }; 132 | Vector.add = function(a, b, c) { 133 | if (b instanceof Vector) { c.x = a.x + b.x; c.y = a.y + b.y; c.z = a.z + b.z; } 134 | else { c.x = a.x + b; c.y = a.y + b; c.z = a.z + b; } 135 | return c; 136 | }; 137 | Vector.subtract = function(a, b, c) { 138 | if (b instanceof Vector) { c.x = a.x - b.x; c.y = a.y - b.y; c.z = a.z - b.z; } 139 | else { c.x = a.x - b; c.y = a.y - b; c.z = a.z - b; } 140 | return c; 141 | }; 142 | Vector.multiply = function(a, b, c) { 143 | if (b instanceof Vector) { c.x = a.x * b.x; c.y = a.y * b.y; c.z = a.z * b.z; } 144 | else { c.x = a.x * b; c.y = a.y * b; c.z = a.z * b; } 145 | return c; 146 | }; 147 | Vector.divide = function(a, b, c) { 148 | if (b instanceof Vector) { c.x = a.x / b.x; c.y = a.y / b.y; c.z = a.z / b.z; } 149 | else { c.x = a.x / b; c.y = a.y / b; c.z = a.z / b; } 150 | return c; 151 | }; 152 | Vector.cross = function(a, b, c) { 153 | c.x = a.y * b.z - a.z * b.y; 154 | c.y = a.z * b.x - a.x * b.z; 155 | c.z = a.x * b.y - a.y * b.x; 156 | return c; 157 | }; 158 | Vector.unit = function(a, b) { 159 | var length = a.length(); 160 | b.x = a.x / length; 161 | b.y = a.y / length; 162 | b.z = a.z / length; 163 | return b; 164 | }; 165 | Vector.fromAngles = function(theta, phi) { 166 | return new Vector(Math.cos(theta) * Math.cos(phi), Math.sin(phi), Math.sin(theta) * Math.cos(phi)); 167 | }; 168 | Vector.randomDirection = function() { 169 | return Vector.fromAngles(Math.random() * Math.PI * 2, Math.asin(Math.random() * 2 - 1)); 170 | }; 171 | Vector.min = function(a, b) { 172 | return new Vector(Math.min(a.x, b.x), Math.min(a.y, b.y), Math.min(a.z, b.z)); 173 | }; 174 | Vector.max = function(a, b) { 175 | return new Vector(Math.max(a.x, b.x), Math.max(a.y, b.y), Math.max(a.z, b.z)); 176 | }; 177 | Vector.lerp = function(a, b, fraction) { 178 | return b.subtract(a).multiply(fraction).add(a); 179 | }; 180 | Vector.fromArray = function(a) { 181 | return new Vector(a[0], a[1], a[2]); 182 | }; 183 | Vector.angleBetween = function(a, b) { 184 | return a.angleTo(b); 185 | }; 186 | 187 | // Vector.lengthSq = function () { 188 | // return this.x * this.x + this.y * this.y; 189 | // }; 190 | 191 | // Victor.length = function () { 192 | // return Math.sqrt(this.lengthSq()); 193 | // }; 194 | -------------------------------------------------------------------------------- /js/video.js: -------------------------------------------------------------------------------- 1 | 2 | var video; 3 | var hidden_ctx; 4 | var showBgImg = false; 5 | var showVideo = false; 6 | 7 | document.addEventListener("DOMContentLoaded", function() { 8 | hidden_ctx = createHiddenCanvas("hidden_canvas"); 9 | video = document.createElement('video'); 10 | document.body.appendChild(video); 11 | 12 | video.autoplay = true; 13 | video.loop = true; 14 | video.setAttribute("id", "videoOutput"); 15 | video.setAttribute("style", "display:none;"); 16 | video.width = 320; 17 | video.height = 240; 18 | 19 | 20 | // check if browser supports getUserMedia - yes we are looking at you Safari! 21 | navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; 22 | window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; 23 | 24 | if (navigator.getUserMedia) { 25 | 26 | if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) { 27 | console.log("enumerateDevices() not supported."); 28 | return; 29 | } 30 | 31 | // List cameras and microphones. 32 | 33 | navigator.mediaDevices.enumerateDevices() 34 | .then(function(devices) { 35 | gotSources(devices); 36 | }) 37 | .catch(function(err) { 38 | console.log(err.name + ": " + err.message); 39 | }); 40 | 41 | } 42 | 43 | //CHOOSE WHICH CAMERA TO USE 44 | 45 | function setupCamera(cameras){ 46 | 47 | //console.log(cameras) 48 | 49 | //var videoSource = cameras[cameras.length-1].id; 50 | var videoSource = cameras[0].id; 51 | 52 | var constraints = { 53 | // audio: { 54 | // optional: [{ 55 | // sourceId: audioSource 56 | // }] 57 | // }, 58 | video: { 59 | optional: [{ 60 | sourceId: videoSource 61 | }] 62 | } 63 | } 64 | 65 | navigator.getUserMedia(constraints, successCallback, errorCallback); 66 | 67 | } 68 | 69 | function successCallback(stream) { 70 | 71 | 72 | if (video.mozCaptureStream) { 73 | video.mozSrcObject = stream; 74 | } else { 75 | video.src = (window.URL && window.URL.createObjectURL(stream)) || stream; 76 | } 77 | video.play(); 78 | this.video = video; 79 | } 80 | 81 | function errorCallback(error) { 82 | alert('Unable to get webcam stream.'); 83 | } 84 | 85 | 86 | // hacky loop to make sure video is streaming 87 | 88 | video.addEventListener('loadeddata', function() { 89 | var attempts = 50; 90 | function checkVideo() { 91 | 92 | if (attempts > 0) { 93 | 94 | if (video.videoWidth > 0 && video.videoHeight > 0) { 95 | 96 | video.available = true; 97 | 98 | } else { 99 | 100 | // Wait a bit and try again 101 | window.setTimeout(checkVideo, 100); 102 | 103 | } 104 | 105 | 106 | } else { 107 | 108 | // Give up after 10 attempts 109 | alert('Unable to play video stream. Is webcam working?'); 110 | 111 | } 112 | 113 | attempts--; 114 | 115 | } 116 | 117 | checkVideo(); 118 | 119 | }, false); 120 | 121 | 122 | function gotSources(devices) { 123 | 124 | var cameras = []; 125 | 126 | devices.forEach(function(device) { 127 | 128 | // console.log(device.kind + ": " + device.label + " id = " + device.deviceId); 129 | 130 | if (device.kind === 'videoinput') { 131 | //console.log(device.deviceId); 132 | cameras.push(device); 133 | } 134 | 135 | }) 136 | 137 | setupCamera(cameras); 138 | 139 | }; 140 | 141 | }) 142 | -------------------------------------------------------------------------------- /part1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /part10a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 101 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /part10b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 102 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /part10c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 141 | 142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /part10d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 131 | 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /part10e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /part11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /part11a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /part11b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 84 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /part11c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /part11d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /part12a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /part12b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 99 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /part12d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 105 | 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /part12e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 118 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /part12f.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 116 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /part12g.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 115 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /part13a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /part13a2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /part13b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /part13c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /part13c2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /part13c3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /part13d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /part13e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /part13f.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /part13f2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 101 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /part13f3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 123 | 124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /part14a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /part15a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /part16a_pixelation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /part16b_pixelation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /part16c_pixelation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /part16d_pixelation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /part17a_motion_detection.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /part17b_motion_detection.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /part17c_motion_detection.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /part17d_motion_detection_scaled.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /part17e_motion_detection.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /part17f_motion_detection.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /part17g_motion_detection.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /part17h_motion_detection.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 114 | 115 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /part17i_motion_detection.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 114 | 115 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /part17j_motion_detection.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 101 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /part17k_motion_detection_scaled.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /part2b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /part2c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /part2d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /part2e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /part2f.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /part2g.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /part2h.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /part2i.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /part2j.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /part2k.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /part2l.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /part2m.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /part3a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /part3b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /part3c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /part3d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /part3e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /part3f.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /part3g.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /part4a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /part4b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /part4c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 81 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /part5a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /part5b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /part5c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /part5d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /part5e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /part6a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 81 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /part6b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 93 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /part6c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 94 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /part6d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 105 | 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /part7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /part7a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /part7aa.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /part7ab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /part7ac.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /part7ad.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /part7b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /part7cc.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /part8a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /part8a2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 81 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /part8a3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 104 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /part8b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /part8c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /part8d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /part9a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /part9b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /part9c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /sin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Creative Coding Yea! 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 57 | 58 | 59 | 60 | 61 | --------------------------------------------------------------------------------