├── Resume ├── js │ ├── index.js │ ├── main.js │ ├── planworked.js │ ├── plugins.js │ └── countpixels.js ├── app │ └── geometric.js ├── css │ ├── index.js │ ├── fonts.css │ ├── planworked.css │ └── index.css ├── img │ └── .gitignore ├── .gitattributes ├── robots.txt ├── favicon.ico ├── fonts │ ├── DINWeb.eot │ ├── DINWeb.woff │ ├── DINWeb-Light.eot │ └── DINWeb-Light.woff ├── apple-touch-icon-precomposed.png ├── .gitignore ├── humans.txt ├── crossdomain.xml ├── sendemail.php ├── LICENSE.md ├── README.md └── 404.html ├── .gitignore ├── drawer ├── texture.jpg ├── app.js ├── index.html └── webgl.js ├── sheet ├── texture.jpg ├── index.html ├── webgl.js └── app.js ├── spikes ├── texture.jpg ├── index-shader.html ├── app.js ├── index.html └── webgl.js ├── t5 ├── 01 │ ├── texture.jpg │ ├── together_logo.png │ ├── together_logo_trans.png │ ├── together-images │ │ ├── +1_TRANS.png │ │ ├── +2_TRANS.png │ │ ├── -0_TRANS.png │ │ ├── -1_TRANS.png │ │ ├── -2_TRANS.png │ │ ├── +0_PATTERN.png │ │ ├── +1_PATTERN.png │ │ ├── +2_PATTERN.png │ │ ├── -1_PATTERN.png │ │ └── -2_PATTERN.png │ ├── yo.m │ ├── Drawer.js │ ├── Wave.js │ ├── webgl.js │ └── app.js └── 02 │ ├── texture.jpg │ ├── together_logo.png │ ├── together_logo_trans.png │ ├── together-images │ ├── +1_TRANS.png │ ├── +2_TRANS.png │ ├── -0_TRANS.png │ ├── -1_TRANS.png │ ├── -2_TRANS.png │ ├── +0_PATTERN.png │ ├── +1_PATTERN.png │ ├── +2_PATTERN.png │ ├── -1_PATTERN.png │ └── -2_PATTERN.png │ ├── yo.m │ ├── Wave.js │ ├── Drawer.js │ ├── webgl.js │ └── app.js ├── tangl3 ├── texture.jpg ├── index.html ├── webgl.js └── app.js ├── lessons ├── 10 │ ├── texture.jpg │ ├── webgl.js │ ├── index.html │ └── world.txt ├── 05 │ ├── texture.png │ ├── webgl.js │ └── index.html ├── 06 │ ├── texture.png │ ├── webgl.js │ └── index.html ├── 07 │ ├── texture.jpg │ ├── webgl.js │ └── index.html ├── 08 │ ├── texture.jpg │ ├── webgl.js │ └── index.html ├── 09 │ ├── texture.jpg │ ├── webgl.js │ └── index.html ├── 04 │ ├── webgl.js │ ├── index.html │ └── app.js ├── 03 │ ├── index.html │ └── app.js ├── 01 │ └── index.html └── 02 │ └── index.html ├── generative-plane ├── texture.jpg ├── app.js ├── Drawer.js ├── index.html └── webgl.js ├── generative-lines-demos-2013-10 ├── texture.jpg ├── index-shader.html ├── app.js ├── webgl.js ├── circle.html └── index.html ├── README.markdown ├── public └── webgl.js └── tangle ├── webgl.js ├── index.html └── app.js /Resume/js/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Resume/app/geometric.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Resume/css/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Resume/img/.gitignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Resume/js/main.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Resume/js/planworked.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Resume/.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE 2 | *.swp 3 | -------------------------------------------------------------------------------- /Resume/robots.txt: -------------------------------------------------------------------------------- 1 | # robotstxt.org/ 2 | 3 | User-agent: * 4 | -------------------------------------------------------------------------------- /Resume/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/Resume/favicon.ico -------------------------------------------------------------------------------- /drawer/texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/drawer/texture.jpg -------------------------------------------------------------------------------- /sheet/texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/sheet/texture.jpg -------------------------------------------------------------------------------- /spikes/texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/spikes/texture.jpg -------------------------------------------------------------------------------- /t5/01/texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/01/texture.jpg -------------------------------------------------------------------------------- /t5/02/texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/02/texture.jpg -------------------------------------------------------------------------------- /tangl3/texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/tangl3/texture.jpg -------------------------------------------------------------------------------- /Resume/fonts/DINWeb.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/Resume/fonts/DINWeb.eot -------------------------------------------------------------------------------- /lessons/05/texture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/lessons/05/texture.png -------------------------------------------------------------------------------- /lessons/06/texture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/lessons/06/texture.png -------------------------------------------------------------------------------- /lessons/07/texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/lessons/07/texture.jpg -------------------------------------------------------------------------------- /lessons/08/texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/lessons/08/texture.jpg -------------------------------------------------------------------------------- /lessons/09/texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/lessons/09/texture.jpg -------------------------------------------------------------------------------- /lessons/10/texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/lessons/10/texture.jpg -------------------------------------------------------------------------------- /t5/01/together_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/01/together_logo.png -------------------------------------------------------------------------------- /t5/02/together_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/02/together_logo.png -------------------------------------------------------------------------------- /Resume/fonts/DINWeb.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/Resume/fonts/DINWeb.woff -------------------------------------------------------------------------------- /generative-plane/texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/generative-plane/texture.jpg -------------------------------------------------------------------------------- /Resume/fonts/DINWeb-Light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/Resume/fonts/DINWeb-Light.eot -------------------------------------------------------------------------------- /Resume/fonts/DINWeb-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/Resume/fonts/DINWeb-Light.woff -------------------------------------------------------------------------------- /t5/01/together_logo_trans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/01/together_logo_trans.png -------------------------------------------------------------------------------- /t5/02/together_logo_trans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/02/together_logo_trans.png -------------------------------------------------------------------------------- /t5/01/together-images/+1_TRANS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/01/together-images/+1_TRANS.png -------------------------------------------------------------------------------- /t5/01/together-images/+2_TRANS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/01/together-images/+2_TRANS.png -------------------------------------------------------------------------------- /t5/01/together-images/-0_TRANS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/01/together-images/-0_TRANS.png -------------------------------------------------------------------------------- /t5/01/together-images/-1_TRANS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/01/together-images/-1_TRANS.png -------------------------------------------------------------------------------- /t5/01/together-images/-2_TRANS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/01/together-images/-2_TRANS.png -------------------------------------------------------------------------------- /t5/02/together-images/+1_TRANS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/02/together-images/+1_TRANS.png -------------------------------------------------------------------------------- /t5/02/together-images/+2_TRANS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/02/together-images/+2_TRANS.png -------------------------------------------------------------------------------- /t5/02/together-images/-0_TRANS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/02/together-images/-0_TRANS.png -------------------------------------------------------------------------------- /t5/02/together-images/-1_TRANS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/02/together-images/-1_TRANS.png -------------------------------------------------------------------------------- /t5/02/together-images/-2_TRANS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/02/together-images/-2_TRANS.png -------------------------------------------------------------------------------- /t5/01/together-images/+0_PATTERN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/01/together-images/+0_PATTERN.png -------------------------------------------------------------------------------- /t5/01/together-images/+1_PATTERN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/01/together-images/+1_PATTERN.png -------------------------------------------------------------------------------- /t5/01/together-images/+2_PATTERN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/01/together-images/+2_PATTERN.png -------------------------------------------------------------------------------- /t5/01/together-images/-1_PATTERN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/01/together-images/-1_PATTERN.png -------------------------------------------------------------------------------- /t5/01/together-images/-2_PATTERN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/01/together-images/-2_PATTERN.png -------------------------------------------------------------------------------- /t5/02/together-images/+0_PATTERN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/02/together-images/+0_PATTERN.png -------------------------------------------------------------------------------- /t5/02/together-images/+1_PATTERN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/02/together-images/+1_PATTERN.png -------------------------------------------------------------------------------- /t5/02/together-images/+2_PATTERN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/02/together-images/+2_PATTERN.png -------------------------------------------------------------------------------- /t5/02/together-images/-1_PATTERN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/02/together-images/-1_PATTERN.png -------------------------------------------------------------------------------- /t5/02/together-images/-2_PATTERN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/t5/02/together-images/-2_PATTERN.png -------------------------------------------------------------------------------- /Resume/apple-touch-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/Resume/apple-touch-icon-precomposed.png -------------------------------------------------------------------------------- /generative-lines-demos-2013-10/texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whatever/webgl/master/generative-lines-demos-2013-10/texture.jpg -------------------------------------------------------------------------------- /Resume/.gitignore: -------------------------------------------------------------------------------- 1 | # Include your project-specific ignores in this file 2 | # Read about how to use .gitignore: https://help.github.com/articles/ignoring-files 3 | -------------------------------------------------------------------------------- /Resume/humans.txt: -------------------------------------------------------------------------------- 1 | # humanstxt.org/ 2 | # The humans responsible & technology colophon 3 | 4 | # TEAM 5 | 6 | -- -- 7 | 8 | # THANKS 9 | 10 | 11 | 12 | # TECHNOLOGY COLOPHON 13 | 14 | HTML5, CSS3 15 | Normalize.css, jQuery, Modernizr 16 | -------------------------------------------------------------------------------- /t5/02/yo.m: -------------------------------------------------------------------------------- 1 | X = [ -100:100 ] / 100; 2 | F = fft(f(X)); 3 | 4 | x = X; 5 | 6 | 7 | function y = f(x) 8 | y = (1 - x .^ 2.0) .^ 0.5; 9 | endfunction 10 | 11 | size(F) 12 | 13 | function y = f_approx (x) 14 | y = (1 .- x .^ 2.0) .^ 0.5; 15 | endfunction 16 | 17 | y = f_approx(X); 18 | 19 | % y(201) 20 | 21 | % f_approx(X) 22 | 23 | % plot(X, f(X)) 24 | % plot(X, f_approx(X)) 25 | -------------------------------------------------------------------------------- /Resume/css/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: FFDin; 3 | src: url("../fonts/public/DINWeb-Light.eot"); 4 | font-weight: 200; 5 | } 6 | @font-face { 7 | font-family: FFDin; 8 | src: url("../fonts/DINWeb-Light.woff") format("woff"); 9 | font-weight: 200; 10 | } 11 | @font-face { 12 | font-family: FFDin; 13 | src: url("../fonts/DINWeb.eot"); 14 | font-weight: 400; 15 | } 16 | @font-face { 17 | font-family: FFDin; 18 | src: url("../fonts/DINWeb.woff") format("woff"); 19 | font-weight: 400; 20 | } 21 | -------------------------------------------------------------------------------- /Resume/crossdomain.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 16 | -------------------------------------------------------------------------------- /Resume/js/plugins.js: -------------------------------------------------------------------------------- 1 | // Avoid `console` errors in browsers that lack a console. 2 | (function() { 3 | var method; 4 | var noop = function () {}; 5 | var methods = [ 6 | 'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 7 | 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 8 | 'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', 9 | 'timeStamp', 'trace', 'warn' 10 | ]; 11 | var length = methods.length; 12 | var console = (window.console = window.console || {}); 13 | 14 | while (length--) { 15 | method = methods[length]; 16 | 17 | // Only stub undefined methods. 18 | if (!console[method]) { 19 | console[method] = noop; 20 | } 21 | } 22 | }()); 23 | 24 | // Place any jQuery/helper plugins in here. 25 | -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | # WebGL Exercies 2 | 3 | Lessons from: 4 | [learningwebgl](http://learningwebgl.com/blog/?page_id=1217) 5 | 6 | * Together Mockups: 7 | * *t5/01* : 5 overlapping planes with additive blending 8 | * *t5/02* : 5 overlapping planes with additive blending and screen moire 9 | * Tutorials : webpages demoing basic webgl stuff 10 | * *01/* : Draws a triangle with a simple shader 11 | * *02/* : Draws a triangle with colored vertices. Enables alpha blending. 12 | * *03/* : Draw a rotating triangle. 13 | * *04/* : ... 14 | * ... 15 | * *09/* : Draws a cube with marble texture 16 | * Demos : Demos and samples that I think are improvements on existing ones. 17 | * *min-2d/* : Minimal 2d WebGL example 18 | * *min/* : Minimal WebGL example 19 | * Libs 20 | * *public/* : js and css files shared across directories 21 | * Experimental 22 | -------------------------------------------------------------------------------- /Resume/sendemail.php: -------------------------------------------------------------------------------- 1 | 0, 'message' => 'very successful')); 28 | else 29 | echo json_encode(array('resp' => 1, 'message' => 'such bad')); 30 | 31 | ?> 32 | -------------------------------------------------------------------------------- /t5/01/yo.m: -------------------------------------------------------------------------------- 1 | % global 2 | global a = []; 3 | global b = []; 4 | global y_approx = []; 5 | 6 | % 7 | XX = [-100:100]/100; 8 | YY = zeros(1, 201); 9 | ONES = ones(1, 201); 10 | 11 | % f 12 | function y = f(x) 13 | % x = mod(x+1, 2); 14 | % x -= 1; 15 | y = (1 - x .^ 2.0) .^ 0.5; 16 | endfunction 17 | 18 | a = zeros(1, 10); 19 | b = zeros(1, 10); 20 | y = zeros(size(XX)); 21 | 22 | N = 24; 23 | 24 | for n = [ 1 : N ] 25 | a(n) = 1/2*quad(@(x)( f(x) * cos(n * x)), -1, +1); 26 | b(n) = 1/2*quad(@(x)( f(x) * sin(n * x)), -1, +1); 27 | end 28 | 29 | a(1) = 1/4*quad(@(x)( f(x) ), -1, +1) + .75; 30 | b(1) = 0; 31 | 32 | 33 | XX = [-100:100]/50; 34 | 35 | for n = [ 1 : N ] 36 | YY += (a(n) * cos(n * XX) + b(n) * sin(n * XX))/1.6; 37 | end 38 | 39 | plot(XX, f(XX), XX, YY, XX, ifft(fft(f(XX)))); 40 | 41 | disp("a"); 42 | for i = [1:N] 43 | disp(a(i)); 44 | end 45 | 46 | disp("b"); 47 | for i = [1:N] 48 | disp(b(i)); 49 | end 50 | 51 | % for i = [1:N] 52 | % sprintf("x = %f", b[i]); 53 | % end 54 | -------------------------------------------------------------------------------- /Resume/css/planworked.css: -------------------------------------------------------------------------------- 1 | .pw-x { 2 | } 3 | 4 | .pw-y { 5 | } 6 | 7 | .pw-z { 8 | } 9 | 10 | .pw-table { 11 | } 12 | 13 | .pw-table td { 14 | text-align: left; 15 | vertical-align: top; 16 | } 17 | 18 | .pw-table { 19 | border-collapse: collapse; 20 | } 21 | 22 | .pw-table td { 23 | padding-top: 0; 24 | padding-left: 0; 25 | padding-bottom: 10px; 26 | } 27 | 28 | .pw-table td:first-child { 29 | padding-right: 25px; 30 | } 31 | 32 | .pw-inline-list { 33 | padding: 0; 34 | margin: .25em 0; 35 | } 36 | .pw-inline-list li { 37 | display: inline; 38 | padding: 4px 1.0em 0 0; 39 | margin: 0; 40 | } 41 | 42 | ol.pw-list, ul.pw-list { 43 | font-size: 80%; 44 | padding: 20px; 45 | margin: 0; 46 | } 47 | 48 | ol.pw-list li, ul.pw-list li { 49 | list-style-type: square; 50 | margin-top: 0; 51 | margin-bottom: .5em; 52 | } 53 | 54 | .pw-col-container { 55 | width: 800px; 56 | } 57 | .pw-col { 58 | float: left; 59 | width: 340px; 60 | } 61 | 62 | .pw-col-3 { 63 | float: left; 64 | width: 25%; 65 | padding: 0; 66 | margin: 0; 67 | } 68 | 69 | .pw-break { 70 | } 71 | -------------------------------------------------------------------------------- /Resume/LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) HTML5 Boilerplate 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 7 | of the Software, and to permit persons to whom the Software is furnished to do 8 | so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /Resume/js/countpixels.js: -------------------------------------------------------------------------------- 1 | var countpixels = (function () { 2 | 3 | var _prev = { 4 | scrollTop : NaN, 5 | time : NaN, 6 | dx : NaN, 7 | dt : NaN, 8 | }; 9 | 10 | var _now = { 11 | scrollTop : NaN, 12 | time : NaN, 13 | dx : NaN, 14 | dt : NaN, 15 | }; 16 | 17 | document.addEventListener("scroll", _onscroll); 18 | document.addEventListener("scroll", function () { 19 | }); 20 | 21 | return { 22 | }; 23 | 24 | function _onscroll () { 25 | var scrollTop = _scrolltop(); 26 | var time = _time(); 27 | var dx = scrollTop - _prev.scrollTop; 28 | var dt = time - _prev.time; 29 | 30 | _prev = _now; 31 | 32 | _now = { 33 | scrollTop : scrollTop, 34 | time : time, 35 | dx : dx, 36 | dt : dt, 37 | }; 38 | } 39 | 40 | function _scrolltop () { 41 | if(typeof pageYOffset!= 'undefined') { 42 | //most browsers except IE before #9 43 | return pageYOffset; 44 | } 45 | var B = document.body; //IE 'quirks' 46 | var D = document.documentElement; //IE with doctype 47 | D = (D.clientHeight) ? D: B; 48 | return D.scrollTop; 49 | } 50 | 51 | var _t = +new Date(); 52 | function _time () { 53 | var elapsed = (new Date() - _t)/1000.; 54 | _t = +new Date(); 55 | return elapsed; 56 | } 57 | })(); 58 | -------------------------------------------------------------------------------- /public/webgl.js: -------------------------------------------------------------------------------- 1 | var webgl = { 2 | ___about : "Barebones webgl", 3 | getShader : function (id) { 4 | var shader = document.getElementById(id); 5 | if (!shader) 6 | throw "Fuck"; 7 | return shader.text; 8 | }, 9 | createProgram : function (text, type) { 10 | return undefined; 11 | }, 12 | 13 | /** 14 | * Perspective-Matrix 15 | * @param {object} m an object specifying the values used to compute the 16 | * perspective matrix via frustrum. 17 | * @return {array} a 16-element array representing a matrix 18 | */ 19 | perspectiveMatrix : function (m) { 20 | m = m || {}; 21 | m.fieldOfView = m.fieldOfView || 30.0; 22 | m.aspectRatio = m.aspectRatio || 1; 23 | m.nearPlane = m.nearPlane || 1.0; 24 | m.farPlane = m.farPlane || 10000.0; 25 | m.top = m.top || (m.nearPlane * Math.tan(m.fieldOfView * Math.PI / 360.0)); 26 | m.bottom = -m.top; 27 | m.right = m.top * m.aspectRatio; 28 | m.left = -m.right; 29 | 30 | var a = (m.right + m.left) / (m.right - m.left); 31 | var b = (m.top + m.bottom) / (m.top - m.bottom); 32 | var c = (m.farPlane + m.nearPlane) / (m.farPlane - m.nearPlane); 33 | var d = (2 * m.farPlane * m.nearPlane) / (m.farPlane - m.nearPlane); 34 | var x = (2 * m.nearPlane) / (m.right - m.left); 35 | var y = (2 * m.nearPlane) / (m.top - m.bottom); 36 | 37 | return [ 38 | x, 0, a, 0, 39 | 0, y, b, 0, 40 | 0, 0, c, d, 41 | 0, 0, -1, 0 42 | ]; 43 | } 44 | }; 45 | 46 | window.requestAnimFrame = (function() { 47 | return 48 | window.requestAnimationFrame || 49 | window.webkitRequestAnimationFrame || 50 | window.mozRequestAnimationFrame || 51 | window.oRequestAnimationFrame || 52 | window.msRequestAnimationFrame; 53 | })(); 54 | -------------------------------------------------------------------------------- /tangle/webgl.js: -------------------------------------------------------------------------------- 1 | var webgl = { 2 | ___about : "Barebones webgl", 3 | getShader : function (id) { 4 | var shader = document.getElementById(id); 5 | if (!shader) 6 | throw "Fuck"; 7 | return shader.text; 8 | }, 9 | createProgram : function (text, type) { 10 | return undefined; 11 | }, 12 | 13 | /** 14 | * Perspective-Matrix 15 | * @param {object} m an object specifying the values used to compute the 16 | * perspective matrix via frustrum. 17 | * @return {array} a 16-element array representing a matrix 18 | */ 19 | perspectiveMatrix : function (m) { 20 | m = m || {}; 21 | m.fieldOfView = m.fieldOfView || 30.0; 22 | m.aspectRatio = m.aspectRatio || 1; 23 | m.nearPlane = m.nearPlane || 1.0; 24 | m.farPlane = m.farPlane || 10000.0; 25 | m.top = m.top || (m.nearPlane * Math.tan(m.fieldOfView * Math.PI / 360.0)); 26 | m.bottom = -m.top; 27 | m.right = m.top * m.aspectRatio; 28 | m.left = -m.right; 29 | 30 | var a = (m.right + m.left) / (m.right - m.left); 31 | var b = (m.top + m.bottom) / (m.top - m.bottom); 32 | var c = (m.farPlane + m.nearPlane) / (m.farPlane - m.nearPlane); 33 | var d = (2 * m.farPlane * m.nearPlane) / (m.farPlane - m.nearPlane); 34 | var x = (2 * m.nearPlane) / (m.right - m.left); 35 | var y = (2 * m.nearPlane) / (m.top - m.bottom); 36 | 37 | return [ 38 | x, 0, a, 0, 39 | 0, y, b, 0, 40 | 0, 0, c, d, 41 | 0, 0, -1, 0 42 | ]; 43 | } 44 | }; 45 | 46 | window.requestAnimFrame = (function() { 47 | return 48 | window.requestAnimationFrame || 49 | window.webkitRequestAnimationFrame || 50 | window.mozRequestAnimationFrame || 51 | window.oRequestAnimationFrame || 52 | window.msRequestAnimationFrame; 53 | })(); 54 | -------------------------------------------------------------------------------- /lessons/04/webgl.js: -------------------------------------------------------------------------------- 1 | var webgl = { 2 | ___about : "Barebones webgl", 3 | getShader : function (id) { 4 | var shader = document.getElementById(id); 5 | if (!shader) 6 | throw "Fuck"; 7 | return shader.text; 8 | }, 9 | createProgram : function (text, type) { 10 | return undefined; 11 | }, 12 | 13 | /** 14 | * Perspective-Matrix 15 | * @param {object} m an object specifying the values used to compute the 16 | * perspective matrix via frustrum. 17 | * @return {array} a 16-element array representing a matrix 18 | */ 19 | perspectiveMatrix : function (m) { 20 | m = m || {}; 21 | m.fieldOfView = m.fieldOfView || 30.0; 22 | m.aspectRatio = m.aspectRatio || 1; 23 | m.nearPlane = m.nearPlane || 1.0; 24 | m.farPlane = m.farPlane || 10000.0; 25 | m.top = m.top || (m.nearPlane * Math.tan(m.fieldOfView * Math.PI / 360.0)); 26 | m.bottom = -m.top; 27 | m.right = m.top * m.aspectRatio; 28 | m.left = -m.right; 29 | 30 | var a = (m.right + m.left) / (m.right - m.left); 31 | var b = (m.top + m.bottom) / (m.top - m.bottom); 32 | var c = (m.farPlane + m.nearPlane) / (m.farPlane - m.nearPlane); 33 | var d = (2 * m.farPlane * m.nearPlane) / (m.farPlane - m.nearPlane); 34 | var x = (2 * m.nearPlane) / (m.right - m.left); 35 | var y = (2 * m.nearPlane) / (m.top - m.bottom); 36 | 37 | return [ 38 | x, 0, a, 0, 39 | 0, y, b, 0, 40 | 0, 0, c, d, 41 | 0, 0, -1, 0 42 | ]; 43 | } 44 | }; 45 | 46 | window.requestAnimFrame = (function() { 47 | return 48 | window.requestAnimationFrame || 49 | window.webkitRequestAnimationFrame || 50 | window.mozRequestAnimationFrame || 51 | window.oRequestAnimationFrame || 52 | window.msRequestAnimationFrame; 53 | })(); 54 | -------------------------------------------------------------------------------- /lessons/05/webgl.js: -------------------------------------------------------------------------------- 1 | var webgl = { 2 | ___about : "Barebones webgl", 3 | getShader : function (id) { 4 | var shader = document.getElementById(id); 5 | if (!shader) 6 | throw "Fuck"; 7 | return shader.text; 8 | }, 9 | createProgram : function (text, type) { 10 | return undefined; 11 | }, 12 | 13 | /** 14 | * Perspective-Matrix 15 | * @param {object} m an object specifying the values used to compute the 16 | * perspective matrix via frustrum. 17 | * @return {array} a 16-element array representing a matrix 18 | */ 19 | perspectiveMatrix : function (m) { 20 | m = m || {}; 21 | m.fieldOfView = m.fieldOfView || 30.0; 22 | m.aspectRatio = m.aspectRatio || 1; 23 | m.nearPlane = m.nearPlane || 1.0; 24 | m.farPlane = m.farPlane || 10000.0; 25 | m.top = m.top || (m.nearPlane * Math.tan(m.fieldOfView * Math.PI / 360.0)); 26 | m.bottom = -m.top; 27 | m.right = m.top * m.aspectRatio; 28 | m.left = -m.right; 29 | 30 | var a = (m.right + m.left) / (m.right - m.left); 31 | var b = (m.top + m.bottom) / (m.top - m.bottom); 32 | var c = (m.farPlane + m.nearPlane) / (m.farPlane - m.nearPlane); 33 | var d = (2 * m.farPlane * m.nearPlane) / (m.farPlane - m.nearPlane); 34 | var x = (2 * m.nearPlane) / (m.right - m.left); 35 | var y = (2 * m.nearPlane) / (m.top - m.bottom); 36 | 37 | return [ 38 | x, 0, a, 0, 39 | 0, y, b, 0, 40 | 0, 0, c, d, 41 | 0, 0, -1, 0 42 | ]; 43 | } 44 | }; 45 | 46 | window.requestAnimFrame = (function() { 47 | return 48 | window.requestAnimationFrame || 49 | window.webkitRequestAnimationFrame || 50 | window.mozRequestAnimationFrame || 51 | window.oRequestAnimationFrame || 52 | window.msRequestAnimationFrame; 53 | })(); 54 | -------------------------------------------------------------------------------- /lessons/06/webgl.js: -------------------------------------------------------------------------------- 1 | var webgl = { 2 | ___about : "Barebones webgl", 3 | getShader : function (id) { 4 | var shader = document.getElementById(id); 5 | if (!shader) 6 | throw "Fuck"; 7 | return shader.text; 8 | }, 9 | createProgram : function (text, type) { 10 | return undefined; 11 | }, 12 | 13 | /** 14 | * Perspective-Matrix 15 | * @param {object} m an object specifying the values used to compute the 16 | * perspective matrix via frustrum. 17 | * @return {array} a 16-element array representing a matrix 18 | */ 19 | perspectiveMatrix : function (m) { 20 | m = m || {}; 21 | m.fieldOfView = m.fieldOfView || 30.0; 22 | m.aspectRatio = m.aspectRatio || 1; 23 | m.nearPlane = m.nearPlane || 1.0; 24 | m.farPlane = m.farPlane || 10000.0; 25 | m.top = m.top || (m.nearPlane * Math.tan(m.fieldOfView * Math.PI / 360.0)); 26 | m.bottom = -m.top; 27 | m.right = m.top * m.aspectRatio; 28 | m.left = -m.right; 29 | 30 | var a = (m.right + m.left) / (m.right - m.left); 31 | var b = (m.top + m.bottom) / (m.top - m.bottom); 32 | var c = (m.farPlane + m.nearPlane) / (m.farPlane - m.nearPlane); 33 | var d = (2 * m.farPlane * m.nearPlane) / (m.farPlane - m.nearPlane); 34 | var x = (2 * m.nearPlane) / (m.right - m.left); 35 | var y = (2 * m.nearPlane) / (m.top - m.bottom); 36 | 37 | return [ 38 | x, 0, a, 0, 39 | 0, y, b, 0, 40 | 0, 0, c, d, 41 | 0, 0, -1, 0 42 | ]; 43 | } 44 | }; 45 | 46 | window.requestAnimFrame = (function() { 47 | return 48 | window.requestAnimationFrame || 49 | window.webkitRequestAnimationFrame || 50 | window.mozRequestAnimationFrame || 51 | window.oRequestAnimationFrame || 52 | window.msRequestAnimationFrame; 53 | })(); 54 | -------------------------------------------------------------------------------- /lessons/07/webgl.js: -------------------------------------------------------------------------------- 1 | var webgl = { 2 | ___about : "Barebones webgl", 3 | getShader : function (id) { 4 | var shader = document.getElementById(id); 5 | if (!shader) 6 | throw "Fuck"; 7 | return shader.text; 8 | }, 9 | createProgram : function (text, type) { 10 | return undefined; 11 | }, 12 | 13 | /** 14 | * Perspective-Matrix 15 | * @param {object} m an object specifying the values used to compute the 16 | * perspective matrix via frustrum. 17 | * @return {array} a 16-element array representing a matrix 18 | */ 19 | perspectiveMatrix : function (m) { 20 | m = m || {}; 21 | m.fieldOfView = m.fieldOfView || 30.0; 22 | m.aspectRatio = m.aspectRatio || 1; 23 | m.nearPlane = m.nearPlane || 1.0; 24 | m.farPlane = m.farPlane || 10000.0; 25 | m.top = m.top || (m.nearPlane * Math.tan(m.fieldOfView * Math.PI / 360.0)); 26 | m.bottom = -m.top; 27 | m.right = m.top * m.aspectRatio; 28 | m.left = -m.right; 29 | 30 | var a = (m.right + m.left) / (m.right - m.left); 31 | var b = (m.top + m.bottom) / (m.top - m.bottom); 32 | var c = (m.farPlane + m.nearPlane) / (m.farPlane - m.nearPlane); 33 | var d = (2 * m.farPlane * m.nearPlane) / (m.farPlane - m.nearPlane); 34 | var x = (2 * m.nearPlane) / (m.right - m.left); 35 | var y = (2 * m.nearPlane) / (m.top - m.bottom); 36 | 37 | return [ 38 | x, 0, a, 0, 39 | 0, y, b, 0, 40 | 0, 0, c, d, 41 | 0, 0, -1, 0 42 | ]; 43 | } 44 | }; 45 | 46 | window.requestAnimFrame = (function() { 47 | return 48 | window.requestAnimationFrame || 49 | window.webkitRequestAnimationFrame || 50 | window.mozRequestAnimationFrame || 51 | window.oRequestAnimationFrame || 52 | window.msRequestAnimationFrame; 53 | })(); 54 | -------------------------------------------------------------------------------- /lessons/08/webgl.js: -------------------------------------------------------------------------------- 1 | var webgl = { 2 | ___about : "Barebones webgl", 3 | getShader : function (id) { 4 | var shader = document.getElementById(id); 5 | if (!shader) 6 | throw "Fuck"; 7 | return shader.text; 8 | }, 9 | createProgram : function (text, type) { 10 | return undefined; 11 | }, 12 | 13 | /** 14 | * Perspective-Matrix 15 | * @param {object} m an object specifying the values used to compute the 16 | * perspective matrix via frustrum. 17 | * @return {array} a 16-element array representing a matrix 18 | */ 19 | perspectiveMatrix : function (m) { 20 | m = m || {}; 21 | m.fieldOfView = m.fieldOfView || 30.0; 22 | m.aspectRatio = m.aspectRatio || 1; 23 | m.nearPlane = m.nearPlane || 1.0; 24 | m.farPlane = m.farPlane || 10000.0; 25 | m.top = m.top || (m.nearPlane * Math.tan(m.fieldOfView * Math.PI / 360.0)); 26 | m.bottom = -m.top; 27 | m.right = m.top * m.aspectRatio; 28 | m.left = -m.right; 29 | 30 | var a = (m.right + m.left) / (m.right - m.left); 31 | var b = (m.top + m.bottom) / (m.top - m.bottom); 32 | var c = (m.farPlane + m.nearPlane) / (m.farPlane - m.nearPlane); 33 | var d = (2 * m.farPlane * m.nearPlane) / (m.farPlane - m.nearPlane); 34 | var x = (2 * m.nearPlane) / (m.right - m.left); 35 | var y = (2 * m.nearPlane) / (m.top - m.bottom); 36 | 37 | return [ 38 | x, 0, a, 0, 39 | 0, y, b, 0, 40 | 0, 0, c, d, 41 | 0, 0, -1, 0 42 | ]; 43 | } 44 | }; 45 | 46 | window.requestAnimFrame = (function() { 47 | return 48 | window.requestAnimationFrame || 49 | window.webkitRequestAnimationFrame || 50 | window.mozRequestAnimationFrame || 51 | window.oRequestAnimationFrame || 52 | window.msRequestAnimationFrame; 53 | })(); 54 | -------------------------------------------------------------------------------- /tangle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | xx : tangle 5 | 6 | 17 | 18 | 25 | 26 | 27 | 43 | 55 | 56 | 57 | 58 |
WebGL is unsupported.
59 | 60 | 61 | -------------------------------------------------------------------------------- /lessons/03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Lesson 03 5 | 6 | 17 | 18 | 25 | 26 | 27 | 43 | 55 | 56 | 57 | 58 |
WebGL is unsupported.
59 | 60 | 61 | -------------------------------------------------------------------------------- /lessons/04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 04 : vbo 5 | 6 | 20 | 21 | 28 | 29 | 30 | 46 | 58 | 59 | 60 | 61 |
WebGL is unsupported.
62 | 63 | 64 | -------------------------------------------------------------------------------- /lessons/05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 05 : vbo 5 | 6 | 23 | 24 | 32 | 33 | 34 | 50 | 62 | 63 | 64 | 65 |
WebGL is unsupported.
66 | 67 | 68 | -------------------------------------------------------------------------------- /lessons/06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 06 : types of textures 5 | 6 | 23 | 24 | 32 | 33 | 34 | 50 | 62 | 63 | 64 | 65 |
WebGL is unsupported.
66 | 67 | 68 | -------------------------------------------------------------------------------- /sheet/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | blank : ___ 5 | 6 | 7 | 8 | 20 | 21 | 29 | 30 | 31 | 47 | 63 | 64 | 65 | 66 |
WebGL is unsupported.
67 | 68 | 69 | -------------------------------------------------------------------------------- /tangl3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | blank : ___ 5 | 6 | 7 | 8 | 20 | 21 | 29 | 30 | 31 | 47 | 63 | 64 | 65 | 66 |
WebGL is unsupported.
67 | 68 | 69 | -------------------------------------------------------------------------------- /Resume/README.md: -------------------------------------------------------------------------------- 1 | # [HTML5 Boilerplate](http://html5boilerplate.com) 2 | 3 | HTML5 Boilerplate is a professional front-end template for building fast, 4 | robust, and adaptable web apps or sites. 5 | 6 | This project is the product of many years of iterative development and combined 7 | community knowledge. It does not impose a specific development philosophy or 8 | framework, so you're free to architect your code in the way that you want. 9 | 10 | * Source: [https://github.com/h5bp/html5-boilerplate](https://github.com/h5bp/html5-boilerplate) 11 | * Homepage: [http://html5boilerplate.com](http://html5boilerplate.com) 12 | * Twitter: [@h5bp](http://twitter.com/h5bp) 13 | 14 | 15 | ## Quick start 16 | 17 | Choose one of the following options: 18 | 19 | 1. Download the latest stable release from 20 | [html5boilerplate.com](http://html5boilerplate.com/) or a custom build from 21 | [Initializr](http://www.initializr.com). 22 | 2. Clone the git repo — `git clone 23 | https://github.com/h5bp/html5-boilerplate.git` - and checkout the tagged 24 | release you'd like to use. 25 | 26 | 27 | ## Features 28 | 29 | * HTML5 ready. Use the new elements with confidence. 30 | * Cross-browser compatible (Chrome, Opera, Safari, Firefox 3.6+, IE6+). 31 | * Designed with progressive enhancement in mind. 32 | * Includes [Normalize.css](http://necolas.github.com/normalize.css/) for CSS 33 | normalizations and common bug fixes. 34 | * The latest [jQuery](http://jquery.com/) via CDN, with a local fallback. 35 | * The latest [Modernizr](http://modernizr.com/) build for feature detection. 36 | * IE-specific classes for easier cross-browser control. 37 | * Placeholder CSS Media Queries. 38 | * Useful CSS helpers. 39 | * Default print CSS, performance optimized. 40 | * Protection against any stray `console.log` causing JavaScript errors in 41 | IE6/7. 42 | * An optimized Google Analytics snippet. 43 | * Apache server caching, compression, and other configuration defaults for 44 | Grade-A performance. 45 | * Cross-domain Ajax and Flash. 46 | * "Delete-key friendly." Easy to strip out parts you don't need. 47 | * Extensive inline and accompanying documentation. 48 | 49 | 50 | ## Documentation 51 | 52 | Take a look at the [documentation table of contents](doc/TOC.md). This 53 | documentation is bundled with the project, which makes it readily available for 54 | offline reading and provides a useful starting point for any documentation you 55 | want to write about your project. 56 | 57 | 58 | ## Contributing 59 | 60 | Anyone and everyone is welcome to [contribute](CONTRIBUTING.md). Hundreds of 61 | developers have helped make the HTML5 Boilerplate what it is today. 62 | -------------------------------------------------------------------------------- /sheet/webgl.js: -------------------------------------------------------------------------------- 1 | var webgl = (function () { 2 | var _mvMatrixStack = [], _pMatrixStack = []; 3 | return { 4 | ___about : "webgl", 5 | mvMatrix : mat4.create(), 6 | pMatrix : mat4.create(), 7 | nMatrix : mat4.create(), 8 | /** 9 | * Get Text of Script Object 10 | * @param {string} id a character-string specifying the id of the script 11 | * element container shader information 12 | * @return {string} source code for a shader 13 | */ 14 | getShader : function (id) { 15 | var shader = document.getElementById(id); 16 | if (!shader) 17 | throw "Fuck"; 18 | return shader.text; 19 | }, 20 | /** 21 | * Create a Program from a Vertex and Fragment Shader 22 | * @param {string} id a character-string specifying the id of the script 23 | * element container shader information 24 | * @return {string} source code for a shader 25 | */ 26 | createProgram : function (text, type) { 27 | return undefined; 28 | }, 29 | /** 30 | * Perspective-Matrix 31 | * @param {object} m an object specifying the values used to compute the 32 | * perspective matrix via frustrum. 33 | * @return {array} a 16-element array representing a matrix 34 | */ 35 | perspectiveMatrix : function (m) { 36 | m = m || {}; 37 | m.fieldOfView = m.fieldOfView || 30.0; 38 | m.aspectRatio = m.aspectRatio || 1; 39 | m.nearPlane = m.nearPlane || .1; 40 | m.farPlane = m.farPlane || 100.0; 41 | 42 | mat4.perspective(m.fieldOfView, m.aspectRatio, m.nearPlane, m.farPlane, this.pMatrix); 43 | return this.pMatrix; 44 | }, 45 | /** 46 | * Push Model View Matrix onto the Stack 47 | * @return {undefined} undefined 48 | */ 49 | pushModelView : function () { 50 | var copy = mat4.create(); 51 | mat4.set(this.mvMatrix, copy); 52 | _mvMatrixStack.push(copy); 53 | }, 54 | /** 55 | * Pop Model View Matrix onto the Stack 56 | * @return {undefined} undefined 57 | */ 58 | popModelView : function () { 59 | this.mvMatrix = _mvMatrixStack.pop(); 60 | }, 61 | /** 62 | * Push Both Model and Perspective Matrix 63 | * @return {undefined} undefined 64 | */ 65 | pushMatrices : function () { 66 | pushModelView(); 67 | _pMatrixStack.push(this.pMatrix); 68 | }, 69 | /** 70 | * Pop Both Model and Perspective Matrix 71 | * @return {undefined} undefined 72 | */ 73 | popMatrices : function () { 74 | popModelView(); 75 | this.pMatrix = _pMatrixStack.pop(); 76 | } 77 | }; 78 | })(); 79 | 80 | window.requestAnimFrame = (function() { 81 | return 82 | window.requestAnimationFrame || 83 | window.webkitRequestAnimationFrame || 84 | window.mozRequestAnimationFrame || 85 | window.oRequestAnimationFrame || 86 | window.msRequestAnimationFrame || 87 | function (callback) { setInterval(callback, 1000/60); } 88 | })(); 89 | -------------------------------------------------------------------------------- /tangl3/webgl.js: -------------------------------------------------------------------------------- 1 | var webgl = (function () { 2 | var _mvMatrixStack = [], _pMatrixStack = []; 3 | return { 4 | ___about : "webgl", 5 | mvMatrix : mat4.create(), 6 | pMatrix : mat4.create(), 7 | nMatrix : mat4.create(), 8 | /** 9 | * Get Text of Script Object 10 | * @param {string} id a character-string specifying the id of the script 11 | * element container shader information 12 | * @return {string} source code for a shader 13 | */ 14 | getShader : function (id) { 15 | var shader = document.getElementById(id); 16 | if (!shader) 17 | throw "Fuck"; 18 | return shader.text; 19 | }, 20 | /** 21 | * Create a Program from a Vertex and Fragment Shader 22 | * @param {string} id a character-string specifying the id of the script 23 | * element container shader information 24 | * @return {string} source code for a shader 25 | */ 26 | createProgram : function (text, type) { 27 | return undefined; 28 | }, 29 | /** 30 | * Perspective-Matrix 31 | * @param {object} m an object specifying the values used to compute the 32 | * perspective matrix via frustrum. 33 | * @return {array} a 16-element array representing a matrix 34 | */ 35 | perspectiveMatrix : function (m) { 36 | m = m || {}; 37 | m.fieldOfView = m.fieldOfView || 30.0; 38 | m.aspectRatio = m.aspectRatio || 1; 39 | m.nearPlane = m.nearPlane || .1; 40 | m.farPlane = m.farPlane || 100.0; 41 | 42 | mat4.perspective(m.fieldOfView, m.aspectRatio, m.nearPlane, m.farPlane, this.pMatrix); 43 | return this.pMatrix; 44 | }, 45 | /** 46 | * Push Model View Matrix onto the Stack 47 | * @return {undefined} undefined 48 | */ 49 | pushModelView : function () { 50 | var copy = mat4.create(); 51 | mat4.set(this.mvMatrix, copy); 52 | _mvMatrixStack.push(copy); 53 | }, 54 | /** 55 | * Pop Model View Matrix onto the Stack 56 | * @return {undefined} undefined 57 | */ 58 | popModelView : function () { 59 | this.mvMatrix = _mvMatrixStack.pop(); 60 | }, 61 | /** 62 | * Push Both Model and Perspective Matrix 63 | * @return {undefined} undefined 64 | */ 65 | pushMatrices : function () { 66 | pushModelView(); 67 | _pMatrixStack.push(this.pMatrix); 68 | }, 69 | /** 70 | * Pop Both Model and Perspective Matrix 71 | * @return {undefined} undefined 72 | */ 73 | popMatrices : function () { 74 | popModelView(); 75 | this.pMatrix = _pMatrixStack.pop(); 76 | } 77 | }; 78 | })(); 79 | 80 | window.requestAnimFrame = (function() { 81 | return 82 | window.requestAnimationFrame || 83 | window.webkitRequestAnimationFrame || 84 | window.mozRequestAnimationFrame || 85 | window.oRequestAnimationFrame || 86 | window.msRequestAnimationFrame || 87 | function (callback) { setInterval(callback, 1000/60); } 88 | })(); 89 | -------------------------------------------------------------------------------- /lessons/09/webgl.js: -------------------------------------------------------------------------------- 1 | var webgl = (function () { 2 | var _mvMatrixStack = [], _pMatrixStack = []; 3 | return { 4 | ___about : "webgl", 5 | mvMatrix : mat4.create(), 6 | pMatrix : mat4.create(), 7 | nMatrix : mat4.create(), 8 | /** 9 | * Get Text of Script Object 10 | * @param {string} id a character-string specifying the id of the script 11 | * element container shader information 12 | * @return {string} source code for a shader 13 | */ 14 | getShader : function (id) { 15 | var shader = document.getElementById(id); 16 | if (!shader) 17 | throw "Fuck"; 18 | return shader.text; 19 | }, 20 | /** 21 | * Create a Program from a Vertex and Fragment Shader 22 | * @param {string} id a character-string specifying the id of the script 23 | * element container shader information 24 | * @return {string} source code for a shader 25 | */ 26 | createProgram : function (text, type) { 27 | return undefined; 28 | }, 29 | /** 30 | * Perspective-Matrix 31 | * @param {object} m an object specifying the values used to compute the 32 | * perspective matrix via frustrum. 33 | * @return {array} a 16-element array representing a matrix 34 | */ 35 | perspectiveMatrix : function (m) { 36 | m = m || {}; 37 | m.fieldOfView = m.fieldOfView || 30.0; 38 | m.aspectRatio = m.aspectRatio || 1; 39 | m.nearPlane = m.nearPlane || .1; 40 | m.farPlane = m.farPlane || 100.0; 41 | 42 | mat4.perspective(m.fieldOfView, m.aspectRatio, m.nearPlane, m.farPlane, this.pMatrix); 43 | return this.pMatrix; 44 | }, 45 | /** 46 | * Push Model View Matrix onto the Stack 47 | * @return {undefined} undefined 48 | */ 49 | pushModelView : function () { 50 | var copy = mat4.create(); 51 | mat4.set(this.mvMatrix, copy); 52 | _mvMatrixStack.push(copy); 53 | }, 54 | /** 55 | * Pop Model View Matrix onto the Stack 56 | * @return {undefined} undefined 57 | */ 58 | popModelView : function () { 59 | this.mvMatrix = _mvMatrixStack.pop(); 60 | }, 61 | /** 62 | * Push Both Model and Perspective Matrix 63 | * @return {undefined} undefined 64 | */ 65 | pushMatrices : function () { 66 | pushModelView(); 67 | _pMatrixStack.push(this.pMatrix); 68 | }, 69 | /** 70 | * Pop Both Model and Perspective Matrix 71 | * @return {undefined} undefined 72 | */ 73 | popMatrices : function () { 74 | popModelView(); 75 | this.pMatrix = _pMatrixStack.pop(); 76 | } 77 | }; 78 | })(); 79 | 80 | window.requestAnimFrame = (function() { 81 | return 82 | window.requestAnimationFrame || 83 | window.webkitRequestAnimationFrame || 84 | window.mozRequestAnimationFrame || 85 | window.oRequestAnimationFrame || 86 | window.msRequestAnimationFrame || 87 | function (callback) { setInterval(callback, 1000/60); } 88 | })(); 89 | -------------------------------------------------------------------------------- /lessons/10/webgl.js: -------------------------------------------------------------------------------- 1 | var webgl = (function () { 2 | var _mvMatrixStack = [], _pMatrixStack = []; 3 | return { 4 | ___about : "webgl", 5 | mvMatrix : mat4.create(), 6 | pMatrix : mat4.create(), 7 | nMatrix : mat4.create(), 8 | /** 9 | * Get Text of Script Object 10 | * @param {string} id a character-string specifying the id of the script 11 | * element container shader information 12 | * @return {string} source code for a shader 13 | */ 14 | getShader : function (id) { 15 | var shader = document.getElementById(id); 16 | if (!shader) 17 | throw "Fuck"; 18 | return shader.text; 19 | }, 20 | /** 21 | * Create a Program from a Vertex and Fragment Shader 22 | * @param {string} id a character-string specifying the id of the script 23 | * element container shader information 24 | * @return {string} source code for a shader 25 | */ 26 | createProgram : function (text, type) { 27 | return undefined; 28 | }, 29 | /** 30 | * Perspective-Matrix 31 | * @param {object} m an object specifying the values used to compute the 32 | * perspective matrix via frustrum. 33 | * @return {array} a 16-element array representing a matrix 34 | */ 35 | perspectiveMatrix : function (m) { 36 | m = m || {}; 37 | m.fieldOfView = m.fieldOfView || 30.0; 38 | m.aspectRatio = m.aspectRatio || 1; 39 | m.nearPlane = m.nearPlane || .1; 40 | m.farPlane = m.farPlane || 100.0; 41 | 42 | mat4.perspective(m.fieldOfView, m.aspectRatio, m.nearPlane, m.farPlane, this.pMatrix); 43 | return this.pMatrix; 44 | }, 45 | /** 46 | * Push Model View Matrix onto the Stack 47 | * @return {undefined} undefined 48 | */ 49 | pushModelView : function () { 50 | var copy = mat4.create(); 51 | mat4.set(this.mvMatrix, copy); 52 | _mvMatrixStack.push(copy); 53 | }, 54 | /** 55 | * Pop Model View Matrix onto the Stack 56 | * @return {undefined} undefined 57 | */ 58 | popModelView : function () { 59 | this.mvMatrix = _mvMatrixStack.pop(); 60 | }, 61 | /** 62 | * Push Both Model and Perspective Matrix 63 | * @return {undefined} undefined 64 | */ 65 | pushMatrices : function () { 66 | pushModelView(); 67 | _pMatrixStack.push(this.pMatrix); 68 | }, 69 | /** 70 | * Pop Both Model and Perspective Matrix 71 | * @return {undefined} undefined 72 | */ 73 | popMatrices : function () { 74 | popModelView(); 75 | this.pMatrix = _pMatrixStack.pop(); 76 | } 77 | }; 78 | })(); 79 | 80 | window.requestAnimFrame = (function() { 81 | return 82 | window.requestAnimationFrame || 83 | window.webkitRequestAnimationFrame || 84 | window.mozRequestAnimationFrame || 85 | window.oRequestAnimationFrame || 86 | window.msRequestAnimationFrame || 87 | function (callback) { setInterval(callback, 1000/60); } 88 | })(); 89 | -------------------------------------------------------------------------------- /lessons/07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 07 : lighting 5 | 6 | 7 | 8 | 41 | 42 | 54 | 55 | 56 | 72 | 84 | 85 | 86 | 87 |
WebGL is unsupported.
88 | 89 | 90 | -------------------------------------------------------------------------------- /spikes/index-shader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 09 : multi-object drawing 5 | 6 | 7 | 8 | 9 | 39 | 40 | 53 | 54 | 55 | 76 | 92 | 93 | 94 | 95 |
WebGL is unsupported.
96 | 97 | 98 | -------------------------------------------------------------------------------- /generative-lines-demos-2013-10/index-shader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 09 : multi-object drawing 5 | 6 | 7 | 8 | 9 | 39 | 40 | 53 | 54 | 55 | 76 | 92 | 93 | 94 | 95 |
WebGL is unsupported.
96 | 97 | 98 | -------------------------------------------------------------------------------- /Resume/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Open Sans",_"FFDin", "Helvetica Neue", "Helvetica", sans-serif; 3 | font-size: 14pt; 4 | } 5 | 6 | a, a:link, a:visited { 7 | text-decoration: none; 8 | color: rgb(120, 120, 120); 9 | font-weight: 600; 10 | } 11 | 12 | a:active, a:hover { 13 | text-decoration: underline; 14 | color: rgb(60, 60, 60); 15 | } 16 | 17 | @font-face { 18 | } 19 | 20 | #contact-form input, 21 | #contact-form textarea { 22 | font-family: monospace; 23 | color: rgb(80, 80, 80); 24 | font-size: 10pt; 25 | } 26 | 27 | #contact-form input[type=submit] { 28 | width: auto; 29 | } 30 | 31 | #contact-form input { 32 | width: 250px; 33 | } 34 | 35 | #contact-form textarea { 36 | width: 400px; 37 | } 38 | 39 | .bullets { 40 | color: rgb(80, 80, 80); 41 | } 42 | 43 | .related-info { 44 | color: rgb(80, 80, 80); 45 | margin: 0; 46 | padding: 0; 47 | padding-left: 10px; 48 | } 49 | 50 | table.related-info td { 51 | padding-bottom: 5px; 52 | } 53 | 54 | .subsec .role, 55 | .subsec .time, 56 | .subsec .location { 57 | margin: 0; 58 | padding: 0; 59 | padding-top: 5px; 60 | padding-bottom: 0px; 61 | padding-left: 10px; 62 | color: rgb(90, 90, 90); 63 | letter-spacing: .04em; 64 | font-size: 90%; 65 | } 66 | 67 | .related-info { 68 | margin-left: 10px; 69 | margin-top: 10px; 70 | font-size: 90%; 71 | } 72 | 73 | .subsec .role { 74 | color: rgb(30, 30, 30); 75 | padding-bottom: 5px; 76 | font-size: 100%; 77 | letter-spacing: .06em; 78 | } 79 | 80 | #content { 81 | width: 100%; 82 | } 83 | 84 | #content section { 85 | width: 800px; 86 | margin: 0 auto; 87 | } 88 | #final-thoughts { 89 | padding-top: .3em; 90 | margin-top: 1.4em; 91 | background-color: rgb(33, 33, 33); 92 | margin-bottom: 0; 93 | padding-bottom: 0; 94 | color: rgb(220, 220, 220); 95 | padding-bottom: 1em; 96 | } 97 | 98 | #final-thoughts .subsec { 99 | color: rgb(150, 150, 150); 100 | } 101 | 102 | #final-thoughts section { 103 | width: 800px; 104 | margin: 0 auto; 105 | margin-bottom: 0; 106 | padding-bottom: 0; 107 | } 108 | 109 | #banner { 110 | height: 0px; 111 | background-color: black; 112 | margin-bottom: 20px; 113 | } 114 | 115 | #subsec-name { 116 | font-size: 200%; 117 | } 118 | 119 | #div-bg { 120 | position: fixed; 121 | width: 100%; 122 | height: 100%; 123 | background-color: rgba(.3, .3, .3, .3); 124 | z-index: -9999; 125 | } 126 | 127 | /* SUBSECTIONS */ 128 | .sec { 129 | font-size: 100%; 130 | } 131 | .subsec { 132 | font-size: 85%; 133 | padding-left: 10px; 134 | } 135 | .subsec div { 136 | padding-left: 10px; 137 | } 138 | 139 | /** FONTS **/ 140 | @font-face { 141 | font-family: DINWeb-Light; 142 | src: url("/public/DINWeb-Light.eot"); 143 | } 144 | @font-face { 145 | font-family: DINWeb-Light; 146 | src: url("/public/DINWeb-Light.woff") format("woff"); 147 | } 148 | @font-face { 149 | font-family: DINWeb; 150 | src: url("/public/DINWeb.eot"); 151 | } 152 | @font-face { 153 | font-family: DINWeb; 154 | src: url("/public/DINWeb.woff") format("woff"); 155 | } 156 | -------------------------------------------------------------------------------- /lessons/09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 09 : multi-object drawing 5 | 6 | 7 | 8 | 41 | 42 | 55 | 56 | 57 | 73 | 89 | 90 | 91 | 92 |
WebGL is unsupported.
93 | 94 | 95 | -------------------------------------------------------------------------------- /lessons/10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 : camera + loading "world" 5 | 6 | 7 | 8 | 41 | 42 | 55 | 56 | 57 | 73 | 89 | 90 | 91 | 92 |
WebGL is unsupported.
93 | 94 | 95 | -------------------------------------------------------------------------------- /lessons/08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 08 : transparency and lighting 5 | 6 | 7 | 8 | 41 | 42 | 55 | 56 | 57 | 73 | 89 | 90 | 91 | 92 |
WebGL is unsupported.
93 | 94 | 95 | -------------------------------------------------------------------------------- /drawer/app.js: -------------------------------------------------------------------------------- 1 | var app = function (_canvasId) { 2 | var _canvas = document.getElementById(_canvasId); 3 | var _gl = _canvas.getContext("webgl"); 4 | 5 | var _spikes = Spikes(); 6 | var _is = { running : true }; 7 | var _isRunning = true; 8 | var _pressedKeys = {}; 9 | var _gui = new dat.GUI(); 10 | var _controls = { }; 11 | 12 | document.onkeyup = function (ev) { 13 | _pressedKeys[ev.keyCode] = false; 14 | } 15 | 16 | document.onkeydown = function (ev) { 17 | _pressedKeys[ev.keyCode] = true; 18 | } 19 | 20 | var _passShaderProg = undefined; 21 | var _simpleShaderProg = undefined; 22 | var _drawer = undefined; 23 | 24 | // Return actual object 25 | return { 26 | init : function () { 27 | setup(); 28 | _gl.bindBuffer(_gl.ARRAY_BUFFER, null); 29 | }, 30 | loop : loop, 31 | print : function () { 32 | console.log(_canvas); 33 | console.log(_gl); 34 | } 35 | }; 36 | 37 | /** 38 | * Begin looping animation 39 | * @return {undefined} undefined 40 | */ 41 | function loop () { 42 | if (_isRunning) 43 | requestAnimationFrame(loop); 44 | update(); 45 | draw(); 46 | } 47 | 48 | function setup() { 49 | // Viewport 50 | _gl.viewport(0, 0, _canvas.width, _canvas.height); 51 | // Shader program 52 | _passShaderProg = webgl.createProgramFromIds(gl, "pass-vert", "pass-frag"); 53 | _simpleShaderProg = webgl.createProgramFromIds(gl, "vert-simple", "frag-simple"); 54 | 55 | // Clear values 56 | _gl.clearColor(.25, .22, .2, 1); 57 | _gl.clearDepth(1.0); 58 | 59 | _gl.enable(_gl.DEPTH_TEST); 60 | _gl.enable(_gl.BLEND); 61 | 62 | _drawer = new Drawer(_gl, _simpleShaderProg); 63 | } 64 | 65 | function update() { 66 | updatePosition(); 67 | } 68 | 69 | /** 70 | * Draw Frame 71 | * @return {undefined} undefined 72 | */ 73 | function draw() { 74 | gl.viewport(0, 0, canvas.width, canvas.height); 75 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 76 | 77 | var t = getElapsedSeconds() * 1.5; 78 | 79 | webgl.perspectiveMatrix({ 80 | fieldOfView : 45, 81 | aspectRatio : 1, 82 | nearPlane : .1, 83 | farPlane : 100 84 | }); 85 | 86 | mat4.identity(webgl.mvMatrix); 87 | mat4.translate(webgl.mvMatrix, [ 0, 0, -9 ]); 88 | 89 | // Apply shader 90 | gl.useProgram(_simpleShaderProg); 91 | 92 | // 93 | gl.enable(gl.BLEND); 94 | _drawer.camera(webgl.pMatrix, webgl.mvMatrix); 95 | _drawer.line([ 0, 0, 0 ], [ 1, Math.sin(t), -1 ], [ 1, 1, .8, 1. ], [ 0, 1, 1, 1 ]); 96 | _drawer.line([ 0, 1, 0 ], [ -1, -Math.sin(t), .5 ], [ 1, 1, .8, 1. ], [ 0, 1, 1, 1 ]); 97 | 98 | // ... 99 | } 100 | 101 | function updatePosition() { 102 | if (_pressedKeys[72]) { 103 | // console.log("<"); 104 | } 105 | if (_pressedKeys[74]) { 106 | // console.log("^"); 107 | } 108 | if (_pressedKeys[75]) { 109 | // console.log("v"); 110 | } 111 | if (_pressedKeys[76]) { 112 | // console.log(">"); 113 | } 114 | if (_pressedKeys[87]) { 115 | _controls.z_translate += .09; 116 | } 117 | if (_pressedKeys[83]) { 118 | _controls.z_translate -= .09; 119 | } 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /t5/02/Wave.js: -------------------------------------------------------------------------------- 1 | var Wave = (function (id) { var _canvas = document.getElementById(id); 2 | var _c = _canvas.getContext("2d"); 3 | var _isRunning = true; 4 | 5 | var ___ = { 6 | a : 1.01, 7 | b : 0.01, 8 | c : 0.02, 9 | t : 1. 10 | }; 11 | 12 | var __f = {}; 13 | 14 | (function () { 15 | __f.a = function (x) { 16 | var t = getElapsedSeconds(); 17 | return Math.sqrt(1 - x * x); 18 | }; 19 | __f.b = function (x) { 20 | var t = getElapsedSeconds(); 21 | return 0; 22 | return Math.cos(2 * Math.PI * x + t); 23 | }; 24 | __f.c = function (x) { 25 | var t = ___.t * getElapsedSeconds(); 26 | return 0; 27 | return Math.sin(1 * Math.PI * x + t); 28 | }; 29 | })(); 30 | 31 | var _gui = new dat.GUI(); 32 | (function () { 33 | var f1 = _gui.addFolder('Oscillator Controller'); 34 | f1.add(___, "a", -1, +1, 0.3); 35 | f1.add(___, "b", -1, +1, 0.3); 36 | f1.add(___, "c", -1, +1, 0.3); 37 | f1.add(___, "t", +0, +4, 0.3); 38 | f1.open(); 39 | })(); 40 | 41 | function map (x, y) { 42 | var w = _canvas.width; 43 | var h = _canvas.height; 44 | return [ 45 | w/2 + w/2*x, 46 | h/2 + h/2*y 47 | ]; 48 | } 49 | 50 | var _mesh = [ ]; 51 | 52 | var _xmin = -1, _xmax = 1, _xsize = 300; 53 | var dx = (_xmax - _xmin)/(_xsize-1); 54 | for (var i = 0; i < _xsize; i++) { 55 | var x = dx * i + _xmin; 56 | var y = 0; 57 | _mesh.push([ x, y ]); 58 | } 59 | 60 | 61 | return { 62 | alpha : _alpha, 63 | beta : _beta, 64 | loop : _loop, 65 | update : _update, 66 | draw : _draw 67 | }; 68 | 69 | function _loop () { 70 | if (_isRunning) 71 | requestAnimationFrame(_loop); 72 | _update(); 73 | _draw(); 74 | } 75 | // ... 76 | function _alpha (val) { 77 | if (val !== undefined) 78 | _alpha = val; 79 | return _alpha; 80 | } 81 | // ... 82 | function _beta (val) { 83 | if (val !== undefined) 84 | _beta = val; 85 | return _beta; 86 | } 87 | /** 88 | * 89 | */ 90 | function _update () { 91 | for (var i = 0; i < _mesh.length; i++) { 92 | var x = _mesh[i][0]; 93 | var t = getElapsedSeconds(); 94 | var y = 0; // .9 * Math.cos(3*x + t) + .5 * Math.cos(6 * x + t); 95 | y += ___.a * __f.a(x); 96 | y += ___.b * __f.b(x); 97 | y += ___.c * __f.c(x); 98 | _mesh[i] = [ x, y ]; 99 | } 100 | } 101 | // ... 102 | function _draw () { 103 | _canvas.width = _canvas.width; 104 | _c.beginPath(); 105 | _c.lineWidth="5"; 106 | _c.strokeStyle="black"; 107 | var p = map(_mesh[0][0], _mesh[0][1]); 108 | _c.moveTo(p[0], p[1]); 109 | 110 | for (var i = 1; i < _mesh.length; i++) { 111 | p = map(_mesh[i][0], _mesh[i][1]); 112 | _c.lineTo(p[0], p[1]); 113 | } 114 | 115 | _c.stroke(); 116 | } 117 | }); 118 | 119 | function circleWave (x) { 120 | var a = []; 121 | var b = []; 122 | var y = 0; 123 | var L = 1.; 124 | a.push(.5 * Math.PI * L); 125 | for (var i = 1; i < 3; i++) { 126 | var _a; 127 | _a = Math.pow(-1, i); 128 | _a *= L; 129 | _a *= 1; 130 | _a /= i; 131 | a.push(_a); 132 | } 133 | 134 | y = 0; 135 | for (var n = 0; n < a.length; n++) { 136 | y += a[n] * Math.cos(n * Math.PI * x / L); 137 | } 138 | 139 | return y; 140 | } 141 | -------------------------------------------------------------------------------- /spikes/app.js: -------------------------------------------------------------------------------- 1 | var app = function (_canvasId) { 2 | var _canvas = document.getElementById(_canvasId); 3 | var _gl = _canvas.getContext("webgl"); 4 | 5 | var _spikes = Spikes(); 6 | var _is = { running : true }; 7 | var _isRunning = true; 8 | // ... 9 | var _pressedKeys = {}; 10 | 11 | var _gui = new dat.GUI(); 12 | var _controls = { 13 | z_translate : 4., 14 | textureNumber : 0, 15 | lighting_x : 0.1, 16 | lighting_y : 0.1, 17 | lighting_z : 0.1, 18 | lightingDirection : [ -1, -.3, -1 ], 19 | ambientLightColor : [ .35 * 255, .30 * 255, .27 * 255 ], 20 | directionalLightColor : [ .6 * 255, .6 * 255, .6 * 255 ], 21 | alpha : 1., 22 | transparency : true 23 | }; 24 | _gui.add(_controls, "z_translate", 2., 15); 25 | _gui.add(_controls, "lighting_x", -1., 1.); 26 | _gui.add(_controls, "lighting_y", -1., 1.); 27 | _gui.add(_controls, "lighting_z", -1., 1.); 28 | 29 | document.onkeyup = function (ev) { 30 | _pressedKeys[ev.keyCode] = false; 31 | } 32 | 33 | document.onkeydown = function (ev) { 34 | _pressedKeys[ev.keyCode] = true; 35 | } 36 | 37 | var _passShaderProg = undefined; 38 | 39 | // Return actual object 40 | return { 41 | init : function () { 42 | setup(); 43 | _gl.bindBuffer(_gl.ARRAY_BUFFER, null); 44 | }, 45 | loop : loop, 46 | print : function () { 47 | console.log(_canvas); 48 | console.log(_gl); 49 | } 50 | }; 51 | 52 | /** 53 | * Begin looping animation 54 | * @return {undefined} undefined 55 | */ 56 | function loop () { 57 | if (_isRunning) 58 | requestAnimationFrame(loop); 59 | update(); 60 | draw(); 61 | } 62 | 63 | function setup() { 64 | console.log("~~~~"); 65 | 66 | // Viewport 67 | _gl.viewport(0, 0, _canvas.width, _canvas.height); 68 | // Shader program 69 | _passShaderProg = webgl.createProgramFromIds(gl, "pass-vert", "pass-frag"); 70 | // Clear values 71 | _gl.clearColor(.25, .22, .2, 1); 72 | _gl.clearDepth(1.0); 73 | 74 | _gl.enable(_gl.DEPTH_TEST); 75 | } 76 | 77 | function update() { 78 | updatePosition(); 79 | } 80 | 81 | /** 82 | * Draw Frame 83 | * @return {undefined} undefined 84 | */ 85 | function draw() { 86 | gl.viewport(0, 0, canvas.width, canvas.height); 87 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 88 | 89 | var t = getElapsedSeconds() / 1.5; 90 | 91 | webgl.perspectiveMatrix({ 92 | fieldOfView : 45, 93 | aspectRatio : 1, 94 | nearPlane : .1, 95 | farPlane : 100 96 | }); 97 | 98 | mat4.identity(webgl.mvMatrix); 99 | mat4.translate(webgl.mvMatrix, [ 0, 0, -_controls.z_translate ]); 100 | mat4.rotate(webgl.mvMatrix, t, [ 1, 0, 0 ]); 101 | 102 | // Apply shader 103 | gl.useProgram(_passShaderProg); 104 | 105 | // ... 106 | _spikes.draw(_passShaderProg); 107 | } 108 | 109 | function updatePosition() { 110 | if (_pressedKeys[72]) { 111 | // console.log("<"); 112 | } 113 | if (_pressedKeys[74]) { 114 | // console.log("^"); 115 | } 116 | if (_pressedKeys[75]) { 117 | // console.log("v"); 118 | } 119 | if (_pressedKeys[76]) { 120 | // console.log(">"); 121 | } 122 | if (_pressedKeys[87]) { 123 | _controls.z_translate += .09; 124 | } 125 | if (_pressedKeys[83]) { 126 | _controls.z_translate -= .09; 127 | } 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /generative-lines-demos-2013-10/app.js: -------------------------------------------------------------------------------- 1 | var app = function (_canvasId) { 2 | var _canvas = document.getElementById(_canvasId); 3 | var _gl = _canvas.getContext("webgl"); 4 | 5 | var _spikes = Spikes(); 6 | var _is = { running : true }; 7 | var _isRunning = true; 8 | // ... 9 | var _pressedKeys = {}; 10 | 11 | var _gui = new dat.GUI(); 12 | var _controls = { 13 | z_translate : 4., 14 | textureNumber : 0, 15 | lighting_x : 0.1, 16 | lighting_y : 0.1, 17 | lighting_z : 0.1, 18 | lightingDirection : [ -1, -.3, -1 ], 19 | ambientLightColor : [ .35 * 255, .30 * 255, .27 * 255 ], 20 | directionalLightColor : [ .6 * 255, .6 * 255, .6 * 255 ], 21 | alpha : 1., 22 | transparency : true 23 | }; 24 | _gui.add(_controls, "z_translate", 2., 15); 25 | _gui.add(_controls, "lighting_x", -1., 1.); 26 | _gui.add(_controls, "lighting_y", -1., 1.); 27 | _gui.add(_controls, "lighting_z", -1., 1.); 28 | 29 | document.onkeyup = function (ev) { 30 | _pressedKeys[ev.keyCode] = false; 31 | } 32 | 33 | document.onkeydown = function (ev) { 34 | _pressedKeys[ev.keyCode] = true; 35 | } 36 | 37 | var _passShaderProg = undefined; 38 | 39 | // Return actual object 40 | return { 41 | init : function () { 42 | setup(); 43 | _gl.bindBuffer(_gl.ARRAY_BUFFER, null); 44 | }, 45 | loop : loop, 46 | print : function () { 47 | console.log(_canvas); 48 | console.log(_gl); 49 | } 50 | }; 51 | 52 | /** 53 | * Begin looping animation 54 | * @return {undefined} undefined 55 | */ 56 | function loop () { 57 | if (_isRunning) 58 | requestAnimationFrame(loop); 59 | update(); 60 | draw(); 61 | } 62 | 63 | function setup() { 64 | console.log("~~~~"); 65 | 66 | // Viewport 67 | _gl.viewport(0, 0, _canvas.width, _canvas.height); 68 | // Shader program 69 | _passShaderProg = webgl.createProgramFromIds(gl, "pass-vert", "pass-frag"); 70 | // Clear values 71 | _gl.clearColor(.25, .22, .2, 1); 72 | _gl.clearDepth(1.0); 73 | 74 | _gl.enable(_gl.DEPTH_TEST); 75 | } 76 | 77 | function update() { 78 | updatePosition(); 79 | } 80 | 81 | /** 82 | * Draw Frame 83 | * @return {undefined} undefined 84 | */ 85 | function draw() { 86 | gl.viewport(0, 0, canvas.width, canvas.height); 87 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 88 | 89 | var t = getElapsedSeconds() / 1.5; 90 | 91 | webgl.perspectiveMatrix({ 92 | fieldOfView : 45, 93 | aspectRatio : 1, 94 | nearPlane : .1, 95 | farPlane : 100 96 | }); 97 | 98 | mat4.identity(webgl.mvMatrix); 99 | mat4.translate(webgl.mvMatrix, [ 0, 0, -_controls.z_translate ]); 100 | mat4.rotate(webgl.mvMatrix, t, [ 1, 0, 0 ]); 101 | 102 | // Apply shader 103 | gl.useProgram(_passShaderProg); 104 | 105 | // ... 106 | _spikes.draw(_passShaderProg); 107 | } 108 | 109 | function updatePosition() { 110 | if (_pressedKeys[72]) { 111 | // console.log("<"); 112 | } 113 | if (_pressedKeys[74]) { 114 | // console.log("^"); 115 | } 116 | if (_pressedKeys[75]) { 117 | // console.log("v"); 118 | } 119 | if (_pressedKeys[76]) { 120 | // console.log(">"); 121 | } 122 | if (_pressedKeys[87]) { 123 | _controls.z_translate += .09; 124 | } 125 | if (_pressedKeys[83]) { 126 | _controls.z_translate -= .09; 127 | } 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /generative-plane/app.js: -------------------------------------------------------------------------------- 1 | var app = function (_canvasId) { 2 | var _canvas = document.getElementById(_canvasId); 3 | var _gl = _canvas.getContext("webgl"); 4 | 5 | var _spikes = Spikes(); 6 | var _is = { running : true }; 7 | var _isRunning = false; 8 | // ... 9 | var _pressedKeys = {}; 10 | 11 | var _gui = new dat.GUI(); 12 | var _controls = { 13 | z_translate : 4., 14 | textureNumber : 0, 15 | lighting_x : 0.1, 16 | lighting_y : 0.1, 17 | lighting_z : 0.1, 18 | lightingDirection : [ -1, -.3, -1 ], 19 | ambientLightColor : [ .35 * 255, .30 * 255, .27 * 255 ], 20 | directionalLightColor : [ .6 * 255, .6 * 255, .6 * 255 ], 21 | alpha : 1., 22 | transparency : true 23 | }; 24 | _gui.add(_controls, "z_translate", 2., 15); 25 | _gui.add(_controls, "lighting_x", -1., 1.); 26 | _gui.add(_controls, "lighting_y", -1., 1.); 27 | _gui.add(_controls, "lighting_z", -1., 1.); 28 | 29 | document.onkeyup = function (ev) { 30 | _pressedKeys[ev.keyCode] = false; 31 | } 32 | 33 | document.onkeydown = function (ev) { 34 | _pressedKeys[ev.keyCode] = true; 35 | } 36 | 37 | var _passShaderProg = undefined; 38 | 39 | // Return actual object 40 | return { 41 | init : function () { 42 | setup(); 43 | _gl.bindBuffer(_gl.ARRAY_BUFFER, null); 44 | }, 45 | loop : loop, 46 | print : function () { 47 | console.log(_canvas); 48 | console.log(_gl); 49 | } 50 | }; 51 | 52 | /** 53 | * Begin looping animation 54 | * @return {undefined} undefined 55 | */ 56 | function loop () { 57 | if (_isRunning) 58 | requestAnimationFrame(loop); 59 | update(); 60 | draw(); 61 | } 62 | 63 | function setup() { 64 | // Viewport 65 | _gl.viewport(0, 0, _canvas.width, _canvas.height); 66 | // Shader program 67 | _passShaderProg = webgl.createProgramFromIds(gl, "pass-vert", "pass-frag"); 68 | // Clear values 69 | _gl.clearColor(.25, .22, .2, 1); 70 | _gl.clearDepth(1.0); 71 | 72 | _gl.enable(_gl.DEPTH_TEST); 73 | } 74 | 75 | function update() { 76 | updatePosition(); 77 | } 78 | 79 | /** 80 | * Draw Frame 81 | * @return {undefined} undefined 82 | */ 83 | function draw() { 84 | console.log("* DRAWING *"); 85 | console.log("* DRAWING *"); 86 | gl.viewport(0, 0, canvas.width, canvas.height); 87 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 88 | 89 | var t = getElapsedSeconds() / 1.5; 90 | 91 | webgl.perspectiveMatrix({ 92 | fieldOfView : 45, 93 | aspectRatio : 1, 94 | nearPlane : .1, 95 | farPlane : 100 96 | }); 97 | 98 | mat4.identity(webgl.mvMatrix); 99 | mat4.translate(webgl.mvMatrix, [ 0, 0, -_controls.z_translate ]); 100 | mat4.rotate(webgl.mvMatrix, Math.PI/2, [ 1, 0, 0 ]); 101 | 102 | // Apply shader 103 | gl.useProgram(_passShaderProg); 104 | 105 | // ... 106 | _spikes.draw(_passShaderProg); 107 | } 108 | 109 | function updatePosition() { 110 | if (_pressedKeys[72]) { 111 | // console.log("<"); 112 | } 113 | if (_pressedKeys[74]) { 114 | // console.log("^"); 115 | } 116 | if (_pressedKeys[75]) { 117 | // console.log("v"); 118 | } 119 | if (_pressedKeys[76]) { 120 | // console.log(">"); 121 | } 122 | if (_pressedKeys[87]) { 123 | _controls.z_translate += .09; 124 | } 125 | if (_pressedKeys[83]) { 126 | _controls.z_translate -= .09; 127 | } 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /t5/01/Drawer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Object that is used to draw 3 | */ 4 | var Drawer = (function (gl, shader) { 5 | return { 6 | shader : _shader, 7 | camera : _camera, 8 | line : _line, 9 | lines : _lines 10 | }; 11 | 12 | var _pMatrix = new Float32Array([ 13 | 1, 0, 0, 0, 14 | 0, 1, 0, 0, 15 | 0, 0, 1, 0, 16 | 0, 0, 0, 1 17 | ]); 18 | 19 | var _mvMatrix = new Float32Array([ 20 | 1, 0, 0, 21 | 0, 1, 0, 22 | 0, 0, 1 23 | ]); 24 | 25 | /** 26 | * Sets a new shader to use for setting attribute and uniform values 27 | * @param {!WebGLShader} newShader The new shader to use or NULL or undefined 28 | * @return {!WebGLShader} the current shader being used 29 | */ 30 | function _shader (newShader) { 31 | if (shader !== undefined) 32 | shader = newShader; 33 | return shader; 34 | } 35 | 36 | /** 37 | * Sets a new Camera 38 | */ 39 | function _camera (pMatrix, mvMatrix) { 40 | _pMatrix = pMatrix; 41 | _mvMatrix = mvMatrix; 42 | } 43 | 44 | /** 45 | * Draw a Line 46 | * @param {!vector3f} u three float values specifying where to draw the line from 47 | * @param {!vector3f} v three float values specifying where to draw the line to 48 | * @return {undefined} undefined 49 | */ 50 | function _line (u, v, col1, col2) { 51 | if (u.length !== 3 || v.length !== 3) { 52 | return undefined; 53 | } 54 | 55 | if (!(col1 && col2 && col1.length == 4 && col2.length == 4)) { 56 | col1 = [ 1, 1, 1, 1 ]; 57 | col2 = [ 1, 1, 1, 1 ]; 58 | } 59 | 60 | gl.useProgram(shader); 61 | 62 | var aPosition = gl.getAttribLocation(shader, "aPosition"); 63 | var aColor = gl.getAttribLocation(shader, "aColor"); 64 | gl.enableVertexAttribArray(aPosition); 65 | gl.enableVertexAttribArray(aColor); 66 | 67 | var pbuffer = gl.createBuffer(); 68 | gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer); 69 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(u.concat(v)), gl.STATIC_DRAW); 70 | gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0); 71 | 72 | var cbuffer = gl.createBuffer(); 73 | gl.bindBuffer(gl.ARRAY_BUFFER, cbuffer); 74 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(col1.concat(col2)), gl.STATIC_DRAW); 75 | gl.vertexAttribPointer(aColor, 4, gl.FLOAT, false, 0, 0); 76 | 77 | var uPMatrix = gl.getUniformLocation(shader, "uPMatrix"); 78 | var uMVMatrix = gl.getUniformLocation(shader, "uMVMatrix"); 79 | gl.uniformMatrix4fv(uPMatrix, false, _pMatrix); 80 | gl.uniformMatrix4fv(uMVMatrix, false, _mvMatrix); 81 | 82 | gl.drawArrays(gl.LINE_STRIP, 0, 2); 83 | 84 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 85 | } 86 | 87 | /** 88 | * Draw a Set of Lines 89 | * @param {!vector3f} u a set of three float values specifying where to draw the lines from 90 | * @param {!vector3f} v a set of three float values specifying where to draw the lines to 91 | * @return {undefined} undefined 92 | */ 93 | function _lines (u, v, col1, col2) { 94 | var U = []; 95 | var V = []; 96 | 97 | if (u.length != v.length) { 98 | throw "`u` and `v` size mismatch"; 99 | } 100 | 101 | for (var k = 0; k < u.length; k++) { 102 | if (u[k].length == 3) { 103 | U.append(u[k][0]); 104 | U.append(u[k][1]); 105 | U.append(u[k][2]); 106 | } 107 | if (v[k].length == 3) { 108 | V.append(v[k][0]); 109 | V.append(v[k][1]); 110 | V.append(v[k][2]); 111 | } 112 | } 113 | } 114 | }); 115 | -------------------------------------------------------------------------------- /t5/02/Drawer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Object that is used to draw 3 | */ 4 | var Drawer = (function (gl, shader) { 5 | return { 6 | shader : _shader, 7 | camera : _camera, 8 | line : _line, 9 | lines : _lines 10 | }; 11 | 12 | var _pMatrix = new Float32Array([ 13 | 1, 0, 0, 0, 14 | 0, 1, 0, 0, 15 | 0, 0, 1, 0, 16 | 0, 0, 0, 1 17 | ]); 18 | 19 | var _mvMatrix = new Float32Array([ 20 | 1, 0, 0, 21 | 0, 1, 0, 22 | 0, 0, 1 23 | ]); 24 | 25 | /** 26 | * Sets a new shader to use for setting attribute and uniform values 27 | * @param {!WebGLShader} newShader The new shader to use or NULL or undefined 28 | * @return {!WebGLShader} the current shader being used 29 | */ 30 | function _shader (newShader) { 31 | if (shader !== undefined) 32 | shader = newShader; 33 | return shader; 34 | } 35 | 36 | /** 37 | * Sets a new Camera 38 | */ 39 | function _camera (pMatrix, mvMatrix) { 40 | _pMatrix = pMatrix; 41 | _mvMatrix = mvMatrix; 42 | } 43 | 44 | /** 45 | * Draw a Line 46 | * @param {!vector3f} u three float values specifying where to draw the line from 47 | * @param {!vector3f} v three float values specifying where to draw the line to 48 | * @return {undefined} undefined 49 | */ 50 | function _line (u, v, col1, col2) { 51 | if (u.length !== 3 || v.length !== 3) { 52 | return undefined; 53 | } 54 | 55 | if (!(col1 && col2 && col1.length == 4 && col2.length == 4)) { 56 | col1 = [ 1, 1, 1, 1 ]; 57 | col2 = [ 1, 1, 1, 1 ]; 58 | } 59 | 60 | gl.useProgram(shader); 61 | 62 | var aPosition = gl.getAttribLocation(shader, "aPosition"); 63 | var aColor = gl.getAttribLocation(shader, "aColor"); 64 | gl.enableVertexAttribArray(aPosition); 65 | gl.enableVertexAttribArray(aColor); 66 | 67 | var pbuffer = gl.createBuffer(); 68 | gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer); 69 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(u.concat(v)), gl.STATIC_DRAW); 70 | gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0); 71 | 72 | var cbuffer = gl.createBuffer(); 73 | gl.bindBuffer(gl.ARRAY_BUFFER, cbuffer); 74 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(col1.concat(col2)), gl.STATIC_DRAW); 75 | gl.vertexAttribPointer(aColor, 4, gl.FLOAT, false, 0, 0); 76 | 77 | var uPMatrix = gl.getUniformLocation(shader, "uPMatrix"); 78 | var uMVMatrix = gl.getUniformLocation(shader, "uMVMatrix"); 79 | gl.uniformMatrix4fv(uPMatrix, false, _pMatrix); 80 | gl.uniformMatrix4fv(uMVMatrix, false, _mvMatrix); 81 | 82 | gl.drawArrays(gl.LINE_STRIP, 0, 2); 83 | 84 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 85 | } 86 | 87 | /** 88 | * Draw a Set of Lines 89 | * @param {!vector3f} u a set of three float values specifying where to draw the lines from 90 | * @param {!vector3f} v a set of three float values specifying where to draw the lines to 91 | * @return {undefined} undefined 92 | */ 93 | function _lines (u, v, col1, col2) { 94 | var U = []; 95 | var V = []; 96 | 97 | if (u.length != v.length) { 98 | throw "`u` and `v` size mismatch"; 99 | } 100 | 101 | for (var k = 0; k < u.length; k++) { 102 | if (u[k].length == 3) { 103 | U.append(u[k][0]); 104 | U.append(u[k][1]); 105 | U.append(u[k][2]); 106 | } 107 | if (v[k].length == 3) { 108 | V.append(v[k][0]); 109 | V.append(v[k][1]); 110 | V.append(v[k][2]); 111 | } 112 | } 113 | } 114 | }); 115 | -------------------------------------------------------------------------------- /generative-plane/Drawer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Object that is used to draw 3 | */ 4 | var Drawer = (function (gl, shader) { 5 | return { 6 | shader : _shader, 7 | camera : _camera, 8 | line : _line, 9 | lines : _lines 10 | }; 11 | 12 | var _pMatrix = new Float32Array([ 13 | 1, 0, 0, 0, 14 | 0, 1, 0, 0, 15 | 0, 0, 1, 0, 16 | 0, 0, 0, 1 17 | ]); 18 | 19 | var _mvMatrix = new Float32Array([ 20 | 1, 0, 0, 21 | 0, 1, 0, 22 | 0, 0, 1 23 | ]); 24 | 25 | /** 26 | * Sets a new shader to use for setting attribute and uniform values 27 | * @param {!WebGLShader} newShader The new shader to use or NULL or undefined 28 | * @return {!WebGLShader} the current shader being used 29 | */ 30 | function _shader (newShader) { 31 | if (shader !== undefined) 32 | shader = newShader; 33 | return shader; 34 | } 35 | 36 | /** 37 | * Sets a new Camera 38 | */ 39 | function _camera (pMatrix, mvMatrix) { 40 | _pMatrix = pMatrix; 41 | _mvMatrix = mvMatrix; 42 | } 43 | 44 | /** 45 | * Draw a Line 46 | * @param {!vector3f} u three float values specifying where to draw the line from 47 | * @param {!vector3f} v three float values specifying where to draw the line to 48 | * @return {undefined} undefined 49 | */ 50 | function _line (u, v, col1, col2) { 51 | if (u.length !== 3 || v.length !== 3) { 52 | return undefined; 53 | } 54 | 55 | if (!(col1 && col2 && col1.length == 4 && col2.length == 4)) { 56 | col1 = [ 1, 1, 1, 1 ]; 57 | col2 = [ 1, 1, 1, 1 ]; 58 | } 59 | 60 | gl.useProgram(shader); 61 | 62 | var aPosition = gl.getAttribLocation(shader, "aPosition"); 63 | var aColor = gl.getAttribLocation(shader, "aColor"); 64 | gl.enableVertexAttribArray(aPosition); 65 | gl.enableVertexAttribArray(aColor); 66 | 67 | var pbuffer = gl.createBuffer(); 68 | gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer); 69 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(u.concat(v)), gl.STATIC_DRAW); 70 | gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0); 71 | 72 | var cbuffer = gl.createBuffer(); 73 | gl.bindBuffer(gl.ARRAY_BUFFER, cbuffer); 74 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(col1.concat(col2)), gl.STATIC_DRAW); 75 | gl.vertexAttribPointer(aColor, 4, gl.FLOAT, false, 0, 0); 76 | 77 | var uPMatrix = gl.getUniformLocation(shader, "uPMatrix"); 78 | var uMVMatrix = gl.getUniformLocation(shader, "uMVMatrix"); 79 | gl.uniformMatrix4fv(uPMatrix, false, _pMatrix); 80 | gl.uniformMatrix4fv(uMVMatrix, false, _mvMatrix); 81 | 82 | gl.drawArrays(gl.LINE_STRIP, 0, 2); 83 | 84 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 85 | } 86 | 87 | /** 88 | * Draw a Set of Lines 89 | * @param {!vector3f} u a set of three float values specifying where to draw the lines from 90 | * @param {!vector3f} v a set of three float values specifying where to draw the lines to 91 | * @return {undefined} undefined 92 | */ 93 | function _lines (u, v, col1, col2) { 94 | var U = []; 95 | var V = []; 96 | 97 | if (u.length != v.length) { 98 | throw "`u` and `v` size mismatch"; 99 | } 100 | 101 | for (var k = 0; k < u.length; k++) { 102 | if (u[k].length == 3) { 103 | U.append(u[k][0]); 104 | U.append(u[k][1]); 105 | U.append(u[k][2]); 106 | } 107 | if (v[k].length == 3) { 108 | V.append(v[k][0]); 109 | V.append(v[k][1]); 110 | V.append(v[k][2]); 111 | } 112 | } 113 | } 114 | }); 115 | -------------------------------------------------------------------------------- /lessons/10/world.txt: -------------------------------------------------------------------------------- 1 | 2 | NUMPOLLIES 36 3 | 4 | // Floor 1 5 | -3.0 0.0 -3.0 0.0 6.0 6 | -3.0 0.0 3.0 0.0 0.0 7 | 3.0 0.0 3.0 6.0 0.0 8 | 9 | -3.0 0.0 -3.0 0.0 6.0 10 | 3.0 0.0 -3.0 6.0 6.0 11 | 3.0 0.0 3.0 6.0 0.0 12 | 13 | // Ceiling 1 14 | -3.0 1.0 -3.0 0.0 6.0 15 | -3.0 1.0 3.0 0.0 0.0 16 | 3.0 1.0 3.0 6.0 0.0 17 | -3.0 1.0 -3.0 0.0 6.0 18 | 3.0 1.0 -3.0 6.0 6.0 19 | 3.0 1.0 3.0 6.0 0.0 20 | 21 | // A1 22 | 23 | -2.0 1.0 -2.0 0.0 1.0 24 | -2.0 0.0 -2.0 0.0 0.0 25 | -0.5 0.0 -2.0 1.5 0.0 26 | -2.0 1.0 -2.0 0.0 1.0 27 | -0.5 1.0 -2.0 1.5 1.0 28 | -0.5 0.0 -2.0 1.5 0.0 29 | 30 | // A2 31 | 32 | 2.0 1.0 -2.0 2.0 1.0 33 | 2.0 0.0 -2.0 2.0 0.0 34 | 0.5 0.0 -2.0 0.5 0.0 35 | 2.0 1.0 -2.0 2.0 1.0 36 | 0.5 1.0 -2.0 0.5 1.0 37 | 0.5 0.0 -2.0 0.5 0.0 38 | 39 | // B1 40 | 41 | -2.0 1.0 2.0 2.0 1.0 42 | -2.0 0.0 2.0 2.0 0.0 43 | -0.5 0.0 2.0 0.5 0.0 44 | -2.0 1.0 2.0 2.0 1.0 45 | -0.5 1.0 2.0 0.5 1.0 46 | -0.5 0.0 2.0 0.5 0.0 47 | 48 | // B2 49 | 50 | 2.0 1.0 2.0 2.0 1.0 51 | 2.0 0.0 2.0 2.0 0.0 52 | 0.5 0.0 2.0 0.5 0.0 53 | 2.0 1.0 2.0 2.0 1.0 54 | 0.5 1.0 2.0 0.5 1.0 55 | 0.5 0.0 2.0 0.5 0.0 56 | 57 | // C1 58 | 59 | -2.0 1.0 -2.0 0.0 1.0 60 | -2.0 0.0 -2.0 0.0 0.0 61 | -2.0 0.0 -0.5 1.5 0.0 62 | -2.0 1.0 -2.0 0.0 1.0 63 | -2.0 1.0 -0.5 1.5 1.0 64 | -2.0 0.0 -0.5 1.5 0.0 65 | 66 | // C2 67 | 68 | -2.0 1.0 2.0 2.0 1.0 69 | -2.0 0.0 2.0 2.0 0.0 70 | -2.0 0.0 0.5 0.5 0.0 71 | -2.0 1.0 2.0 2.0 1.0 72 | -2.0 1.0 0.5 0.5 1.0 73 | -2.0 0.0 0.5 0.5 0.0 74 | 75 | // D1 76 | 77 | 2.0 1.0 -2.0 0.0 1.0 78 | 2.0 0.0 -2.0 0.0 0.0 79 | 2.0 0.0 -0.5 1.5 0.0 80 | 2.0 1.0 -2.0 0.0 1.0 81 | 2.0 1.0 -0.5 1.5 1.0 82 | 2.0 0.0 -0.5 1.5 0.0 83 | 84 | // D2 85 | 86 | 2.0 1.0 2.0 2.0 1.0 87 | 2.0 0.0 2.0 2.0 0.0 88 | 2.0 0.0 0.5 0.5 0.0 89 | 2.0 1.0 2.0 2.0 1.0 90 | 2.0 1.0 0.5 0.5 1.0 91 | 2.0 0.0 0.5 0.5 0.0 92 | 93 | // Upper hallway - L 94 | -0.5 1.0 -3.0 0.0 1.0 95 | -0.5 0.0 -3.0 0.0 0.0 96 | -0.5 0.0 -2.0 1.0 0.0 97 | -0.5 1.0 -3.0 0.0 1.0 98 | -0.5 1.0 -2.0 1.0 1.0 99 | -0.5 0.0 -2.0 1.0 0.0 100 | 101 | // Upper hallway - R 102 | 0.5 1.0 -3.0 0.0 1.0 103 | 0.5 0.0 -3.0 0.0 0.0 104 | 0.5 0.0 -2.0 1.0 0.0 105 | 0.5 1.0 -3.0 0.0 1.0 106 | 0.5 1.0 -2.0 1.0 1.0 107 | 0.5 0.0 -2.0 1.0 0.0 108 | 109 | // Lower hallway - L 110 | -0.5 1.0 3.0 0.0 1.0 111 | -0.5 0.0 3.0 0.0 0.0 112 | -0.5 0.0 2.0 1.0 0.0 113 | -0.5 1.0 3.0 0.0 1.0 114 | -0.5 1.0 2.0 1.0 1.0 115 | -0.5 0.0 2.0 1.0 0.0 116 | 117 | // Lower hallway - R 118 | 0.5 1.0 3.0 0.0 1.0 119 | 0.5 0.0 3.0 0.0 0.0 120 | 0.5 0.0 2.0 1.0 0.0 121 | 0.5 1.0 3.0 0.0 1.0 122 | 0.5 1.0 2.0 1.0 1.0 123 | 0.5 0.0 2.0 1.0 0.0 124 | 125 | 126 | // Left hallway - Lw 127 | 128 | -3.0 1.0 0.5 1.0 1.0 129 | -3.0 0.0 0.5 1.0 0.0 130 | -2.0 0.0 0.5 0.0 0.0 131 | -3.0 1.0 0.5 1.0 1.0 132 | -2.0 1.0 0.5 0.0 1.0 133 | -2.0 0.0 0.5 0.0 0.0 134 | 135 | // Left hallway - Hi 136 | 137 | -3.0 1.0 -0.5 1.0 1.0 138 | -3.0 0.0 -0.5 1.0 0.0 139 | -2.0 0.0 -0.5 0.0 0.0 140 | -3.0 1.0 -0.5 1.0 1.0 141 | -2.0 1.0 -0.5 0.0 1.0 142 | -2.0 0.0 -0.5 0.0 0.0 143 | 144 | // Right hallway - Lw 145 | 146 | 3.0 1.0 0.5 1.0 1.0 147 | 3.0 0.0 0.5 1.0 0.0 148 | 2.0 0.0 0.5 0.0 0.0 149 | 3.0 1.0 0.5 1.0 1.0 150 | 2.0 1.0 0.5 0.0 1.0 151 | 2.0 0.0 0.5 0.0 0.0 152 | 153 | // Right hallway - Hi 154 | 155 | 3.0 1.0 -0.5 1.0 1.0 156 | 3.0 0.0 -0.5 1.0 0.0 157 | 2.0 0.0 -0.5 0.0 0.0 158 | 3.0 1.0 -0.5 1.0 1.0 159 | 2.0 1.0 -0.5 0.0 1.0 160 | 2.0 0.0 -0.5 0.0 0.0 -------------------------------------------------------------------------------- /drawer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | xx : plane of spikes 5 | 6 | 7 | 8 | 9 | 20 | 27 | 55 | 56 | 67 | 68 | 69 | 91 | 107 | 108 | 109 | 110 |
WebGL is unsupported.
111 | 112 | 113 | -------------------------------------------------------------------------------- /spikes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | xx : plane of spikes 5 | 6 | 7 | 8 | 9 | 20 | 27 | 55 | 56 | 67 | 68 | 69 | 91 | 107 | 108 | 109 | 110 |
WebGL is unsupported.
111 | 112 | 113 | -------------------------------------------------------------------------------- /generative-plane/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | xx : plane of spikes 5 | 6 | 7 | 8 | 9 | 10 | 21 | 28 | 35 | 63 | 64 | 75 | 76 | 77 | 99 | 115 | 116 | 117 | 118 |
WebGL is unsupported.
119 | 120 | 121 | -------------------------------------------------------------------------------- /t5/01/Wave.js: -------------------------------------------------------------------------------- 1 | var Wave = (function (id) { var _canvas = document.getElementById(id); 2 | var _c = _canvas.getContext("2d"); 3 | var _isRunning = true; 4 | 5 | var ___ = { 6 | a : 0.99, 7 | b : 0.99, 8 | c : 0.99, 9 | t : 1. 10 | }; 11 | 12 | var __f = {}; 13 | 14 | (function () { 15 | // Coefficients for 16 | var a = [ 17 | +1.1427000, +0.4529600, +0.177530, -0.0259350, -0.1029100, -0.072436, 18 | -0.0010508, +0.0460710, +0.042815, -0.0068287, -0.0252450, -0.029249, 19 | -0.0084966, +0.0149650, +0.021478, -0.0088747, -0.0090245, -0.016406, 20 | -0.0087387, +0.0052491, +0.012800, -0.0083665, -0.0026990, -0.010082, 21 | ]; 22 | var offset = .75; 23 | var scale = 1/1.6; 24 | a[0] = 0; 25 | 26 | __f.a = function (x) { 27 | var t = getElapsedSeconds(); 28 | return (offset + a[0] * Math.cos(0 * x) + a[1] * Math.cos(1 * x) + a[2] * Math.cos(2 * x) + a[3] * Math.cos(3 * x) + a[4] * Math.cos(4 * x)) * scale; 29 | }; 30 | __f.b = function (x) { 31 | var t = getElapsedSeconds(); 32 | return (offset + a[5] * Math.cos(5 * x) + a[6] * Math.cos(6 * x) + a[7] * Math.cos(7 * x) + a[8] * Math.cos(8 * x) + a[9] * Math.cos(9 * x)) * scale; 33 | return 0; 34 | }; 35 | __f.c = function (x) { 36 | var t = ___.t * getElapsedSeconds(); 37 | return 0; 38 | }; 39 | })(); 40 | 41 | var _gui = new dat.GUI(); 42 | (function () { 43 | var f1 = _gui.addFolder('Oscillator Controller'); 44 | f1.add(___, "a", -1, +1, 0.3); 45 | f1.add(___, "b", -1, +1, 0.3); 46 | f1.add(___, "c", -1, +1, 0.3); 47 | f1.add(___, "t", +0, +4, 0.3); 48 | f1.open(); 49 | })(); 50 | 51 | function map (x, y) { 52 | var w = _canvas.width; 53 | var h = _canvas.height; 54 | return [ 55 | w/2 + w/2*x, 56 | h/2 + h/2*y 57 | ]; 58 | } 59 | 60 | var _mesh = [ ]; 61 | 62 | var _xmin = -1, _xmax = 1, _xsize = 300; 63 | var dx = (_xmax - _xmin)/(_xsize-1); 64 | for (var i = 0; i < _xsize; i++) { 65 | var x = dx * i + _xmin; 66 | var y = 0; 67 | _mesh.push([ x, y ]); 68 | } 69 | 70 | 71 | return { 72 | alpha : _alpha, 73 | beta : _beta, 74 | loop : _loop, 75 | update : _update, 76 | draw : _draw 77 | }; 78 | 79 | function _loop () { 80 | if (_isRunning) 81 | requestAnimationFrame(_loop); 82 | _update(); 83 | _draw(); 84 | } 85 | // ... 86 | function _alpha (val) { 87 | if (val !== undefined) 88 | _alpha = val; 89 | return _alpha; 90 | } 91 | // ... 92 | function _beta (val) { 93 | if (val !== undefined) 94 | _beta = val; 95 | return _beta; 96 | } 97 | /** 98 | * 99 | */ 100 | function _update () { 101 | for (var i = 0; i < _mesh.length; i++) { 102 | var x = _mesh[i][0]; 103 | var t = getElapsedSeconds(); 104 | var y = 0; // .9 * Math.cos(3*x + t) + .5 * Math.cos(6 * x + t); 105 | y += ___.a * __f.a(x); 106 | y += ___.b * __f.b(x); 107 | y += ___.c * __f.c(x); 108 | _mesh[i] = [ x, y ]; 109 | } 110 | } 111 | // ... 112 | function _draw () { 113 | _canvas.width = _canvas.width; 114 | _c.beginPath(); 115 | _c.lineWidth="5"; 116 | _c.strokeStyle="black"; 117 | var p = map(_mesh[0][0], _mesh[0][1]); 118 | _c.moveTo(p[0], p[1]); 119 | 120 | for (var i = 1; i < _mesh.length; i++) { 121 | p = map(_mesh[i][0], _mesh[i][1]); 122 | _c.lineTo(p[0], p[1]); 123 | } 124 | 125 | _c.stroke(); 126 | } 127 | }); 128 | 129 | function circleWave (x) { 130 | var a = []; 131 | var b = []; 132 | var y = 0; 133 | var L = 1.; 134 | a.push(.5 * Math.PI * L); 135 | for (var i = 1; i < 3; i++) { 136 | var _a; 137 | _a = Math.pow(-1, i); 138 | _a *= L; 139 | _a *= 1; 140 | _a /= i; 141 | a.push(_a); 142 | } 143 | 144 | y = 0; 145 | for (var n = 0; n < a.length; n++) { 146 | y += a[n] * Math.cos(n * Math.PI * x / L); 147 | } 148 | 149 | return y; 150 | } 151 | -------------------------------------------------------------------------------- /drawer/webgl.js: -------------------------------------------------------------------------------- 1 | var webgl = (function () { 2 | var _mvMatrixStack = [], _pMatrixStack = []; 3 | return { 4 | ___about : "webgl", 5 | mvMatrix : mat4.create(), 6 | pMatrix : mat4.create(), 7 | nMatrix : mat4.create(), 8 | /** 9 | * Create and Compile a shader from Source Code 10 | * @param {!WebGLRenderingContext} ... ... 11 | * @param {string} ... ... 12 | * @param {number} ... ... 13 | * @return {!WebGLShader} ... 14 | */ 15 | compileShader : function (gl, shaderSource, shaderType) { 16 | var shader = gl.createShader(shaderType); 17 | gl.shaderSource(shader, shaderSource); 18 | gl.compileShader(shader); 19 | if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 20 | console.log("** SHADER ERROR **"); 21 | console.log(gl.getShaderInfoLog(shader)); 22 | } 23 | return shader; 24 | }, 25 | /** 26 | * Create a Program from Two Shaders 27 | * @param {!WebGLRenderingContext} 28 | * @param {WebGLShader} 29 | * @param {WebGLShader} 30 | * @return {!WebGLProgram} 31 | */ 32 | createProgram : function (gl, vertShader, fragShader) { 33 | var program = gl.createProgram(); 34 | gl.attachShader(program, vertShader); 35 | gl.attachShader(program, fragShader); 36 | gl.linkProgram(program); 37 | if (!gl.getProgramParameter(program, gl.LINK_STATUS)) 38 | console.log("** PROGRAM ERROR **"); 39 | return program; 40 | }, 41 | /* 42 | */ 43 | createProgramFromIds : function (gl, vertId, fragId) { 44 | var vertSource = this.getShaderSource(vertId); 45 | var fragSource = this.getShaderSource(fragId); 46 | var vertShader = this.compileShader(gl, vertSource, gl.VERTEX_SHADER); 47 | var fragShader = this.compileShader(gl, fragSource, gl.FRAGMENT_SHADER); 48 | return this.createProgram(gl, vertShader, fragShader); 49 | }, 50 | /** 51 | * Get Text of Script Object 52 | * @param {string} id a character-string specifying the id of the script 53 | * element container shader information 54 | * @return {string} source code for a shader 55 | */ 56 | getShaderSource : function (id) { 57 | var shader = document.getElementById(id); 58 | if (!shader) 59 | throw "Fuck"; 60 | return shader.text; 61 | }, 62 | /** 63 | * Perspective-Matrix 64 | * @param {object} m an object specifying the values used to compute the 65 | * perspective matrix via frustrum. 66 | * @return {array} a 16-element array representing a matrix 67 | */ 68 | perspectiveMatrix : function (m) { 69 | m = m || {}; 70 | m.fieldOfView = m.fieldOfView || 30.0; 71 | m.aspectRatio = m.aspectRatio || 1; 72 | m.nearPlane = m.nearPlane || .1; 73 | m.farPlane = m.farPlane || 100.0; 74 | 75 | mat4.perspective(m.fieldOfView, m.aspectRatio, m.nearPlane, m.farPlane, this.pMatrix); 76 | return this.pMatrix; 77 | }, 78 | /** 79 | * Push Model View Matrix onto the Stack 80 | * @return {undefined} undefined 81 | */ 82 | pushModelView : function () { 83 | var copy = mat4.create(); 84 | mat4.set(this.mvMatrix, copy); 85 | _mvMatrixStack.push(copy); 86 | }, 87 | /** 88 | * Pop Model View Matrix onto the Stack 89 | * @return {undefined} undefined 90 | */ 91 | popModelView : function () { 92 | this.mvMatrix = _mvMatrixStack.pop(); 93 | }, 94 | /** 95 | * Push Both Model and Perspective Matrix 96 | * @return {undefined} undefined 97 | */ 98 | pushMatrices : function () { 99 | pushModelView(); 100 | _pMatrixStack.push(this.pMatrix); 101 | }, 102 | /** 103 | * Pop Both Model and Perspective Matrix 104 | * @return {undefined} undefined 105 | */ 106 | popMatrices : function () { 107 | popModelView(); 108 | this.pMatrix = _pMatrixStack.pop(); 109 | }, 110 | /** 111 | * Set Matrices 112 | */ 113 | setMatrices : function (camera) { 114 | if (camera.mvMatrix !== undefined) { 115 | } 116 | if (camera.pMatrix !== undefined) { 117 | } 118 | } 119 | }; 120 | })(); 121 | 122 | window.requestAnimFrame = (function() { 123 | return 124 | window.requestAnimationFrame || 125 | window.webkitRequestAnimationFrame || 126 | window.mozRequestAnimationFrame || 127 | window.oRequestAnimationFrame || 128 | window.msRequestAnimationFrame || 129 | function (callback) { setInterval(callback, 1000/60); } 130 | })(); 131 | -------------------------------------------------------------------------------- /spikes/webgl.js: -------------------------------------------------------------------------------- 1 | var webgl = (function () { 2 | var _mvMatrixStack = [], _pMatrixStack = []; 3 | return { 4 | ___about : "webgl", 5 | mvMatrix : mat4.create(), 6 | pMatrix : mat4.create(), 7 | nMatrix : mat4.create(), 8 | /** 9 | * Create and Compile a shader from Source Code 10 | * @param {!WebGLRenderingContext} ... ... 11 | * @param {string} ... ... 12 | * @param {number} ... ... 13 | * @return {!WebGLShader} ... 14 | */ 15 | compileShader : function (gl, shaderSource, shaderType) { 16 | var shader = gl.createShader(shaderType); 17 | gl.shaderSource(shader, shaderSource); 18 | gl.compileShader(shader); 19 | if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 20 | console.log("** SHADER ERROR **"); 21 | console.log(gl.getShaderInfoLog(shader)); 22 | } 23 | return shader; 24 | }, 25 | /** 26 | * Create a Program from Two Shaders 27 | * @param {!WebGLRenderingContext} 28 | * @param {WebGLShader} 29 | * @param {WebGLShader} 30 | * @return {!WebGLProgram} 31 | */ 32 | createProgram : function (gl, vertShader, fragShader) { 33 | var program = gl.createProgram(); 34 | gl.attachShader(program, vertShader); 35 | gl.attachShader(program, fragShader); 36 | gl.linkProgram(program); 37 | if (!gl.getProgramParameter(program, gl.LINK_STATUS)) 38 | console.log("** PROGRAM ERROR **"); 39 | return program; 40 | }, 41 | /* 42 | */ 43 | createProgramFromIds : function (gl, vertId, fragId) { 44 | var vertSource = this.getShaderSource(vertId); 45 | var fragSource = this.getShaderSource(fragId); 46 | var vertShader = this.compileShader(gl, vertSource, gl.VERTEX_SHADER); 47 | var fragShader = this.compileShader(gl, fragSource, gl.FRAGMENT_SHADER); 48 | return this.createProgram(gl, vertShader, fragShader); 49 | }, 50 | /** 51 | * Get Text of Script Object 52 | * @param {string} id a character-string specifying the id of the script 53 | * element container shader information 54 | * @return {string} source code for a shader 55 | */ 56 | getShaderSource : function (id) { 57 | var shader = document.getElementById(id); 58 | if (!shader) 59 | throw "Fuck"; 60 | return shader.text; 61 | }, 62 | /** 63 | * Perspective-Matrix 64 | * @param {object} m an object specifying the values used to compute the 65 | * perspective matrix via frustrum. 66 | * @return {array} a 16-element array representing a matrix 67 | */ 68 | perspectiveMatrix : function (m) { 69 | m = m || {}; 70 | m.fieldOfView = m.fieldOfView || 30.0; 71 | m.aspectRatio = m.aspectRatio || 1; 72 | m.nearPlane = m.nearPlane || .1; 73 | m.farPlane = m.farPlane || 100.0; 74 | 75 | mat4.perspective(m.fieldOfView, m.aspectRatio, m.nearPlane, m.farPlane, this.pMatrix); 76 | return this.pMatrix; 77 | }, 78 | /** 79 | * Push Model View Matrix onto the Stack 80 | * @return {undefined} undefined 81 | */ 82 | pushModelView : function () { 83 | var copy = mat4.create(); 84 | mat4.set(this.mvMatrix, copy); 85 | _mvMatrixStack.push(copy); 86 | }, 87 | /** 88 | * Pop Model View Matrix onto the Stack 89 | * @return {undefined} undefined 90 | */ 91 | popModelView : function () { 92 | this.mvMatrix = _mvMatrixStack.pop(); 93 | }, 94 | /** 95 | * Push Both Model and Perspective Matrix 96 | * @return {undefined} undefined 97 | */ 98 | pushMatrices : function () { 99 | pushModelView(); 100 | _pMatrixStack.push(this.pMatrix); 101 | }, 102 | /** 103 | * Pop Both Model and Perspective Matrix 104 | * @return {undefined} undefined 105 | */ 106 | popMatrices : function () { 107 | popModelView(); 108 | this.pMatrix = _pMatrixStack.pop(); 109 | }, 110 | /** 111 | * Set Matrices 112 | */ 113 | setMatrices : function (camera) { 114 | if (camera.mvMatrix !== undefined) { 115 | } 116 | if (camera.pMatrix !== undefined) { 117 | } 118 | } 119 | }; 120 | })(); 121 | 122 | window.requestAnimFrame = (function() { 123 | return 124 | window.requestAnimationFrame || 125 | window.webkitRequestAnimationFrame || 126 | window.mozRequestAnimationFrame || 127 | window.oRequestAnimationFrame || 128 | window.msRequestAnimationFrame || 129 | function (callback) { setInterval(callback, 1000/60); } 130 | })(); 131 | -------------------------------------------------------------------------------- /t5/01/webgl.js: -------------------------------------------------------------------------------- 1 | var webgl = (function () { 2 | var _mvMatrixStack = [], _pMatrixStack = []; 3 | return { 4 | ___about : "webgl", 5 | mvMatrix : mat4.create(), 6 | pMatrix : mat4.create(), 7 | nMatrix : mat4.create(), 8 | /** 9 | * Create and Compile a shader from Source Code 10 | * @param {!WebGLRenderingContext} ... ... 11 | * @param {string} ... ... 12 | * @param {number} ... ... 13 | * @return {!WebGLShader} ... 14 | */ 15 | compileShader : function (gl, shaderSource, shaderType) { 16 | var shader = gl.createShader(shaderType); 17 | gl.shaderSource(shader, shaderSource); 18 | gl.compileShader(shader); 19 | if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 20 | console.log("** SHADER ERROR **"); 21 | console.log(gl.getShaderInfoLog(shader)); 22 | } 23 | return shader; 24 | }, 25 | /** 26 | * Create a Program from Two Shaders 27 | * @param {!WebGLRenderingContext} 28 | * @param {WebGLShader} 29 | * @param {WebGLShader} 30 | * @return {!WebGLProgram} 31 | */ 32 | createProgram : function (gl, vertShader, fragShader) { 33 | var program = gl.createProgram(); 34 | gl.attachShader(program, vertShader); 35 | gl.attachShader(program, fragShader); 36 | gl.linkProgram(program); 37 | if (!gl.getProgramParameter(program, gl.LINK_STATUS)) 38 | console.log("** PROGRAM ERROR **"); 39 | return program; 40 | }, 41 | /* 42 | */ 43 | createProgramFromIds : function (gl, vertId, fragId) { 44 | var vertSource = this.getShaderSource(vertId); 45 | var fragSource = this.getShaderSource(fragId); 46 | var vertShader = this.compileShader(gl, vertSource, gl.VERTEX_SHADER); 47 | var fragShader = this.compileShader(gl, fragSource, gl.FRAGMENT_SHADER); 48 | return this.createProgram(gl, vertShader, fragShader); 49 | }, 50 | /** 51 | * Get Text of Script Object 52 | * @param {string} id a character-string specifying the id of the script 53 | * element container shader information 54 | * @return {string} source code for a shader 55 | */ 56 | getShaderSource : function (id) { 57 | var shader = document.getElementById(id); 58 | if (!shader) 59 | throw "Fuck"; 60 | return shader.text; 61 | }, 62 | /** 63 | * Perspective-Matrix 64 | * @param {object} m an object specifying the values used to compute the 65 | * perspective matrix via frustrum. 66 | * @return {array} a 16-element array representing a matrix 67 | */ 68 | perspectiveMatrix : function (m) { 69 | m = m || {}; 70 | m.fieldOfView = m.fieldOfView || 30.0; 71 | m.aspectRatio = m.aspectRatio || 1; 72 | m.nearPlane = m.nearPlane || .1; 73 | m.farPlane = m.farPlane || 100.0; 74 | 75 | mat4.perspective(m.fieldOfView, m.aspectRatio, m.nearPlane, m.farPlane, this.pMatrix); 76 | return this.pMatrix; 77 | }, 78 | /** 79 | * Push Model View Matrix onto the Stack 80 | * @return {undefined} undefined 81 | */ 82 | pushModelView : function () { 83 | var copy = mat4.create(); 84 | mat4.set(this.mvMatrix, copy); 85 | _mvMatrixStack.push(copy); 86 | }, 87 | /** 88 | * Pop Model View Matrix onto the Stack 89 | * @return {undefined} undefined 90 | */ 91 | popModelView : function () { 92 | this.mvMatrix = _mvMatrixStack.pop(); 93 | }, 94 | /** 95 | * Push Both Model and Perspective Matrix 96 | * @return {undefined} undefined 97 | */ 98 | pushMatrices : function () { 99 | pushModelView(); 100 | _pMatrixStack.push(this.pMatrix); 101 | }, 102 | /** 103 | * Pop Both Model and Perspective Matrix 104 | * @return {undefined} undefined 105 | */ 106 | popMatrices : function () { 107 | popModelView(); 108 | this.pMatrix = _pMatrixStack.pop(); 109 | }, 110 | /** 111 | * Set Matrices 112 | */ 113 | setMatrices : function (camera) { 114 | if (camera.mvMatrix !== undefined) { 115 | } 116 | if (camera.pMatrix !== undefined) { 117 | } 118 | } 119 | }; 120 | })(); 121 | 122 | window.requestAnimFrame = (function() { 123 | return 124 | window.requestAnimationFrame || 125 | window.webkitRequestAnimationFrame || 126 | window.mozRequestAnimationFrame || 127 | window.oRequestAnimationFrame || 128 | window.msRequestAnimationFrame || 129 | function (callback) { setInterval(callback, 1000/60); } 130 | })(); 131 | -------------------------------------------------------------------------------- /t5/02/webgl.js: -------------------------------------------------------------------------------- 1 | var webgl = (function () { 2 | var _mvMatrixStack = [], _pMatrixStack = []; 3 | return { 4 | ___about : "webgl", 5 | mvMatrix : mat4.create(), 6 | pMatrix : mat4.create(), 7 | nMatrix : mat4.create(), 8 | /** 9 | * Create and Compile a shader from Source Code 10 | * @param {!WebGLRenderingContext} ... ... 11 | * @param {string} ... ... 12 | * @param {number} ... ... 13 | * @return {!WebGLShader} ... 14 | */ 15 | compileShader : function (gl, shaderSource, shaderType) { 16 | var shader = gl.createShader(shaderType); 17 | gl.shaderSource(shader, shaderSource); 18 | gl.compileShader(shader); 19 | if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 20 | console.log("** SHADER ERROR **"); 21 | console.log(gl.getShaderInfoLog(shader)); 22 | } 23 | return shader; 24 | }, 25 | /** 26 | * Create a Program from Two Shaders 27 | * @param {!WebGLRenderingContext} 28 | * @param {WebGLShader} 29 | * @param {WebGLShader} 30 | * @return {!WebGLProgram} 31 | */ 32 | createProgram : function (gl, vertShader, fragShader) { 33 | var program = gl.createProgram(); 34 | gl.attachShader(program, vertShader); 35 | gl.attachShader(program, fragShader); 36 | gl.linkProgram(program); 37 | if (!gl.getProgramParameter(program, gl.LINK_STATUS)) 38 | console.log("** PROGRAM ERROR **"); 39 | return program; 40 | }, 41 | /* 42 | */ 43 | createProgramFromIds : function (gl, vertId, fragId) { 44 | var vertSource = this.getShaderSource(vertId); 45 | var fragSource = this.getShaderSource(fragId); 46 | var vertShader = this.compileShader(gl, vertSource, gl.VERTEX_SHADER); 47 | var fragShader = this.compileShader(gl, fragSource, gl.FRAGMENT_SHADER); 48 | return this.createProgram(gl, vertShader, fragShader); 49 | }, 50 | /** 51 | * Get Text of Script Object 52 | * @param {string} id a character-string specifying the id of the script 53 | * element container shader information 54 | * @return {string} source code for a shader 55 | */ 56 | getShaderSource : function (id) { 57 | var shader = document.getElementById(id); 58 | if (!shader) 59 | throw "Fuck"; 60 | return shader.text; 61 | }, 62 | /** 63 | * Perspective-Matrix 64 | * @param {object} m an object specifying the values used to compute the 65 | * perspective matrix via frustrum. 66 | * @return {array} a 16-element array representing a matrix 67 | */ 68 | perspectiveMatrix : function (m) { 69 | m = m || {}; 70 | m.fieldOfView = m.fieldOfView || 30.0; 71 | m.aspectRatio = m.aspectRatio || 1; 72 | m.nearPlane = m.nearPlane || .1; 73 | m.farPlane = m.farPlane || 100.0; 74 | 75 | mat4.perspective(m.fieldOfView, m.aspectRatio, m.nearPlane, m.farPlane, this.pMatrix); 76 | return this.pMatrix; 77 | }, 78 | /** 79 | * Push Model View Matrix onto the Stack 80 | * @return {undefined} undefined 81 | */ 82 | pushModelView : function () { 83 | var copy = mat4.create(); 84 | mat4.set(this.mvMatrix, copy); 85 | _mvMatrixStack.push(copy); 86 | }, 87 | /** 88 | * Pop Model View Matrix onto the Stack 89 | * @return {undefined} undefined 90 | */ 91 | popModelView : function () { 92 | this.mvMatrix = _mvMatrixStack.pop(); 93 | }, 94 | /** 95 | * Push Both Model and Perspective Matrix 96 | * @return {undefined} undefined 97 | */ 98 | pushMatrices : function () { 99 | pushModelView(); 100 | _pMatrixStack.push(this.pMatrix); 101 | }, 102 | /** 103 | * Pop Both Model and Perspective Matrix 104 | * @return {undefined} undefined 105 | */ 106 | popMatrices : function () { 107 | popModelView(); 108 | this.pMatrix = _pMatrixStack.pop(); 109 | }, 110 | /** 111 | * Set Matrices 112 | */ 113 | setMatrices : function (camera) { 114 | if (camera.mvMatrix !== undefined) { 115 | } 116 | if (camera.pMatrix !== undefined) { 117 | } 118 | } 119 | }; 120 | })(); 121 | 122 | window.requestAnimFrame = (function() { 123 | return 124 | window.requestAnimationFrame || 125 | window.webkitRequestAnimationFrame || 126 | window.mozRequestAnimationFrame || 127 | window.oRequestAnimationFrame || 128 | window.msRequestAnimationFrame || 129 | function (callback) { setInterval(callback, 1000/60); } 130 | })(); 131 | -------------------------------------------------------------------------------- /generative-plane/webgl.js: -------------------------------------------------------------------------------- 1 | var webgl = (function () { 2 | var _mvMatrixStack = [], _pMatrixStack = []; 3 | return { 4 | ___about : "webgl", 5 | mvMatrix : mat4.create(), 6 | pMatrix : mat4.create(), 7 | nMatrix : mat4.create(), 8 | /** 9 | * Create and Compile a shader from Source Code 10 | * @param {!WebGLRenderingContext} ... ... 11 | * @param {string} ... ... 12 | * @param {number} ... ... 13 | * @return {!WebGLShader} ... 14 | */ 15 | compileShader : function (gl, shaderSource, shaderType) { 16 | var shader = gl.createShader(shaderType); 17 | gl.shaderSource(shader, shaderSource); 18 | gl.compileShader(shader); 19 | if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 20 | console.log("** SHADER ERROR **"); 21 | console.log(gl.getShaderInfoLog(shader)); 22 | } 23 | return shader; 24 | }, 25 | /** 26 | * Create a Program from Two Shaders 27 | * @param {!WebGLRenderingContext} 28 | * @param {WebGLShader} 29 | * @param {WebGLShader} 30 | * @return {!WebGLProgram} 31 | */ 32 | createProgram : function (gl, vertShader, fragShader) { 33 | var program = gl.createProgram(); 34 | gl.attachShader(program, vertShader); 35 | gl.attachShader(program, fragShader); 36 | gl.linkProgram(program); 37 | if (!gl.getProgramParameter(program, gl.LINK_STATUS)) 38 | console.log("** PROGRAM ERROR **"); 39 | return program; 40 | }, 41 | /* 42 | */ 43 | createProgramFromIds : function (gl, vertId, fragId) { 44 | var vertSource = this.getShaderSource(vertId); 45 | var fragSource = this.getShaderSource(fragId); 46 | var vertShader = this.compileShader(gl, vertSource, gl.VERTEX_SHADER); 47 | var fragShader = this.compileShader(gl, fragSource, gl.FRAGMENT_SHADER); 48 | return this.createProgram(gl, vertShader, fragShader); 49 | }, 50 | /** 51 | * Get Text of Script Object 52 | * @param {string} id a character-string specifying the id of the script 53 | * element container shader information 54 | * @return {string} source code for a shader 55 | */ 56 | getShaderSource : function (id) { 57 | var shader = document.getElementById(id); 58 | if (!shader) 59 | throw "Fuck"; 60 | return shader.text; 61 | }, 62 | /** 63 | * Perspective-Matrix 64 | * @param {object} m an object specifying the values used to compute the 65 | * perspective matrix via frustrum. 66 | * @return {array} a 16-element array representing a matrix 67 | */ 68 | perspectiveMatrix : function (m) { 69 | m = m || {}; 70 | m.fieldOfView = m.fieldOfView || 30.0; 71 | m.aspectRatio = m.aspectRatio || 1; 72 | m.nearPlane = m.nearPlane || .1; 73 | m.farPlane = m.farPlane || 100.0; 74 | 75 | mat4.perspective(m.fieldOfView, m.aspectRatio, m.nearPlane, m.farPlane, this.pMatrix); 76 | return this.pMatrix; 77 | }, 78 | /** 79 | * Push Model View Matrix onto the Stack 80 | * @return {undefined} undefined 81 | */ 82 | pushModelView : function () { 83 | var copy = mat4.create(); 84 | mat4.set(this.mvMatrix, copy); 85 | _mvMatrixStack.push(copy); 86 | }, 87 | /** 88 | * Pop Model View Matrix onto the Stack 89 | * @return {undefined} undefined 90 | */ 91 | popModelView : function () { 92 | this.mvMatrix = _mvMatrixStack.pop(); 93 | }, 94 | /** 95 | * Push Both Model and Perspective Matrix 96 | * @return {undefined} undefined 97 | */ 98 | pushMatrices : function () { 99 | pushModelView(); 100 | _pMatrixStack.push(this.pMatrix); 101 | }, 102 | /** 103 | * Pop Both Model and Perspective Matrix 104 | * @return {undefined} undefined 105 | */ 106 | popMatrices : function () { 107 | popModelView(); 108 | this.pMatrix = _pMatrixStack.pop(); 109 | }, 110 | /** 111 | * Set Matrices 112 | */ 113 | setMatrices : function (camera) { 114 | if (camera.mvMatrix !== undefined) { 115 | } 116 | if (camera.pMatrix !== undefined) { 117 | } 118 | } 119 | }; 120 | })(); 121 | 122 | window.requestAnimFrame = (function() { 123 | return 124 | window.requestAnimationFrame || 125 | window.webkitRequestAnimationFrame || 126 | window.mozRequestAnimationFrame || 127 | window.oRequestAnimationFrame || 128 | window.msRequestAnimationFrame || 129 | function (callback) { setInterval(callback, 1000/60); } 130 | })(); 131 | -------------------------------------------------------------------------------- /generative-lines-demos-2013-10/webgl.js: -------------------------------------------------------------------------------- 1 | var webgl = (function () { 2 | var _mvMatrixStack = [], _pMatrixStack = []; 3 | return { 4 | ___about : "webgl", 5 | mvMatrix : mat4.create(), 6 | pMatrix : mat4.create(), 7 | nMatrix : mat4.create(), 8 | /** 9 | * Create and Compile a shader from Source Code 10 | * @param {!WebGLRenderingContext} ... ... 11 | * @param {string} ... ... 12 | * @param {number} ... ... 13 | * @return {!WebGLShader} ... 14 | */ 15 | compileShader : function (gl, shaderSource, shaderType) { 16 | var shader = gl.createShader(shaderType); 17 | gl.shaderSource(shader, shaderSource); 18 | gl.compileShader(shader); 19 | if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 20 | console.log("** SHADER ERROR **"); 21 | console.log(gl.getShaderInfoLog(shader)); 22 | } 23 | return shader; 24 | }, 25 | /** 26 | * Create a Program from Two Shaders 27 | * @param {!WebGLRenderingContext} 28 | * @param {WebGLShader} 29 | * @param {WebGLShader} 30 | * @return {!WebGLProgram} 31 | */ 32 | createProgram : function (gl, vertShader, fragShader) { 33 | var program = gl.createProgram(); 34 | gl.attachShader(program, vertShader); 35 | gl.attachShader(program, fragShader); 36 | gl.linkProgram(program); 37 | if (!gl.getProgramParameter(program, gl.LINK_STATUS)) 38 | console.log("** PROGRAM ERROR **"); 39 | return program; 40 | }, 41 | /* 42 | */ 43 | createProgramFromIds : function (gl, vertId, fragId) { 44 | var vertSource = this.getShaderSource(vertId); 45 | var fragSource = this.getShaderSource(fragId); 46 | var vertShader = this.compileShader(gl, vertSource, gl.VERTEX_SHADER); 47 | var fragShader = this.compileShader(gl, fragSource, gl.FRAGMENT_SHADER); 48 | return this.createProgram(gl, vertShader, fragShader); 49 | }, 50 | /** 51 | * Get Text of Script Object 52 | * @param {string} id a character-string specifying the id of the script 53 | * element container shader information 54 | * @return {string} source code for a shader 55 | */ 56 | getShaderSource : function (id) { 57 | var shader = document.getElementById(id); 58 | if (!shader) 59 | throw "Fuck"; 60 | return shader.text; 61 | }, 62 | /** 63 | * Perspective-Matrix 64 | * @param {object} m an object specifying the values used to compute the 65 | * perspective matrix via frustrum. 66 | * @return {array} a 16-element array representing a matrix 67 | */ 68 | perspectiveMatrix : function (m) { 69 | m = m || {}; 70 | m.fieldOfView = m.fieldOfView || 30.0; 71 | m.aspectRatio = m.aspectRatio || 1; 72 | m.nearPlane = m.nearPlane || .1; 73 | m.farPlane = m.farPlane || 100.0; 74 | 75 | mat4.perspective(m.fieldOfView, m.aspectRatio, m.nearPlane, m.farPlane, this.pMatrix); 76 | return this.pMatrix; 77 | }, 78 | /** 79 | * Push Model View Matrix onto the Stack 80 | * @return {undefined} undefined 81 | */ 82 | pushModelView : function () { 83 | var copy = mat4.create(); 84 | mat4.set(this.mvMatrix, copy); 85 | _mvMatrixStack.push(copy); 86 | }, 87 | /** 88 | * Pop Model View Matrix onto the Stack 89 | * @return {undefined} undefined 90 | */ 91 | popModelView : function () { 92 | this.mvMatrix = _mvMatrixStack.pop(); 93 | }, 94 | /** 95 | * Push Both Model and Perspective Matrix 96 | * @return {undefined} undefined 97 | */ 98 | pushMatrices : function () { 99 | pushModelView(); 100 | _pMatrixStack.push(this.pMatrix); 101 | }, 102 | /** 103 | * Pop Both Model and Perspective Matrix 104 | * @return {undefined} undefined 105 | */ 106 | popMatrices : function () { 107 | popModelView(); 108 | this.pMatrix = _pMatrixStack.pop(); 109 | }, 110 | /** 111 | * Set Matrices 112 | */ 113 | setMatrices : function (camera) { 114 | if (camera.mvMatrix !== undefined) { 115 | } 116 | if (camera.pMatrix !== undefined) { 117 | } 118 | } 119 | }; 120 | })(); 121 | 122 | window.requestAnimFrame = (function() { 123 | return 124 | window.requestAnimationFrame || 125 | window.webkitRequestAnimationFrame || 126 | window.mozRequestAnimationFrame || 127 | window.oRequestAnimationFrame || 128 | window.msRequestAnimationFrame || 129 | function (callback) { setInterval(callback, 1000/60); } 130 | })(); 131 | -------------------------------------------------------------------------------- /lessons/03/app.js: -------------------------------------------------------------------------------- 1 | var app = function (_canvasId) { 2 | 3 | var _canvas = document.getElementById(_canvasId); 4 | var _gl = _canvas.getContext("webgl"); 5 | 6 | var _triangleVbo = { 7 | vbuffer : undefined, 8 | vertices : undefined, 9 | cbuffer : undefined, 10 | colors : undefined 11 | }; 12 | 13 | var _passShaderProg = undefined; 14 | 15 | //// 16 | // Return actual object 17 | return { 18 | init : function () { 19 | // Setup 20 | setup(); 21 | 22 | // Initialize VBO 23 | _triangleVbo.vbuffer = _gl.createBuffer(); 24 | _triangleVbo.vertices = new Float32Array([ 0.0, 1.0, 4.0, -1.0, -1.0, 4.0, 1.0, -1.0, 4.0 ]); 25 | _gl.bindBuffer(_gl.ARRAY_BUFFER, _triangleVbo.vbuffer); 26 | _gl.bufferData(_gl.ARRAY_BUFFER, _triangleVbo.vertices, _gl.STATIC_DRAW); 27 | _triangleVbo.cbuffer = _gl.createBuffer(); 28 | _triangleVbo.colors = new Float32Array([ 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 0 ]); 29 | _gl.bindBuffer(_gl.ARRAY_BUFFER, _triangleVbo.cbuffer); 30 | _gl.bufferData(_gl.ARRAY_BUFFER, _triangleVbo.colors, _gl.STATIC_DRAW); 31 | }, 32 | loop : loop, 33 | print : function () { 34 | console.log(_canvas); 35 | console.log(_gl); 36 | } 37 | }; 38 | 39 | /** 40 | * Begin looping animation 41 | * @return {undefined} undefined 42 | */ 43 | function loop () { 44 | requestAnimationFrame(loop); 45 | draw(); 46 | } 47 | 48 | /** 49 | * Setup Necessary Stuff 50 | * @return {undefined} undefined 51 | */ 52 | function setup() { 53 | // Setup viewport 54 | _gl.viewport(0, 0, _canvas.width, _canvas.height); 55 | // Shader 56 | var shader = { 57 | _code : { vert : webgl.getShader("pass-vert"), frag : webgl.getShader("pass-frag") }, 58 | vert : _gl.createShader(_gl.VERTEX_SHADER), 59 | frag : _gl.createShader(_gl.FRAGMENT_SHADER) 60 | }; 61 | // Compile vert shader 62 | _gl.shaderSource(shader.vert, shader._code.vert); 63 | _gl.compileShader(shader.vert); 64 | // Compile frag shader 65 | _gl.shaderSource(shader.frag, shader._code.frag); 66 | _gl.compileShader(shader.frag); 67 | // Attach shader 68 | _passShaderProg = _gl.createProgram(); 69 | _gl.attachShader(_passShaderProg, shader.vert); 70 | _gl.attachShader(_passShaderProg, shader.frag); 71 | _gl.linkProgram(_passShaderProg); 72 | // Clear settings 73 | _gl.clearColor(.25, .22, .2, 1); 74 | _gl.clearDepth(1.0); 75 | // Depth and blending 76 | _gl.enable(_gl.DEPTH_TEST); 77 | _gl.enable(_gl.BLEND); 78 | _gl.depthFunc(_gl.LEQUAL); 79 | _gl.blendFunc(_gl.SRC_ALPHA, _gl.ONE); 80 | } 81 | 82 | /** 83 | * Update Before Drawing 84 | * @return {undefined} undefined 85 | */ 86 | function update() { 87 | } 88 | 89 | /** 90 | * Draw Frame 91 | * @return {undefined} undefined 92 | */ 93 | function draw() { 94 | _gl.clear(_gl.COLOR_BUFFER_BIT | _gl.DEPTH_BUFFER_BIT); 95 | 96 | var perspectiveMatrix = webgl.perspectiveMatrix({ 97 | fieldOfView : 30.0, 98 | aspectRatio : _canvas.width / _canvas.height, 99 | nearPlane : 1.0, 100 | farPlane : 10000.0 101 | }); 102 | 103 | // Construct model-view matrix 104 | var t = getElapsedSeconds() / 1.5; 105 | var modelViewMatrix = [ 106 | Math.cos(t), -Math.sin(t), 0, 0, 107 | -Math.sin(t), Math.cos(t), 0, 0, 108 | 0, 0, 1, 0, 109 | 0, 0, 0, 1 110 | ]; 111 | 112 | // Apply shader 113 | _gl.useProgram(_passShaderProg); 114 | 115 | // Vertex index 116 | var vertexPos = _gl.getAttribLocation(_passShaderProg, "vertexPosition"); 117 | _gl.enableVertexAttribArray(vertexPos); 118 | 119 | // Color index 120 | var vertexCol = _gl.getAttribLocation(_passShaderProg, "vertexColor"); 121 | _gl.enableVertexAttribArray(vertexCol); 122 | 123 | _gl.bindBuffer(_gl.ARRAY_BUFFER, _triangleVbo.vbuffer); 124 | _gl.vertexAttribPointer(vertexPos, 3.0, _gl.FLOAT, false, 0, 0); 125 | 126 | _gl.bindBuffer(_gl.ARRAY_BUFFER, _triangleVbo.cbuffer); 127 | _gl.vertexAttribPointer(vertexCol, 4.0, _gl.FLOAT, false, 0, 0); 128 | 129 | var uModelViewMatrix = _gl.getUniformLocation(_passShaderProg, "modelViewMatrix"); 130 | var uPerspectiveMatrix = _gl.getUniformLocation(_passShaderProg, "perspectiveMatrix"); 131 | 132 | _gl.uniformMatrix4fv(uModelViewMatrix, false, new Float32Array(perspectiveMatrix)); 133 | _gl.uniformMatrix4fv(uPerspectiveMatrix, false, new Float32Array(modelViewMatrix)); 134 | 135 | // Draw 136 | _gl.drawArrays(_gl.TRIANGLES, 0, 3); 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /t5/01/app.js: -------------------------------------------------------------------------------- 1 | var app = function (_canvasId) { 2 | var _canvas = document.getElementById(_canvasId); 3 | var _gl = _canvas.getContext("webgl"); 4 | 5 | // Planes 6 | var _planes = [ 7 | MaskedPlane([0, -.30, 0], [4.0, 4.0, 4.0], { color : [1, 1, 1, .20], mask : "together-images/-2_TRANS.png", pattern : "together-images/-2_PATTERN.png" }), 8 | MaskedPlane([0, -.15, 0], [4.0, 4.0, 4.0], { color : [1, 1, 0, .20], mask : "together-images/-1_TRANS.png", pattern : "together-images/-1_PATTERN.png" }), 9 | MaskedPlane([0, -.00, 0], [4.0, 4.0, 4.0], { color : [1, 0, 1, .20], mask : "together-images/-0_TRANS.png", pattern : "together-images/+0_PATTERN.png" }), 10 | MaskedPlane([0, +.15, 0], [4.0, 4.0, 4.0], { color : [1, 1, 1, .20], mask : "together-images/+1_TRANS.png", pattern : "together-images/+1_PATTERN.png" }), 11 | MaskedPlane([0, +.30, 0], [4.0, 4.0, 4.0], { color : [0, 1, 1, .20], mask : "together-images/+2_TRANS.png", pattern : "together-images/+2_PATTERN.png" }), 12 | ]; 13 | // Logo 14 | var _logo = new TogetherLogo( 15 | [ -0.0, 0, 0 ], 16 | [ 3.0, 0.0, 3.0 ], 17 | { color : [ 0, 0, 0, 1. ] } 18 | ); 19 | 20 | var _is = { running : true }; 21 | var _isRunning = true; 22 | 23 | // ... 24 | var _pressedKeys = {}; 25 | 26 | var _controls = { 27 | z_translate : 4., 28 | textureNumber : 0, 29 | lighting_x : 0.10, 30 | lighting_y : 0.1, 31 | lighting_z : 0.1, 32 | lightingDirection : [ -1.00, -0.30, -1.0 ], 33 | ambientLightColor : [ +.35 * 255, .30 * 255, .27 * 255 ], 34 | directionalLightColor : [ .6 * 255, .6 * 255, .6 * 255 ], 35 | alpha : 1., 36 | transparency : true, 37 | rotate : 0.2, 38 | }; 39 | 40 | var _gui = new dat.GUI(); 41 | _gui.add(_controls, "rotate", -Math.PI, Math.PI, .01); 42 | 43 | document.onkeyup = function (ev) { 44 | _pressedKeys[ev.keyCode] = false; 45 | } 46 | 47 | document.onkeydown = function (ev) { 48 | _pressedKeys[ev.keyCode] = true; 49 | } 50 | 51 | // ... 52 | var _passProg = webgl.createProgramFromIds(gl, "vert-pass", "frag-pass"); 53 | var _maskProg = webgl.createProgramFromIds(gl, "vert-mask", "frag-mask"); 54 | var _patternMaskProg = webgl.createProgramFromIds(gl, "vert-pattern-mask", "frag-pattern-mask"); 55 | 56 | // Return actual object 57 | return { 58 | init : function () { 59 | setup(); 60 | _gl.bindBuffer(_gl.ARRAY_BUFFER, null); 61 | }, 62 | loop : loop, 63 | print : function () { 64 | console.log(_canvas); 65 | console.log(_gl); 66 | } 67 | }; 68 | /** 69 | * Begin looping animation 70 | * @return {undefined} undefined 71 | */ 72 | function loop () { 73 | if (_isRunning) 74 | requestAnimationFrame(loop); 75 | update(); 76 | draw(); 77 | } 78 | 79 | function setup() { 80 | _gl.viewport(0, 0, _canvas.width, _canvas.height); 81 | _gl.clearColor(0, 0, 0, 1); 82 | _gl.clearDepth(1.0); 83 | _gl.enable(_gl.BLEND); 84 | _gl.blendFunc(_gl.SRC_ALPHA, _gl.ONE); 85 | } 86 | 87 | function update() { 88 | updatePosition(); 89 | } 90 | 91 | /** 92 | * Draw Frame 93 | * @return {undefined} undefined 94 | */ 95 | function draw() { 96 | gl.viewport(0, 0, canvas.width, canvas.height); 97 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 98 | var t = getElapsedSeconds() / 1.5; 99 | webgl.perspectiveMatrix({ 100 | fieldOfView : 45, 101 | aspectRatio : 1, 102 | nearPlane : .1, 103 | farPlane : 100 104 | }); 105 | 106 | mat4.identity(webgl.mvMatrix); 107 | mat4.translate(webgl.mvMatrix, [ 0, 0, -_controls.z_translate ]); 108 | mat4.rotate(webgl.mvMatrix, Math.PI/2, [ 1, 0, 0 ]); 109 | mat4.rotate(webgl.mvMatrix, _controls.rotate, [ 0, 0, -1 ]); 110 | 111 | for (var i = 0; i < _planes.length; i++) { 112 | _gl.enable(_gl.BLEND); 113 | _gl.blendFunc(_gl.SRC_ALPHA, _gl.ONE); 114 | _planes[i].draw(_patternMaskProg); 115 | } 116 | 117 | mat4.identity(webgl.mvMatrix); 118 | mat4.translate(webgl.mvMatrix, [ 0, 0, -_controls.z_translate ]); 119 | mat4.rotate(webgl.mvMatrix, Math.PI/2, [ 1, 0, 0 ]); 120 | 121 | _gl.blendFunc(_gl.SRC_ALPHA, _gl.ONE_MINUS_SRC_ALPHA); 122 | _logo.draw(_maskProg); 123 | } 124 | 125 | function updatePosition() { 126 | if (_pressedKeys[72]) { 127 | } 128 | if (_pressedKeys[74]) { 129 | } 130 | if (_pressedKeys[75]) { 131 | } 132 | if (_pressedKeys[76]) { 133 | } 134 | if (_pressedKeys[87]) { 135 | _controls.z_translate += .09; 136 | } 137 | if (_pressedKeys[83]) { 138 | _controls.z_translate -= .09; 139 | } 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /t5/02/app.js: -------------------------------------------------------------------------------- 1 | var app = function (_canvasId) { 2 | var _canvas = document.getElementById(_canvasId); 3 | var _gl = _canvas.getContext("webgl"); 4 | 5 | // Planes 6 | var _planes = [ 7 | MaskedPlane([0, -.30, 0], [4.0, 4.0, 4.0], { color : [1, 1, 1, .20], mask : "together-images/-2_TRANS.png", pattern : "together-images/-2_PATTERN.png" }), 8 | MaskedPlane([0, -.15, 0], [4.0, 4.0, 4.0], { color : [1, 1, 0, .20], mask : "together-images/-1_TRANS.png", pattern : "together-images/-1_PATTERN.png" }), 9 | MaskedPlane([0, -.00, 0], [4.0, 4.0, 4.0], { color : [1, 0, 1, .20], mask : "together-images/-0_TRANS.png", pattern : "together-images/+0_PATTERN.png" }), 10 | MaskedPlane([0, +.15, 0], [4.0, 4.0, 4.0], { color : [1, 1, 1, .20], mask : "together-images/+1_TRANS.png", pattern : "together-images/+1_PATTERN.png" }), 11 | MaskedPlane([0, +.30, 0], [4.0, 4.0, 4.0], { color : [0, 1, 1, .20], mask : "together-images/+2_TRANS.png", pattern : "together-images/+2_PATTERN.png" }), 12 | ]; 13 | // Logo 14 | var _logo = new TogetherLogo( 15 | [ -0.0, 0, 0 ], 16 | [ 3.0, 0.0, 3.0 ], 17 | { color : [ 0, 0, 0, 1. ] } 18 | ); 19 | 20 | var _is = { running : true }; 21 | var _isRunning = true; 22 | 23 | // ... 24 | var _pressedKeys = {}; 25 | 26 | var _controls = { 27 | z_translate : 4., 28 | textureNumber : 0, 29 | lighting_x : 0.10, 30 | lighting_y : 0.1, 31 | lighting_z : 0.1, 32 | lightingDirection : [ -1.00, -0.30, -1.0 ], 33 | ambientLightColor : [ +.35 * 255, .30 * 255, .27 * 255 ], 34 | directionalLightColor : [ .6 * 255, .6 * 255, .6 * 255 ], 35 | alpha : 1., 36 | transparency : true, 37 | rotate : 0.2 38 | }; 39 | 40 | var _gui = new dat.GUI(); 41 | _gui.add(_controls, "rotate", -Math.PI, Math.PI, .01); 42 | 43 | document.onkeyup = function (ev) { 44 | _pressedKeys[ev.keyCode] = false; 45 | } 46 | 47 | document.onkeydown = function (ev) { 48 | _pressedKeys[ev.keyCode] = true; 49 | } 50 | 51 | // ... 52 | var _passProg = webgl.createProgramFromIds(gl, "vert-pass", "frag-pass"); 53 | var _maskProg = webgl.createProgramFromIds(gl, "vert-mask", "frag-mask"); 54 | var _patternMaskProg = webgl.createProgramFromIds(gl, "vert-pattern-mask", "frag-pattern-mask"); 55 | 56 | // Return actual object 57 | return { 58 | init : function () { 59 | setup(); 60 | _gl.bindBuffer(_gl.ARRAY_BUFFER, null); 61 | }, 62 | loop : loop, 63 | print : function () { 64 | console.log(_canvas); 65 | console.log(_gl); 66 | } 67 | }; 68 | /** 69 | * Begin looping animation 70 | * @return {undefined} undefined 71 | */ 72 | function loop () { 73 | if (_isRunning) 74 | requestAnimationFrame(loop); 75 | update(); 76 | draw(); 77 | } 78 | 79 | function setup() { 80 | _gl.viewport(0, 0, _canvas.width, _canvas.height); 81 | _gl.clearColor(0, 0, 0, 1); 82 | _gl.clearDepth(1.0); 83 | _gl.enable(_gl.BLEND); 84 | _gl.blendFunc(_gl.SRC_ALPHA, _gl.ONE); 85 | } 86 | 87 | function update() { 88 | updatePosition(); 89 | } 90 | 91 | /** 92 | * Draw Frame 93 | * @return {undefined} undefined 94 | */ 95 | function draw() { 96 | gl.viewport(0, 0, canvas.width, canvas.height); 97 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 98 | var t = getElapsedSeconds() / 3.0; 99 | webgl.perspectiveMatrix({ 100 | fieldOfView : 45, 101 | aspectRatio : 1, 102 | nearPlane : .1, 103 | farPlane : 100 104 | }); 105 | 106 | mat4.identity(webgl.mvMatrix); 107 | mat4.translate(webgl.mvMatrix, [ 0, 0, -_controls.z_translate ]); 108 | mat4.rotate(webgl.mvMatrix, Math.PI/2, [ 1, 0, 0 ]); 109 | mat4.rotate(webgl.mvMatrix, _controls.rotate, [ 0, 0, -1 ]); 110 | 111 | for (var i = 0; i < _planes.length; i++) { 112 | _gl.enable(_gl.BLEND); 113 | _gl.blendFunc(_gl.SRC_ALPHA, _gl.ONE); 114 | _planes[i].draw(_patternMaskProg); 115 | } 116 | 117 | mat4.identity(webgl.mvMatrix); 118 | mat4.translate(webgl.mvMatrix, [ 0, 0, -_controls.z_translate ]); 119 | mat4.rotate(webgl.mvMatrix, Math.PI/2, [ 1, 0, 0 ]); 120 | 121 | _gl.blendFunc(_gl.SRC_ALPHA, _gl.ONE_MINUS_SRC_ALPHA); 122 | _logo.draw(_maskProg); 123 | } 124 | 125 | function updatePosition() { 126 | if (_pressedKeys[72]) { 127 | } 128 | if (_pressedKeys[74]) { 129 | } 130 | if (_pressedKeys[75]) { 131 | } 132 | if (_pressedKeys[76]) { 133 | } 134 | if (_pressedKeys[87]) { 135 | _controls.z_translate += .09; 136 | } 137 | if (_pressedKeys[83]) { 138 | _controls.z_translate -= .09; 139 | } 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /Resume/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Page Not Found :( 6 | 139 | 140 | 141 |
142 |

Not found :(

143 |

Sorry, but the page you were trying to view does not exist.

144 |

It looks like this was the result of either:

145 |
    146 |
  • a mistyped address
    • 147 |
  • an out-of-date link
    • 148 |
149 | 152 | 153 |
154 | 155 | 156 | -------------------------------------------------------------------------------- /lessons/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Lesson 01 5 | 6 | 14 | 15 | 20 | 21 | 118 | 130 | 131 | 132 | 133 |
WebGL is unsupported.
134 | 135 | 136 | -------------------------------------------------------------------------------- /tangle/app.js: -------------------------------------------------------------------------------- 1 | var app = function (_canvasId) { 2 | var _canvas = document.getElementById(_canvasId); 3 | var _gl = _canvas.getContext("webgl"); 4 | 5 | var _triangleVbo = { 6 | vbuffer : undefined, 7 | vertices : undefined, 8 | cbuffer : undefined, 9 | colors : undefined 10 | }; 11 | 12 | var _passShaderProg = undefined; 13 | 14 | //// 15 | // Return actual object 16 | return { 17 | init : function () { 18 | // Setup 19 | setup(); 20 | 21 | // Initialize VBO 22 | _triangleVbo.vbuffer = _gl.createBuffer(); 23 | _triangleVbo.vertices = []; 24 | var v = []; 25 | var pos = { x : 0, y : 0, z : 0 }; 26 | for (var i = 0; i < 400; i++) { 27 | var x = -.5 + (i % 20)/19; 28 | var y = -.5 + (Math.floor(i / 20))/19; 29 | pos = { 30 | x : x + Math.cos(4 * pos.x) + Math.random()/3, 31 | y : y + Math.sin(2.5 * pos.y), 32 | z : 1 + 4 * Math.random() 33 | }; 34 | v.push(pos.x); 35 | v.push(pos.y); 36 | v.push(pos.z); 37 | } 38 | _triangleVbo.vertices = new Float32Array(v); 39 | _gl.bindBuffer(_gl.ARRAY_BUFFER, _triangleVbo.vbuffer); 40 | _gl.bufferData(_gl.ARRAY_BUFFER, _triangleVbo.vertices, _gl.STATIC_DRAW); 41 | _triangleVbo.cbuffer = _gl.createBuffer(); 42 | _triangleVbo.colors = []; 43 | var c = []; 44 | for (var i = 0; i < 900; i++) { 45 | c.push(i/999); 46 | c.push(i/999); 47 | c.push(i/199); 48 | c.push(1); 49 | } 50 | _triangleVbo.colors = new Float32Array(c); 51 | _gl.bindBuffer(_gl.ARRAY_BUFFER, _triangleVbo.cbuffer); 52 | _gl.bufferData(_gl.ARRAY_BUFFER, _triangleVbo.colors, _gl.STATIC_DRAW); 53 | }, 54 | loop : loop, 55 | print : function () { 56 | console.log(_canvas); 57 | console.log(_gl); 58 | } 59 | }; 60 | 61 | /** 62 | * Begin looping animation 63 | * @return {undefined} undefined 64 | */ 65 | function loop () { 66 | requestAnimationFrame(loop); 67 | draw(); 68 | } 69 | 70 | /** 71 | * Setup Necessary Stuff 72 | * @return {undefined} undefined 73 | */ 74 | function setup() { 75 | // Setup viewport 76 | _gl.viewport(0, 0, _canvas.width, _canvas.height); 77 | // Shader 78 | var shader = { 79 | _code : { vert : webgl.getShader("pass-vert"), frag : webgl.getShader("pass-frag") }, 80 | vert : _gl.createShader(_gl.VERTEX_SHADER), 81 | frag : _gl.createShader(_gl.FRAGMENT_SHADER) 82 | }; 83 | // Compile vert shader 84 | _gl.shaderSource(shader.vert, shader._code.vert); 85 | _gl.compileShader(shader.vert); 86 | // Compile frag shader 87 | _gl.shaderSource(shader.frag, shader._code.frag); 88 | _gl.compileShader(shader.frag); 89 | // Attach shader 90 | _passShaderProg = _gl.createProgram(); 91 | _gl.attachShader(_passShaderProg, shader.vert); 92 | _gl.attachShader(_passShaderProg, shader.frag); 93 | _gl.linkProgram(_passShaderProg); 94 | // Clear settings 95 | _gl.clearColor(.25, .22, .2, 1); 96 | _gl.clearDepth(1.0); 97 | // Depth and blending 98 | _gl.enable(_gl.DEPTH_TEST); 99 | _gl.enable(_gl.BLEND); 100 | _gl.depthFunc(_gl.LEQUAL); 101 | _gl.blendFunc(_gl.SRC_ALPHA, _gl.ONE); 102 | } 103 | 104 | /** 105 | * Update Before Drawing 106 | * @return {undefined} undefined 107 | */ 108 | function update() { 109 | } 110 | 111 | /** 112 | * Draw Frame 113 | * @return {undefined} undefined 114 | */ 115 | function draw() { 116 | _gl.clear(_gl.COLOR_BUFFER_BIT | _gl.DEPTH_BUFFER_BIT); 117 | 118 | var perspectiveMatrix = webgl.perspectiveMatrix({ 119 | fieldOfView : 60.0, 120 | aspectRatio : _canvas.width / _canvas.height, 121 | nearPlane : 0, 122 | farPlane : 100.0 123 | }); 124 | 125 | // Construct model-view matrix 126 | var t = getElapsedSeconds() / 1.5; 127 | var modelViewMatrix = [ 128 | Math.cos(t), 0, -Math.sin(t), 0, 129 | 0, 1, 0, 0, 130 | Math.sin(t), 0, Math.cos(t), 0, 131 | 0, 0, 0, 1 132 | ]; 133 | /* 134 | modelViewMatrix = [ 135 | 1, 0, 0, 0, 136 | 0, 1, 0, 0, 137 | 0, 0, 1, 0, 138 | 0, 0, 0, 1 139 | ]; 140 | //*/ 141 | 142 | // Apply shader 143 | _gl.useProgram(_passShaderProg); 144 | 145 | // Vertex index 146 | var vertexPos = _gl.getAttribLocation(_passShaderProg, "vertexPosition"); 147 | _gl.enableVertexAttribArray(vertexPos); 148 | 149 | // Color index 150 | var vertexCol = _gl.getAttribLocation(_passShaderProg, "vertexColor"); 151 | _gl.enableVertexAttribArray(vertexCol); 152 | 153 | _gl.bindBuffer(_gl.ARRAY_BUFFER, _triangleVbo.vbuffer); 154 | _gl.vertexAttribPointer(vertexPos, 3.0, _gl.FLOAT, false, 0, 0); 155 | 156 | _gl.bindBuffer(_gl.ARRAY_BUFFER, _triangleVbo.cbuffer); 157 | _gl.vertexAttribPointer(vertexCol, 4.0, _gl.FLOAT, false, 0, 0); 158 | 159 | var uModelViewMatrix = _gl.getUniformLocation(_passShaderProg, "modelViewMatrix"); 160 | var uPerspectiveMatrix = _gl.getUniformLocation(_passShaderProg, "perspectiveMatrix"); 161 | 162 | _gl.uniformMatrix4fv(uModelViewMatrix, false, new Float32Array(perspectiveMatrix)); 163 | _gl.uniformMatrix4fv(uPerspectiveMatrix, false, new Float32Array(modelViewMatrix)); 164 | 165 | // Draw 166 | _gl.lineWidth(1.); 167 | _gl.drawArrays(_gl.LINE_STRIP, 0, 400); 168 | } 169 | } 170 | -------------------------------------------------------------------------------- /generative-lines-demos-2013-10/circle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | xx : plane of spikes 5 | 6 | 7 | 8 | 9 | 20 | 27 | 55 | 56 | 67 | 68 | 69 | 153 | 169 | 170 | 171 | 172 |
WebGL is unsupported.
173 | 174 | 175 | -------------------------------------------------------------------------------- /sheet/app.js: -------------------------------------------------------------------------------- 1 | var app = function (_canvasId) { 2 | // Canvas, context, whether app is running 3 | var _canvas = document.getElementById(_canvasId); 4 | var _gl = _canvas.getContext("webgl"); 5 | var _isRunning = false; 6 | 7 | // Controls : GUI stuff 8 | var _controls = { 9 | alpha : 0, 10 | color : [ 0, 0, 0, 1 ], 11 | rotate : 1.2, 12 | gui : new dat.GUI() 13 | }; 14 | _controls.gui.add(_controls, "alpha", 0, 20.); 15 | _controls.gui.add(_controls, "rotate", 0., 2. * 3.14159); 16 | _controls.gui.addColor(_controls, "color"); 17 | 18 | // Key handling 19 | var _pressedKeys = {}; 20 | 21 | // Tangle 22 | var _tangle = Tangle(_gl); 23 | 24 | document.onkeyup = function (ev) { 25 | _pressedKeys[ev.keyCode] = false; 26 | } 27 | 28 | document.onkeydown = function (ev) { 29 | _pressedKeys[ev.keyCode] = true; 30 | } 31 | 32 | // Actual app object 33 | return { 34 | init : function () { 35 | setup(); 36 | _gl.bindBuffer(_gl.ARRAY_BUFFER, null); 37 | _loop(); 38 | }, 39 | play : function () { 40 | _isRunning = true; 41 | loop(); 42 | }, 43 | stop : function () { 44 | _isRunning = false; 45 | }, 46 | loop : function () { 47 | _isRunning = true; 48 | _loop(); 49 | } 50 | }; 51 | 52 | /** 53 | * Begin looping animation 54 | * @return {undefined} undefined 55 | */ 56 | function _loop () { 57 | if (_isRunning) { 58 | requestAnimationFrame(_loop); 59 | } 60 | update(); 61 | draw(); 62 | } 63 | 64 | function setup() { 65 | _gl.clearColor(.25, .22, .2, 1); 66 | _gl.clearDepth(1.0); 67 | _gl.enable(_gl.DEPTH_TEST); 68 | _gl.enable(_gl.BLEND); 69 | _gl.blendFunc(_gl.SRC_ALPHA, _gl.ONE); 70 | } 71 | 72 | function update() { 73 | _tangle.update(_controls.rotate); 74 | } 75 | 76 | function draw() { 77 | _gl.viewport(0, 0, _canvas.width, _canvas.height); 78 | _gl.clear(_gl.COLOR_BUFFER_BIT | _gl.DEPTH_BUFFER_BIT); 79 | 80 | var t = getElapsedSeconds(); 81 | 82 | // Perspective Matrix 83 | webgl.perspectiveMatrix({ 84 | fieldOfView : 45, 85 | aspectRatio : 1, 86 | nearPlane : .1, 87 | farPlane : 100 88 | }); 89 | 90 | // Model-view Matrix 91 | mat4.identity(webgl.mvMatrix); 92 | 93 | // 94 | _tangle.draw(); 95 | } 96 | } 97 | 98 | var Tangle = (function (gl) { 99 | var _indices = []; 100 | var _positions = []; 101 | var _colors = []; 102 | 103 | var pos = { x : 0, y : 0, z : 0 }; 104 | var center = { x : 0, y : 0, z : 0 }; 105 | 106 | for (var i = 0; i < 10 * 10; i++) { 107 | var t = getElapsedSeconds(); 108 | var x = i % 10; 109 | var y = Math.floor(i / 10); 110 | x = x/5 - 1; 111 | y = y/5 - 1; 112 | pos = { 113 | x : x + Math.cos(4 * pos.x) + Math.random()/3, 114 | y : y + Math.sin(2.5 * pos.y), 115 | z : 1 + 4 * Math.random() 116 | }; 117 | /* 118 | pos = { 119 | x : x, 120 | y : y, 121 | z : 1. - Math.random()/2 122 | }; 123 | */ 124 | 125 | _positions.push(pos.x); 126 | _positions.push(pos.y); 127 | _positions.push(pos.z); 128 | 129 | center.x += pos.x; 130 | center.y += pos.y; 131 | center.z += pos.z; 132 | 133 | _colors.push(1. - i/100); 134 | _colors.push(1.); 135 | _colors.push(1.); 136 | _colors.push(i/100); 137 | } 138 | 139 | center.x /= 100; 140 | center.y /= 100; 141 | center.z /= 100; 142 | 143 | var pbuffer = gl.createBuffer(); 144 | var cbuffer = gl.createBuffer(); 145 | 146 | gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer); 147 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(_positions), gl.STATIC_DRAW); 148 | 149 | gl.bindBuffer(gl.ARRAY_BUFFER, cbuffer); 150 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(_colors), gl.STATIC_DRAW); 151 | 152 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 153 | 154 | var _program; 155 | initShader(); 156 | 157 | var _angle = 0; 158 | 159 | return { 160 | update : function (angle) { 161 | _angle = angle; 162 | }, 163 | draw : function () { 164 | webgl.pushModelView(); 165 | 166 | webgl.perspectiveMatrix({ 167 | fieldOfView : 45, 168 | aspectRatio : 1, 169 | nearPlane : .1, 170 | farPlane : 100 171 | }); 172 | mat4.identity(webgl.mvMatrix); 173 | mat4.translate(webgl.mvMatrix, [ 0, 0, -15 ]); 174 | mat4.rotate(webgl.mvMatrix, _angle, [ 0, 1, 0 ]); 175 | 176 | gl.useProgram(_program); 177 | 178 | var aPosition = gl.getAttribLocation(_program, "aPosition"); 179 | var aColor = gl.getAttribLocation(_program, "aColor"); 180 | var uPMatrix = gl.getUniformLocation(_program, "uPMatrix"); 181 | var uMVMatrix = gl.getUniformLocation(_program, "uMVMatrix"); 182 | 183 | gl.enableVertexAttribArray(aPosition); 184 | gl.enableVertexAttribArray(aColor); 185 | 186 | gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer); 187 | gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0); 188 | 189 | gl.bindBuffer(gl.ARRAY_BUFFER, cbuffer); 190 | gl.vertexAttribPointer(aColor, 4, gl.FLOAT, false, 0, 0); 191 | 192 | gl.uniformMatrix4fv(uPMatrix, false, webgl.pMatrix); 193 | gl.uniformMatrix4fv(uMVMatrix, false, webgl.mvMatrix); 194 | 195 | gl.drawArrays(gl.LINE_STRIP, 0, 10 * 10); 196 | 197 | webgl.popModelView(); 198 | } 199 | } 200 | 201 | function initShader() { 202 | var vCode = webgl.getShader("pass-vert"); 203 | var fCode = webgl.getShader("pass-frag"); 204 | var vShader = gl.createShader(gl.VERTEX_SHADER); 205 | var fShader = gl.createShader(gl.FRAGMENT_SHADER); 206 | gl.shaderSource(vShader, vCode); 207 | gl.shaderSource(fShader, fCode); 208 | gl.compileShader(vShader); 209 | gl.compileShader(fShader); 210 | _program = gl.createProgram(); 211 | gl.attachShader(_program, vShader); 212 | gl.attachShader(_program, fShader); 213 | gl.linkProgram(_program); 214 | } 215 | }); 216 | -------------------------------------------------------------------------------- /lessons/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Lesson 02 5 | 6 | 17 | 18 | 25 | 26 | 147 | 159 | 160 | 161 | 162 |
WebGL is unsupported.
163 | 164 | 165 | -------------------------------------------------------------------------------- /tangl3/app.js: -------------------------------------------------------------------------------- 1 | var app = function (_canvasId) { 2 | // Canvas, context, whether app is running 3 | var _canvas = document.getElementById(_canvasId); 4 | var _gl = _canvas.getContext("webgl"); 5 | var _isRunning = false; 6 | 7 | var _grid = { 8 | xmin : -1.0, 9 | xmax : 1.0, 10 | ymin : -1.0, 11 | ymax : 1.0, 12 | xdim : 70, 13 | ydim : 70 14 | }; 15 | 16 | // Controls : GUI stuff 17 | var _controls = { 18 | alpha : 0, 19 | color : [ 0, 0, 0, 1 ], 20 | rotate : 1.2, 21 | gui : new dat.GUI() 22 | }; 23 | _controls.gui.add(_controls, "alpha", 0, 20.); 24 | _controls.gui.add(_controls, "rotate", 0., 2. * 3.14159); 25 | _controls.gui.addColor(_controls, "color"); 26 | 27 | // Key handling 28 | var _pressedKeys = {}; 29 | 30 | // Tangle 31 | var _tangle = Tangle(_gl); 32 | 33 | document.onkeyup = function (ev) { 34 | _pressedKeys[ev.keyCode] = false; 35 | } 36 | 37 | document.onkeydown = function (ev) { 38 | _pressedKeys[ev.keyCode] = true; 39 | } 40 | 41 | // Actual app object 42 | return { 43 | init : function () { 44 | setup(); 45 | _gl.bindBuffer(_gl.ARRAY_BUFFER, null); 46 | _loop(); 47 | }, 48 | play : function () { 49 | _isRunning = true; 50 | loop(); 51 | }, 52 | stop : function () { 53 | _isRunning = false; 54 | }, 55 | loop : function () { 56 | _isRunning = true; 57 | _loop(); 58 | } 59 | }; 60 | 61 | /** 62 | * Begin looping animation 63 | * @return {undefined} undefined 64 | */ 65 | function _loop () { 66 | if (_isRunning) { 67 | requestAnimationFrame(_loop); 68 | } 69 | update(); 70 | draw(); 71 | } 72 | 73 | function setup() { 74 | _gl.clearColor(.25, .22, .2, 1); 75 | _gl.clearDepth(1.0); 76 | _gl.enable(_gl.DEPTH_TEST); 77 | _gl.enable(_gl.BLEND); 78 | _gl.blendFunc(_gl.SRC_ALPHA, _gl.ONE); 79 | } 80 | 81 | function update() { 82 | _tangle.update(_controls.rotate); 83 | } 84 | 85 | function draw() { 86 | _gl.viewport(0, 0, _canvas.width, _canvas.height); 87 | _gl.clear(_gl.COLOR_BUFFER_BIT | _gl.DEPTH_BUFFER_BIT); 88 | 89 | var t = getElapsedSeconds(); 90 | 91 | // Perspective Matrix 92 | webgl.perspectiveMatrix({ 93 | fieldOfView : 45, 94 | aspectRatio : 1, 95 | nearPlane : .1, 96 | farPlane : 100 97 | }); 98 | 99 | // Model-view Matrix 100 | mat4.identity(webgl.mvMatrix); 101 | 102 | // 103 | _tangle.draw(); 104 | } 105 | } 106 | 107 | var Tangle = (function (gl) { 108 | var xdim, ydim; 109 | 110 | var _indices = []; 111 | var _positions = []; 112 | var _colors = []; 113 | 114 | var pos = { x : 0, y : 0, z : 0 }; 115 | var center = { x : 0, y : 0, z : 0 }; 116 | 117 | for (var i = 0; i < 10 * 10; i++) { 118 | var t = getElapsedSeconds(); 119 | var x = i % 10; 120 | var y = Math.floor(i / 10); 121 | x = x/5 - 1; 122 | y = y/5 - 1; 123 | pos = { 124 | x : x + Math.cos(4 * pos.x) + Math.random()/3, 125 | y : y + Math.sin(2.5 * pos.y), 126 | z : 1 + 4 * Math.random() 127 | }; 128 | /* 129 | pos = { 130 | x : x, 131 | y : y, 132 | z : 1. - Math.random()/2 133 | }; 134 | */ 135 | 136 | _positions.push(pos.x); 137 | _positions.push(pos.y); 138 | _positions.push(pos.z); 139 | 140 | center.x += pos.x; 141 | center.y += pos.y; 142 | center.z += pos.z; 143 | 144 | _colors.push(1. - i/100); 145 | _colors.push(1.); 146 | _colors.push(1.); 147 | _colors.push(i/100); 148 | } 149 | 150 | center.x /= 100; 151 | center.y /= 100; 152 | center.z /= 100; 153 | 154 | var pbuffer = gl.createBuffer(); 155 | var cbuffer = gl.createBuffer(); 156 | 157 | gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer); 158 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(_positions), gl.STATIC_DRAW); 159 | 160 | gl.bindBuffer(gl.ARRAY_BUFFER, cbuffer); 161 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(_colors), gl.STATIC_DRAW); 162 | 163 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 164 | 165 | var _program; 166 | initShader(); 167 | 168 | var _angle = 0; 169 | 170 | return { 171 | update : function (angle) { 172 | _angle = angle; 173 | }, 174 | draw : function () { 175 | webgl.pushModelView(); 176 | 177 | webgl.perspectiveMatrix({ 178 | fieldOfView : 45, 179 | aspectRatio : 1, 180 | nearPlane : .1, 181 | farPlane : 100 182 | }); 183 | mat4.identity(webgl.mvMatrix); 184 | mat4.translate(webgl.mvMatrix, [ 0, 0, -15 ]); 185 | mat4.rotate(webgl.mvMatrix, _angle, [ 0, 1, 0 ]); 186 | 187 | gl.useProgram(_program); 188 | 189 | var aPosition = gl.getAttribLocation(_program, "aPosition"); 190 | var aColor = gl.getAttribLocation(_program, "aColor"); 191 | var uPMatrix = gl.getUniformLocation(_program, "uPMatrix"); 192 | var uMVMatrix = gl.getUniformLocation(_program, "uMVMatrix"); 193 | 194 | gl.enableVertexAttribArray(aPosition); 195 | gl.enableVertexAttribArray(aColor); 196 | 197 | gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer); 198 | gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0); 199 | 200 | gl.bindBuffer(gl.ARRAY_BUFFER, cbuffer); 201 | gl.vertexAttribPointer(aColor, 4, gl.FLOAT, false, 0, 0); 202 | 203 | gl.uniformMatrix4fv(uPMatrix, false, webgl.pMatrix); 204 | gl.uniformMatrix4fv(uMVMatrix, false, webgl.mvMatrix); 205 | 206 | gl.drawArrays(gl.LINE_STRIP, 0, 10 * 10); 207 | 208 | webgl.popModelView(); 209 | } 210 | } 211 | 212 | function initShader() { 213 | var vCode = webgl.getShader("pass-vert"); 214 | var fCode = webgl.getShader("pass-frag"); 215 | var vShader = gl.createShader(gl.VERTEX_SHADER); 216 | var fShader = gl.createShader(gl.FRAGMENT_SHADER); 217 | gl.shaderSource(vShader, vCode); 218 | gl.shaderSource(fShader, fCode); 219 | gl.compileShader(vShader); 220 | gl.compileShader(fShader); 221 | _program = gl.createProgram(); 222 | gl.attachShader(_program, vShader); 223 | gl.attachShader(_program, fShader); 224 | gl.linkProgram(_program); 225 | } 226 | }); 227 | -------------------------------------------------------------------------------- /lessons/04/app.js: -------------------------------------------------------------------------------- 1 | var app = function (_canvasId) { 2 | var _canvas = document.getElementById(_canvasId); 3 | var _gl = _canvas.getContext("webgl"); 4 | 5 | var _pMatrix; 6 | var _mvMatrix; 7 | 8 | var _cubeVbo = { 9 | colors : [], 10 | positions : [], 11 | indices : [], 12 | cbuffer : _gl.createBuffer(), 13 | vbuffer : _gl.createBuffer(), 14 | ibuffer : _gl.createBuffer() 15 | }; 16 | 17 | var _passShaderProg = undefined; 18 | 19 | //// 20 | // Return actual object 21 | return { 22 | init : function () { 23 | // Setup 24 | setup(); 25 | 26 | // vertex buffer 27 | _cubeVbo.positions = new Float32Array([ 28 | -1.0, -1.0, 1.0, 29 | 1.0, -1.0, 1.0, 30 | 1.0, 1.0, 1.0, 31 | -1.0, 1.0, 1.0, 32 | -1.0, -1.0, -1.0, 33 | -1.0, 1.0, -1.0, 34 | 1.0, 1.0, -1.0, 35 | 1.0, -1.0, -1.0, 36 | -1.0, 1.0, -1.0, 37 | -1.0, 1.0, 1.0, 38 | 1.0, 1.0, 1.0, 39 | 1.0, 1.0, -1.0, 40 | -1.0, -1.0, -1.0, 41 | 1.0, -1.0, -1.0, 42 | 1.0, -1.0, 1.0, 43 | -1.0, -1.0, 1.0, 44 | 1.0, -1.0, -1.0, 45 | 1.0, 1.0, -1.0, 46 | 1.0, 1.0, 1.0, 47 | 1.0, -1.0, 1.0, 48 | -1.0, -1.0, -1.0, 49 | -1.0, -1.0, 1.0, 50 | -1.0, 1.0, 1.0, 51 | -1.0, 1.0, -1.0 52 | ]); 53 | _gl.bindBuffer(_gl.ARRAY_BUFFER, _cubeVbo.vbuffer); 54 | _gl.bufferData(_gl.ARRAY_BUFFER, _cubeVbo.positions, _gl.STATIC_DRAW); 55 | 56 | // color buffer 57 | _cubeVbo.colors = new Float32Array([ 58 | 0, 0, 0, 1, 59 | 0, 0, 0, 1, 60 | 0, 0, 0, 1, 61 | 0, 0, 0, 1, 62 | 0, 0, 0, 1, 63 | 0, 0, 0, 1, 64 | 0, 0, 0, 1, 65 | 0, 0, 0, 1, 66 | 0, 0, 0, 1, 67 | 0, 0, 0, 1, 68 | 0, 0, 0, 1, 69 | 0, 0, 0, 1, 70 | 1, 1, 1, 1, 71 | 1, 1, 1, 1, 72 | 1, 1, 1, 1, 73 | 1, 1, 1, 1, 74 | 1, 1, 1, 1, 75 | 1, 1, 1, 1, 76 | 1, 1, 1, 1, 77 | 1, 1, 1, 1, 78 | 1, 1, 1, 1, 79 | 1, 1, 1, 1, 80 | 1, 1, 1, 1, 81 | 1, 1, 1, 1 82 | ]); 83 | _gl.bindBuffer(_gl.ARRAY_BUFFER, _cubeVbo.cbuffer); 84 | _gl.bufferData(_gl.ARRAY_BUFFER, _cubeVbo.colors, _gl.STATIC_DRAW); 85 | 86 | // index buffer 87 | _cubeVbo.indices = new Uint16Array([ 88 | 0, 1, 2, 0, 2, 3, // Front face 89 | 4, 5, 6, 4, 6, 7, // Back face 90 | 8, 9, 10, 8, 10, 11, // Top face 91 | 12, 13, 14, 12, 14, 15, // Bottom face 92 | 16, 17, 18, 16, 18, 19, // Right face 93 | 20, 21, 22, 20, 22, 23 // Left face 94 | ]); 95 | _gl.bindBuffer(_gl.ELEMENT_ARRAY_BUFFER, _cubeVbo.ibuffer); 96 | _gl.bufferData(_gl.ELEMENT_ARRAY_BUFFER, _cubeVbo.indices, _gl.STATIC_DRAW); 97 | }, 98 | loop : loop, 99 | print : function () { 100 | console.log(_canvas); 101 | console.log(_gl); 102 | } 103 | }; 104 | 105 | /** 106 | * Begin looping animation 107 | * @return {undefined} undefined 108 | */ 109 | function loop () { 110 | requestAnimationFrame(loop); 111 | draw(); 112 | } 113 | 114 | /** 115 | * Setup Necessary Stuff 116 | * @return {undefined} undefined 117 | */ 118 | function setup() { 119 | // Setup viewport 120 | _gl.viewport(0, 0, _canvas.width, _canvas.height); 121 | // Shader 122 | var shader = { 123 | _code : { vert : webgl.getShader("pass-vert"), frag : webgl.getShader("pass-frag") }, 124 | vert : _gl.createShader(_gl.VERTEX_SHADER), 125 | frag : _gl.createShader(_gl.FRAGMENT_SHADER) 126 | }; 127 | // Compile vert shader 128 | _gl.shaderSource(shader.vert, shader._code.vert); 129 | _gl.compileShader(shader.vert); 130 | // Compile frag shader 131 | _gl.shaderSource(shader.frag, shader._code.frag); 132 | _gl.compileShader(shader.frag); 133 | // Attach shader 134 | _passShaderProg = _gl.createProgram(); 135 | _gl.attachShader(_passShaderProg, shader.vert); 136 | _gl.attachShader(_passShaderProg, shader.frag); 137 | _gl.linkProgram(_passShaderProg); 138 | // Clear settings 139 | _gl.clearColor(.25, .22, .2, 1); 140 | _gl.clearDepth(1.0); 141 | // Depth and blending 142 | _gl.enable(_gl.DEPTH_TEST); 143 | _gl.enable(_gl.BLEND); 144 | } 145 | 146 | /** 147 | * Update Before Drawing 148 | * @return {undefined} undefined 149 | */ 150 | function update() { 151 | } 152 | 153 | /** 154 | * Draw Frame 155 | * @return {undefined} undefined 156 | */ 157 | function draw() { 158 | _gl.viewport(0, 0, _canvas.width, _canvas.height); 159 | _gl.clear(_gl.COLOR_BUFFER_BIT | _gl.DEPTH_BUFFER_BIT); 160 | 161 | var t = getElapsedSeconds() / 1.5; 162 | 163 | 164 | _pMatrix = webgl.perspectiveMatrix(); 165 | 166 | _mvMatrix = [ 167 | Math.cos(t), 0, -Math.sin(t), 0, 168 | 0, 1, 0, 0, 169 | Math.sin(t), 0, Math.cos(t), 0, 170 | 0, 0, 9, 1 171 | ]; 172 | 173 | // Apply shader 174 | _gl.useProgram(_passShaderProg); 175 | 176 | // Vertex index 177 | var vertexPos = _gl.getAttribLocation(_passShaderProg, "vertexPosition"); 178 | _gl.enableVertexAttribArray(vertexPos); 179 | 180 | // Color index 181 | var vertexCol = _gl.getAttribLocation(_passShaderProg, "vertexColor"); 182 | _gl.enableVertexAttribArray(vertexCol); 183 | 184 | _gl.bindBuffer(_gl.ARRAY_BUFFER, _cubeVbo.vbuffer); 185 | _gl.vertexAttribPointer(vertexPos, 3.0, _gl.FLOAT, false, 0, 0); 186 | 187 | _gl.bindBuffer(_gl.ARRAY_BUFFER, _cubeVbo.cbuffer); 188 | _gl.vertexAttribPointer(vertexCol, 4.0, _gl.FLOAT, false, 0, 0); 189 | 190 | var uModelViewMatrix = _gl.getUniformLocation(_passShaderProg, "modelViewMatrix"); 191 | var uPerspectiveMatrix = _gl.getUniformLocation(_passShaderProg, "perspectiveMatrix"); 192 | 193 | if(!(uModelViewMatrix && uPerspectiveMatrix)) 194 | console.log("okay"); 195 | 196 | _gl.uniformMatrix4fv(uPerspectiveMatrix, false, new Float32Array(_pMatrix)); 197 | _gl.uniformMatrix4fv(uModelViewMatrix, false, new Float32Array(_mvMatrix)); 198 | 199 | _gl.bindBuffer(_gl.ELEMENT_ARRAY_BUFFER, _cubeVbo.ibuffer); 200 | _gl.drawElements(_gl.TRIANGLES, 36, _gl.UNSIGNED_SHORT, 0); 201 | } 202 | } 203 | -------------------------------------------------------------------------------- /generative-lines-demos-2013-10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | xx : plane of spikes 5 | 6 | 7 | 8 | 9 | 20 | 27 | 55 | 56 | 67 | 68 | 69 | 170 | 186 | 187 | 188 | 189 |
WebGL is unsupported.
190 |
191 | 192 | 193 | --------------------------------------------------------------------------------