├── .gitignore └── labs ├── 01 ├── dist │ ├── bundle │ │ ├── bundle.js │ │ └── gl-matrix-2.2.2-min.js │ ├── css │ │ └── main.css │ └── index.html ├── gulpfile.js ├── package.json └── src │ ├── js │ ├── SceneApp.js │ ├── ViewSphere.js │ ├── app.js │ └── libs │ │ ├── bongiovi-post.js │ │ ├── bongiovi-post.min.js │ │ ├── bongiovi.js │ │ └── bongiovi.min.js │ ├── scss │ ├── _global.scss │ ├── common │ │ └── _fonts.scss │ ├── main.scss │ └── utils │ │ ├── _importMixins.scss │ │ └── _mixins.scss │ └── shaders │ ├── post.frag │ ├── sphere.frag │ └── sphere.vert ├── lv ├── .README ├── dev │ ├── css │ │ ├── config.css │ │ ├── config.css.map │ │ ├── main.css │ │ └── main.css.map │ ├── index.html │ └── js │ │ ├── bundle.js │ │ └── vendor.js ├── gulpfile.js ├── package.json └── src │ ├── css │ ├── config.css │ └── main.css │ ├── index.html │ └── js │ ├── app │ ├── MathUtils.js │ └── main.js │ └── libs │ ├── console-polyfill.js │ ├── es5-sham.min.js │ └── es5-shim.min.js └── wen ├── 02 ├── Readme.md ├── dist │ ├── bundle │ │ ├── bundle.js │ │ └── gl-matrix-2.2.2-min.js │ ├── css │ │ └── main.css │ └── index.html ├── gulpfile.js ├── package.json └── src │ ├── js │ ├── SceneApp.js │ ├── ViewIcoSphere.js │ ├── app.js │ └── libs │ │ ├── bongiovi-post.js │ │ ├── bongiovi-post.min.js │ │ ├── bongiovi.js │ │ └── bongiovi.min.js │ ├── scss │ ├── _global.scss │ ├── common │ │ └── _fonts.scss │ ├── main.scss │ └── utils │ │ ├── _importMixins.scss │ │ └── _mixins.scss │ └── shaders │ ├── post.frag │ ├── sphere.frag │ └── sphere.vert ├── 03 ├── dist │ ├── assets │ │ └── gradient.jpg │ ├── bundle │ │ ├── bundle.js │ │ └── gl-matrix-2.2.2-min.js │ ├── css │ │ └── main.css │ └── index.html ├── gulpfile.js ├── package.json └── src │ ├── js │ ├── SceneApp.js │ ├── ViewNoise.js │ ├── app.js │ └── libs │ │ ├── bongiovi-post.js │ │ ├── bongiovi-post.min.js │ │ ├── bongiovi.js │ │ └── bongiovi.min.js │ ├── scss │ ├── _global.scss │ ├── common │ │ └── _fonts.scss │ ├── main.scss │ └── utils │ │ ├── _importMixins.scss │ │ └── _mixins.scss │ └── shaders │ └── post.frag ├── 04 ├── dist │ ├── assets │ │ └── gradient.jpg │ ├── bundle │ │ ├── bundle.js │ │ └── gl-matrix-2.2.2-min.js │ ├── css │ │ └── main.css │ └── index.html ├── gulpfile.js ├── package.json └── src │ ├── js │ ├── Particle.js │ ├── SceneApp.js │ ├── ViewDot.js │ ├── ViewSphere.js │ ├── app.js │ └── libs │ │ ├── bongiovi-post.js │ │ ├── bongiovi-post.min.js │ │ ├── bongiovi.js │ │ └── bongiovi.min.js │ ├── scss │ ├── _global.scss │ ├── common │ │ └── _fonts.scss │ ├── main.scss │ └── utils │ │ ├── _importMixins.scss │ │ └── _mixins.scss │ └── shaders │ ├── post.frag │ ├── sphere.frag │ └── sphere.vert └── 05 ├── dist ├── bundle │ ├── bundle.js │ └── gl-matrix-2.2.2-min.js ├── css │ └── main.css └── index.html ├── gulpfile.js ├── package.json └── src ├── js ├── SceneApp.js ├── ViewBelt.js ├── ViewNoise.js ├── ViewNormal.js ├── ViewPlane.js ├── app.js └── libs │ ├── bongiovi-post.js │ ├── bongiovi-post.min.js │ ├── bongiovi.js │ └── bongiovi.min.js ├── scss ├── _global.scss ├── common │ └── _fonts.scss ├── main.scss └── utils │ ├── _importMixins.scss │ └── _mixins.scss └── shaders ├── belt.frag ├── belt.vert ├── noise.frag ├── normal.frag ├── plane.frag ├── plane.vert └── post.frag /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | npm-debug.log 4 | .sass-cache 5 | -------------------------------------------------------------------------------- /labs/01/dist/bundle/gl-matrix-2.2.2-min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview gl-matrix - High performance matrix and vector operations 3 | * @author Brandon Jones 4 | * @author Colin MacKenzie IV 5 | * @version 2.2.1 6 | */ 7 | /* Copyright (c) 2013, Brandon Jones, Colin MacKenzie IV. All rights reserved. 8 | 9 | Redistribution and use in source and binary forms, with or without modification, 10 | are permitted provided that the following conditions are met: 11 | 12 | * Redistributions of source code must retain the above copyright notice, this 13 | list of conditions and the following disclaimer. 14 | * Redistributions in binary form must reproduce the above copyright notice, 15 | this list of conditions and the following disclaimer in the documentation 16 | and/or other materials provided with the distribution. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ 28 | (function(e){"use strict";var t={};typeof exports=="undefined"?typeof define=="function"&&typeof define.amd=="object"&&define.amd?(t.exports={},define(function(){return t.exports})):t.exports=typeof window!="undefined"?window:e:t.exports=exports,function(e){if(!t)var t=1e-6;if(!n)var n=typeof Float32Array!="undefined"?Float32Array:Array;if(!r)var r=Math.random;var i={};i.setMatrixArrayType=function(e){n=e},typeof e!="undefined"&&(e.glMatrix=i);var s=Math.PI/180;i.toRadian=function(e){return e*s};var o={};o.create=function(){var e=new n(2);return e[0]=0,e[1]=0,e},o.clone=function(e){var t=new n(2);return t[0]=e[0],t[1]=e[1],t},o.fromValues=function(e,t){var r=new n(2);return r[0]=e,r[1]=t,r},o.copy=function(e,t){return e[0]=t[0],e[1]=t[1],e},o.set=function(e,t,n){return e[0]=t,e[1]=n,e},o.add=function(e,t,n){return e[0]=t[0]+n[0],e[1]=t[1]+n[1],e},o.subtract=function(e,t,n){return e[0]=t[0]-n[0],e[1]=t[1]-n[1],e},o.sub=o.subtract,o.multiply=function(e,t,n){return e[0]=t[0]*n[0],e[1]=t[1]*n[1],e},o.mul=o.multiply,o.divide=function(e,t,n){return e[0]=t[0]/n[0],e[1]=t[1]/n[1],e},o.div=o.divide,o.min=function(e,t,n){return e[0]=Math.min(t[0],n[0]),e[1]=Math.min(t[1],n[1]),e},o.max=function(e,t,n){return e[0]=Math.max(t[0],n[0]),e[1]=Math.max(t[1],n[1]),e},o.scale=function(e,t,n){return e[0]=t[0]*n,e[1]=t[1]*n,e},o.scaleAndAdd=function(e,t,n,r){return e[0]=t[0]+n[0]*r,e[1]=t[1]+n[1]*r,e},o.distance=function(e,t){var n=t[0]-e[0],r=t[1]-e[1];return Math.sqrt(n*n+r*r)},o.dist=o.distance,o.squaredDistance=function(e,t){var n=t[0]-e[0],r=t[1]-e[1];return n*n+r*r},o.sqrDist=o.squaredDistance,o.length=function(e){var t=e[0],n=e[1];return Math.sqrt(t*t+n*n)},o.len=o.length,o.squaredLength=function(e){var t=e[0],n=e[1];return t*t+n*n},o.sqrLen=o.squaredLength,o.negate=function(e,t){return e[0]=-t[0],e[1]=-t[1],e},o.normalize=function(e,t){var n=t[0],r=t[1],i=n*n+r*r;return i>0&&(i=1/Math.sqrt(i),e[0]=t[0]*i,e[1]=t[1]*i),e},o.dot=function(e,t){return e[0]*t[0]+e[1]*t[1]},o.cross=function(e,t,n){var r=t[0]*n[1]-t[1]*n[0];return e[0]=e[1]=0,e[2]=r,e},o.lerp=function(e,t,n,r){var i=t[0],s=t[1];return e[0]=i+r*(n[0]-i),e[1]=s+r*(n[1]-s),e},o.random=function(e,t){t=t||1;var n=r()*2*Math.PI;return e[0]=Math.cos(n)*t,e[1]=Math.sin(n)*t,e},o.transformMat2=function(e,t,n){var r=t[0],i=t[1];return e[0]=n[0]*r+n[2]*i,e[1]=n[1]*r+n[3]*i,e},o.transformMat2d=function(e,t,n){var r=t[0],i=t[1];return e[0]=n[0]*r+n[2]*i+n[4],e[1]=n[1]*r+n[3]*i+n[5],e},o.transformMat3=function(e,t,n){var r=t[0],i=t[1];return e[0]=n[0]*r+n[3]*i+n[6],e[1]=n[1]*r+n[4]*i+n[7],e},o.transformMat4=function(e,t,n){var r=t[0],i=t[1];return e[0]=n[0]*r+n[4]*i+n[12],e[1]=n[1]*r+n[5]*i+n[13],e},o.forEach=function(){var e=o.create();return function(t,n,r,i,s,o){var u,a;n||(n=2),r||(r=0),i?a=Math.min(i*n+r,t.length):a=t.length;for(u=r;u0&&(s=1/Math.sqrt(s),e[0]=t[0]*s,e[1]=t[1]*s,e[2]=t[2]*s),e},u.dot=function(e,t){return e[0]*t[0]+e[1]*t[1]+e[2]*t[2]},u.cross=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=n[0],u=n[1],a=n[2];return e[0]=i*a-s*u,e[1]=s*o-r*a,e[2]=r*u-i*o,e},u.lerp=function(e,t,n,r){var i=t[0],s=t[1],o=t[2];return e[0]=i+r*(n[0]-i),e[1]=s+r*(n[1]-s),e[2]=o+r*(n[2]-o),e},u.random=function(e,t){t=t||1;var n=r()*2*Math.PI,i=r()*2-1,s=Math.sqrt(1-i*i)*t;return e[0]=Math.cos(n)*s,e[1]=Math.sin(n)*s,e[2]=i*t,e},u.transformMat4=function(e,t,n){var r=t[0],i=t[1],s=t[2];return e[0]=n[0]*r+n[4]*i+n[8]*s+n[12],e[1]=n[1]*r+n[5]*i+n[9]*s+n[13],e[2]=n[2]*r+n[6]*i+n[10]*s+n[14],e},u.transformMat3=function(e,t,n){var r=t[0],i=t[1],s=t[2];return e[0]=r*n[0]+i*n[3]+s*n[6],e[1]=r*n[1]+i*n[4]+s*n[7],e[2]=r*n[2]+i*n[5]+s*n[8],e},u.transformQuat=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=n[0],u=n[1],a=n[2],f=n[3],l=f*r+u*s-a*i,c=f*i+a*r-o*s,h=f*s+o*i-u*r,p=-o*r-u*i-a*s;return e[0]=l*f+p*-o+c*-a-h*-u,e[1]=c*f+p*-u+h*-o-l*-a,e[2]=h*f+p*-a+l*-u-c*-o,e},u.rotateX=function(e,t,n,r){var i=[],s=[];return i[0]=t[0]-n[0],i[1]=t[1]-n[1],i[2]=t[2]-n[2],s[0]=i[0],s[1]=i[1]*Math.cos(r)-i[2]*Math.sin(r),s[2]=i[1]*Math.sin(r)+i[2]*Math.cos(r),e[0]=s[0]+n[0],e[1]=s[1]+n[1],e[2]=s[2]+n[2],e},u.rotateY=function(e,t,n,r){var i=[],s=[];return i[0]=t[0]-n[0],i[1]=t[1]-n[1],i[2]=t[2]-n[2],s[0]=i[2]*Math.sin(r)+i[0]*Math.cos(r),s[1]=i[1],s[2]=i[2]*Math.cos(r)-i[0]*Math.sin(r),e[0]=s[0]+n[0],e[1]=s[1]+n[1],e[2]=s[2]+n[2],e},u.rotateZ=function(e,t,n,r){var i=[],s=[];return i[0]=t[0]-n[0],i[1]=t[1]-n[1],i[2]=t[2]-n[2],s[0]=i[0]*Math.cos(r)-i[1]*Math.sin(r),s[1]=i[0]*Math.sin(r)+i[1]*Math.cos(r),s[2]=i[2],e[0]=s[0]+n[0],e[1]=s[1]+n[1],e[2]=s[2]+n[2],e},u.forEach=function(){var e=u.create();return function(t,n,r,i,s,o){var u,a;n||(n=3),r||(r=0),i?a=Math.min(i*n+r,t.length):a=t.length;for(u=r;u0&&(o=1/Math.sqrt(o),e[0]=t[0]*o,e[1]=t[1]*o,e[2]=t[2]*o,e[3]=t[3]*o),e},a.dot=function(e,t){return e[0]*t[0]+e[1]*t[1]+e[2]*t[2]+e[3]*t[3]},a.lerp=function(e,t,n,r){var i=t[0],s=t[1],o=t[2],u=t[3];return e[0]=i+r*(n[0]-i),e[1]=s+r*(n[1]-s),e[2]=o+r*(n[2]-o),e[3]=u+r*(n[3]-u),e},a.random=function(e,t){return t=t||1,e[0]=r(),e[1]=r(),e[2]=r(),e[3]=r(),a.normalize(e,e),a.scale(e,e,t),e},a.transformMat4=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=t[3];return e[0]=n[0]*r+n[4]*i+n[8]*s+n[12]*o,e[1]=n[1]*r+n[5]*i+n[9]*s+n[13]*o,e[2]=n[2]*r+n[6]*i+n[10]*s+n[14]*o,e[3]=n[3]*r+n[7]*i+n[11]*s+n[15]*o,e},a.transformQuat=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=n[0],u=n[1],a=n[2],f=n[3],l=f*r+u*s-a*i,c=f*i+a*r-o*s,h=f*s+o*i-u*r,p=-o*r-u*i-a*s;return e[0]=l*f+p*-o+c*-a-h*-u,e[1]=c*f+p*-u+h*-o-l*-a,e[2]=h*f+p*-a+l*-u-c*-o,e},a.forEach=function(){var e=a.create();return function(t,n,r,i,s,o){var u,a;n||(n=4),r||(r=0),i?a=Math.min(i*n+r,t.length):a=t.length;for(u=r;u.999999?(r[0]=0,r[1]=0,r[2]=0,r[3]=1,r):(u.cross(e,i,s),r[0]=e[0],r[1]=e[1],r[2]=e[2],r[3]=1+o,p.normalize(r,r))}}(),p.setAxes=function(){var e=c.create();return function(t,n,r,i){return e[0]=r[0],e[3]=r[1],e[6]=r[2],e[1]=i[0],e[4]=i[1],e[7]=i[2],e[2]=-n[0],e[5]=-n[1],e[8]=-n[2],p.normalize(t,p.fromMat3(t,e))}}(),p.clone=a.clone,p.fromValues=a.fromValues,p.copy=a.copy,p.set=a.set,p.identity=function(e){return e[0]=0,e[1]=0,e[2]=0,e[3]=1,e},p.setAxisAngle=function(e,t,n){n*=.5;var r=Math.sin(n);return e[0]=r*t[0],e[1]=r*t[1],e[2]=r*t[2],e[3]=Math.cos(n),e},p.add=a.add,p.multiply=function(e,t,n){var r=t[0],i=t[1],s=t[2],o=t[3],u=n[0],a=n[1],f=n[2],l=n[3];return e[0]=r*l+o*u+i*f-s*a,e[1]=i*l+o*a+s*u-r*f,e[2]=s*l+o*f+r*a-i*u,e[3]=o*l-r*u-i*a-s*f,e},p.mul=p.multiply,p.scale=a.scale,p.rotateX=function(e,t,n){n*=.5;var r=t[0],i=t[1],s=t[2],o=t[3],u=Math.sin(n),a=Math.cos(n);return e[0]=r*a+o*u,e[1]=i*a+s*u,e[2]=s*a-i*u,e[3]=o*a-r*u,e},p.rotateY=function(e,t,n){n*=.5;var r=t[0],i=t[1],s=t[2],o=t[3],u=Math.sin(n),a=Math.cos(n);return e[0]=r*a-s*u,e[1]=i*a+o*u,e[2]=s*a+r*u,e[3]=o*a-i*u,e},p.rotateZ=function(e,t,n){n*=.5;var r=t[0],i=t[1],s=t[2],o=t[3],u=Math.sin(n),a=Math.cos(n);return e[0]=r*a+i*u,e[1]=i*a-r*u,e[2]=s*a+o*u,e[3]=o*a-s*u,e},p.calculateW=function(e,t){var n=t[0],r=t[1],i=t[2];return e[0]=n,e[1]=r,e[2]=i,e[3]=-Math.sqrt(Math.abs(1-n*n-r*r-i*i)),e},p.dot=a.dot,p.lerp=a.lerp,p.slerp=function(e,t,n,r){var i=t[0],s=t[1],o=t[2],u=t[3],a=n[0],f=n[1],l=n[2],c=n[3],h,p,d,v,m;return p=i*a+s*f+o*l+u*c,p<0&&(p=-p,a=-a,f=-f,l=-l,c=-c),1-p>1e-6?(h=Math.acos(p),d=Math.sin(h),v=Math.sin((1-r)*h)/d,m=Math.sin(r*h)/d):(v=1-r,m=r),e[0]=v*i+m*a,e[1]=v*s+m*f,e[2]=v*o+m*l,e[3]=v*u+m*c,e},p.invert=function(e,t){var n=t[0],r=t[1],i=t[2],s=t[3],o=n*n+r*r+i*i+s*s,u=o?1/o:0;return e[0]=-n*u,e[1]=-r*u,e[2]=-i*u,e[3]=s*u,e},p.conjugate=function(e,t){return e[0]=-t[0],e[1]=-t[1],e[2]=-t[2],e[3]=t[3],e},p.length=a.length,p.len=p.length,p.squaredLength=a.squaredLength,p.sqrLen=p.squaredLength,p.normalize=a.normalize,p.fromMat3=function(e,t){var n=t[0]+t[4]+t[8],r;if(n>0)r=Math.sqrt(n+1),e[3]=.5*r,r=.5/r,e[0]=(t[7]-t[5])*r,e[1]=(t[2]-t[6])*r,e[2]=(t[3]-t[1])*r;else{var i=0;t[4]>t[0]&&(i=1),t[8]>t[i*3+i]&&(i=2);var s=(i+1)%3,o=(i+2)%3;r=Math.sqrt(t[i*3+i]-t[s*3+s]-t[o*3+o]+1),e[i]=.5*r,r=.5/r,e[3]=(t[o*3+s]-t[s*3+o])*r,e[s]=(t[s*3+i]+t[i*3+s])*r,e[o]=(t[o*3+i]+t[i*3+o])*r}return e},p.str=function(e){return"quat("+e[0]+", "+e[1]+", "+e[2]+", "+e[3]+")"},typeof e!="undefined"&&(e.quat=p)}(t.exports)})(this); 29 | -------------------------------------------------------------------------------- /labs/01/dist/css/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | width: 100%; 3 | height: 100%; 4 | margin: 0; 5 | padding: 0; 6 | overflow: hidden; 7 | position: static; 8 | background: #222222; } 9 | 10 | html { 11 | -webkit-text-size-adjust: none; 12 | -ms-text-size-adjust: none; 13 | text-size-adjust: none; } 14 | 15 | h1, h2, h3, h4, text, p { 16 | -webkit-font-smoothing: antialiased; 17 | -moz-osx-webkit-font-smoothing: antialiased; } 18 | 19 | .Main-Canvas { 20 | width: 100%; 21 | height: 100%; 22 | top: 0px; 23 | left: 0px; 24 | position: absolute; } 25 | -------------------------------------------------------------------------------- /labs/01/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Gulp - Template 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /labs/01/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var browserSync = require('browser-sync').create(); 5 | var browserify = require('browserify'); 6 | var source = require('vinyl-source-stream2') 7 | var uglify = require('gulp-uglify'); 8 | var sass = require('gulp-ruby-sass'); 9 | var prefix = require('gulp-autoprefixer'); 10 | var watchify = require('watchify'); 11 | var buffer = require('vinyl-buffer'); 12 | var reload = browserSync.reload; 13 | 14 | 15 | var bundler = watchify(browserify('./src/js/app.js', watchify.args)); 16 | gulp.task('browserify', bundle); 17 | 18 | bundler.on('update', bundle); 19 | 20 | function logError(msg) { 21 | console.log( msg.toString() ); 22 | } 23 | 24 | function bundle() { 25 | var b = bundler.bundle() 26 | .on('error', logError) 27 | .pipe(source('bundle.js')) 28 | .pipe(buffer()) 29 | .pipe(gulp.dest('./dist/bundle/')) 30 | .pipe(reload({stream: true, once: true})); 31 | 32 | return b; 33 | } 34 | 35 | gulp.task('watch', function() { 36 | gulp.watch('./src/scss/*.scss', ['sass']); 37 | }); 38 | 39 | 40 | gulp.task('sass', function() { 41 | return sass('./src/scss/main.scss') 42 | .on('error', function (err) { 43 | console.error('Error!', err.message); 44 | }) 45 | .pipe(prefix({ 46 | browsers: ['last 2 versions'], 47 | cascade: false 48 | })) 49 | .pipe(gulp.dest('./dist/css')) 50 | .pipe(reload({stream:true})); 51 | }); 52 | 53 | gulp.task('browser-sync', function() { 54 | browserSync.init({ 55 | browser: 'google chrome', 56 | server: { 57 | baseDir: './dist/' 58 | }, 59 | files: [ 60 | './dist/js/bundle.js', 61 | './dist/css/main.css', 62 | './dist/index.html' 63 | ], 64 | // open: false, 65 | // port: '8000', 66 | reloadDebounce: 500 67 | }); 68 | }); 69 | 70 | gulp.task('default', ['browserify', 'sass', 'browser-sync', 'watch']); 71 | -------------------------------------------------------------------------------- /labs/01/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "GulpTemplate", 3 | "version": "0.0.0", 4 | "author": "Yi-Wen Lin", 5 | "devDependencies": { 6 | "browser-sync": "^2.6.5", 7 | "browserify": "^10.2.0", 8 | "vinyl-source-stream2": "0.1.1", 9 | "gulp-uglify": "1.1.0", 10 | "gulp-ruby-sass": "1.0.0-alpha.3", 11 | "gulp-autoprefixer": "2.1.0", 12 | "glslify": "2.1.2", 13 | "vinyl-buffer": "^1.0.0", 14 | "watchify": "^3.2.0", 15 | "dat-gui": "0.5.0", 16 | "gulp": "3.8.11" 17 | }, 18 | "scripts": { 19 | "build": "gulp", 20 | "compile": "gulp compile", 21 | "watch": "gulp watch" 22 | }, 23 | "browserify": { 24 | "transform": [ 25 | "glslify" 26 | ] 27 | } 28 | } -------------------------------------------------------------------------------- /labs/01/src/js/SceneApp.js: -------------------------------------------------------------------------------- 1 | // SceneApp.js 2 | 3 | var GL = bongiovi.GL, gl; 4 | var glm = bongiovi.glm; 5 | var ViewSphere = require("./ViewSphere"); 6 | 7 | function SceneApp() { 8 | gl = GL.gl; 9 | bongiovi.Scene.call(this); 10 | GL.enableAdditiveBlending(); 11 | gl.disable(gl.DEPTH_TEST); 12 | gl.disable(gl.CULL_FACE); 13 | this.invert = glm.mat4.create(); 14 | 15 | this.camera._rx.value = this.camera._ry.value = -.25; 16 | 17 | window.addEventListener("resize", this.resize.bind(this)); 18 | } 19 | 20 | 21 | var p = SceneApp.prototype = new bongiovi.Scene(); 22 | 23 | p._initTextures = function() { 24 | console.log('Init Textures'); 25 | }; 26 | 27 | p._initViews = function() { 28 | console.log('Init Views'); 29 | this._vAxis = new bongiovi.ViewAxis(); 30 | this._vDotPlane = new bongiovi.ViewDotPlane(); 31 | 32 | this._vSphere = new ViewSphere(128); 33 | }; 34 | 35 | p.render = function() { 36 | GL.clear(0, 0, 0, 0); 37 | // this._vAxis.render(); 38 | this._vDotPlane.render(); 39 | 40 | 41 | glm.mat4.invert(this.invert, this.sceneRotation.matrix); 42 | 43 | this._vSphere.render(this.invert); 44 | }; 45 | 46 | p.resize = function() { 47 | GL.setSize(window.innerWidth, window.innerHeight); 48 | this.camera.resize(GL.aspectRatio); 49 | }; 50 | 51 | module.exports = SceneApp; -------------------------------------------------------------------------------- /labs/01/src/js/ViewSphere.js: -------------------------------------------------------------------------------- 1 | // ViewSphere.js 2 | 3 | var GL = bongiovi.GL; 4 | var gl; 5 | var glslify = require("glslify"); 6 | 7 | function ViewSphere(numSeg) { 8 | this._numSeg = numSeg === undefined ? 40 : numSeg; 9 | this.time = Math.random() * 0xFFF; 10 | this.depthOffset = 0; 11 | bongiovi.View.call(this, glslify("../shaders/sphere.vert"), glslify("../shaders/sphere.frag")); 12 | } 13 | 14 | var p = ViewSphere.prototype = new bongiovi.View(); 15 | p.constructor = ViewSphere; 16 | 17 | 18 | p._init = function() { 19 | gl = GL.gl; 20 | var positions = []; 21 | var coords = []; 22 | var indices = []; 23 | var count = 0; 24 | var num = this._numSeg; 25 | 26 | for(var j=0; j 0 { 32 | padding: $pad; 33 | } 34 | @media (#{-webkit-min-device-pixel-ratio}: #{1.6}), (#{min--moz-device-pixel-ratio}: #{1.6}), (#{-o-min-device-pixel-ratio}: #{3 / 2}), (#{min-device-pixel-ratio}: #{1.6}) { 35 | & { 36 | $pos: sprite-position($sprites2x, $name, -$pad * 2, -$pad * 2); 37 | background-image: sprite-url($sprites2x); 38 | background-position: nth($pos, 1) nth($pos, 2) / 2; 39 | @include background-size(ceil(image-width(sprite-path($sprites2x)) / 2), auto); 40 | // ^-- this is the "smarter" way to do this. 41 | // sprite-path() returns the path of the generated sprite sheet, which 42 | // image-width() calculates the width of. the ceil() is in place in case 43 | // you have sprites that have an odd-number of pixels in width (which 44 | // you shouldn't in the first place) 45 | 46 | } 47 | } 48 | } 49 | 50 | @mixin sprite-centered($name){ 51 | margin-top: (image-height(sprite-file($sprites, $name))/-2); 52 | margin-left: (image-width(sprite-file($sprites, $name))/-2); 53 | position: absolute; 54 | top: 50%; 55 | left: 50%; 56 | @media (#{-webkit-min-device-pixel-ratio}: #{1.6}), (#{min--moz-device-pixel-ratio}: #{1.6}), (#{-o-min-device-pixel-ratio}: #{3 / 2}), (#{min-device-pixel-ratio}: #{1.6}) { 57 | & { 58 | margin-top: (image-height(sprite-file($sprites2x, $name))/-2); 59 | margin-left: (image-height(sprite-file($sprites2x, $name))/-2); 60 | position: absolute; 61 | top: 50%; 62 | left: 50%; 63 | } 64 | } 65 | } 66 | 67 | @mixin absPositionMaximumSize{ 68 | position: absolute; 69 | top:0px; 70 | left:0px; 71 | width:100%; 72 | height:100%; 73 | } 74 | 75 | @mixin absCenteredVertical($height){ 76 | position: absolute; 77 | top:50%; 78 | margin-top:($height / -2); 79 | height:$height; 80 | } 81 | 82 | @mixin absCenteredHorizontal($width){ 83 | position: absolute; 84 | left:50%; 85 | margin-left:($width / -2); 86 | width:$width; 87 | } 88 | 89 | @mixin absCentered($height, $width){ 90 | position: absolute; 91 | top:50%; 92 | left:50%; 93 | margin-left:($width / -2); 94 | margin-top:($height / -2); 95 | width:$width; 96 | height:$height; 97 | } 98 | 99 | @mixin clear-floats{ 100 | content: "."; 101 | visibility: hidden; 102 | display: block; 103 | height: 0; 104 | clear: both; 105 | } 106 | 107 | /* 108 | * Clearfix: contain floats 109 | * 110 | * For modern browsers 111 | * 1. The space content is one way to avoid an Opera bug when the 112 | * `contenteditable` attribute is included anywhere else in the document. 113 | * Otherwise it causes space to appear at the top and bottom of elements 114 | * that receive the `clearfix` class. 115 | * 2. The use of `table` rather than `block` is only necessary if using 116 | * `:before` to contain the top-margins of child elements. 117 | */ 118 | 119 | @mixin clearfix{ 120 | 121 | &:before, 122 | &:after { 123 | content: " "; /* 1 */ 124 | display: table; /* 2 */ 125 | } 126 | 127 | &:after { 128 | clear: both; 129 | } 130 | 131 | /* 132 | * For IE 6/7 only 133 | * Include this rule to trigger hasLayout and contain floats. 134 | */ 135 | *zoom: 1; 136 | } 137 | %clearfix { @include clearfix(); } 138 | 139 | @mixin breakpoint($point){ 140 | @if $point == mobile { 141 | @media (max-width: $mobile) {@content;} 142 | } 143 | 144 | @if $point == tablet { 145 | @media (max-width: $tablet) {@content;} 146 | } 147 | } 148 | 149 | 150 | @mixin scrollbar($bg-color, $scrollbar-width, $thumb-color){ 151 | 152 | &::-webkit-scrollbar-track{ 153 | background-color: $bg-color; 154 | } 155 | &::-webkit-scrollbar{ 156 | width: $scrollbar-width; 157 | background-color: $bg-color; 158 | } 159 | &::-webkit-scrollbar-thumb{ 160 | background-color: $thumb-color; 161 | } 162 | &::-moz-scrollbar-track{ 163 | background-color: $bg-color; 164 | } 165 | &::-moz-scrollbar{ 166 | width: $scrollbar-width; 167 | background-color: $bg-color; 168 | } 169 | &::-moz-scrollbar-thumb{ 170 | background-color: $thumb-color; 171 | } 172 | 173 | } 174 | -------------------------------------------------------------------------------- /labs/01/src/shaders/post.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | void main(void) { 4 | gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); 5 | } -------------------------------------------------------------------------------- /labs/01/src/shaders/sphere.frag: -------------------------------------------------------------------------------- 1 | // sphere.frag 2 | 3 | #define SHADER_NAME SIMPLE_TEXTURE 4 | 5 | precision highp float; 6 | varying vec2 vTextureCoord; 7 | varying vec4 vColor; 8 | varying vec3 vNormal; 9 | varying vec3 vVertex; 10 | varying float vRadius; 11 | uniform float zGap; 12 | uniform float depthOffset; 13 | 14 | const float PI = 3.141592657; 15 | 16 | const vec3 lightPos = vec3(-1.0, 2.0, 1.5); 17 | 18 | const vec4 color = vec4(186.0, 209.0, 222.0, 255.0)/255.0; 19 | 20 | 21 | float cubicIn(float t) { 22 | return t * t * t; 23 | } 24 | 25 | float exponentialIn(float t) { 26 | return t == 0.0 ? t : pow(2.0, 10.0 * (t - 1.0)); 27 | } 28 | 29 | float map(float value, float sx, float sy, float tx, float ty) { 30 | float p = (value - sx) / (sy - sx); 31 | return tx + p * (ty - tx); 32 | } 33 | 34 | void main(void) { 35 | float z = mod(vVertex.z+depthOffset, zGap)/zGap; 36 | // float grey = max(sin(z * PI * 2.0), 0.0); 37 | // float grey = max(cubicIn(sin(z * PI * 2.0)), 0.0); 38 | // float grey = exponentialIn(1.0-sin(z * PI)); 39 | // float grey = cubicIn(1.0-sin(z * PI)); 40 | float grey = cubicIn(1.0-sin(z * PI)); 41 | 42 | vec3 N = vNormal; 43 | vec3 L = normalize(lightPos); 44 | float lambert = max(dot(N, L), .0); 45 | 46 | grey += cubicIn(lambert)*.6; 47 | 48 | float d = map(vVertex.z, -vRadius, vRadius, 0.0, 1.0); 49 | d = exponentialIn(d); 50 | grey *= mix(d, 1.0, .1); 51 | 52 | gl_FragColor = vec4(grey)*color; 53 | } -------------------------------------------------------------------------------- /labs/01/src/shaders/sphere.vert: -------------------------------------------------------------------------------- 1 | // sphere.vert 2 | 3 | #define SHADER_NAME BASIC_VERTEX 4 | 5 | precision highp float; 6 | attribute vec3 aVertexPosition; 7 | attribute vec2 aTextureCoord; 8 | 9 | uniform mat4 uMVMatrix; 10 | uniform mat4 uPMatrix; 11 | uniform float radius; 12 | uniform float numSeg; 13 | uniform float time; 14 | uniform float noise; 15 | uniform float noiseScale; 16 | uniform mat4 normalMatrix; 17 | 18 | varying vec2 vTextureCoord; 19 | varying vec4 vColor; 20 | varying vec3 vNormal; 21 | varying vec3 vVertex; 22 | varying float vRadius; 23 | 24 | 25 | const float PI = 3.141592657; 26 | 27 | 28 | vec4 permute(vec4 x) { return mod(((x*34.00)+1.00)*x, 289.00); } 29 | vec4 taylorInvSqrt(vec4 r) { return 1.79 - 0.85 * r; } 30 | 31 | float snoise(vec3 v){ 32 | const vec2 C = vec2(1.00/6.00, 1.00/3.00) ; 33 | const vec4 D = vec4(0.00, 0.50, 1.00, 2.00); 34 | 35 | vec3 i = floor(v + dot(v, C.yyy) ); 36 | vec3 x0 = v - i + dot(i, C.xxx) ; 37 | 38 | vec3 g = step(x0.yzx, x0.xyz); 39 | vec3 l = 1.00 - g; 40 | vec3 i1 = min( g.xyz, l.zxy ); 41 | vec3 i2 = max( g.xyz, l.zxy ); 42 | 43 | vec3 x1 = x0 - i1 + 1.00 * C.xxx; 44 | vec3 x2 = x0 - i2 + 2.00 * C.xxx; 45 | vec3 x3 = x0 - 1. + 3.00 * C.xxx; 46 | 47 | i = mod(i, 289.00 ); 48 | vec4 p = permute( permute( permute( i.z + vec4(0.00, i1.z, i2.z, 1.00 )) + i.y + vec4(0.00, i1.y, i2.y, 1.00 )) + i.x + vec4(0.00, i1.x, i2.x, 1.00 )); 49 | 50 | float n_ = 1.00/7.00; 51 | vec3 ns = n_ * D.wyz - D.xzx; 52 | 53 | vec4 j = p - 49.00 * floor(p * ns.z *ns.z); 54 | 55 | vec4 x_ = floor(j * ns.z); 56 | vec4 y_ = floor(j - 7.00 * x_ ); 57 | 58 | vec4 x = x_ *ns.x + ns.yyyy; 59 | vec4 y = y_ *ns.x + ns.yyyy; 60 | vec4 h = 1.00 - abs(x) - abs(y); 61 | 62 | vec4 b0 = vec4( x.xy, y.xy ); 63 | vec4 b1 = vec4( x.zw, y.zw ); 64 | 65 | vec4 s0 = floor(b0)*2.00 + 1.00; 66 | vec4 s1 = floor(b1)*2.00 + 1.00; 67 | vec4 sh = -step(h, vec4(0.00)); 68 | 69 | vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ; 70 | vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ; 71 | 72 | vec3 p0 = vec3(a0.xy,h.x); 73 | vec3 p1 = vec3(a0.zw,h.y); 74 | vec3 p2 = vec3(a1.xy,h.z); 75 | vec3 p3 = vec3(a1.zw,h.w); 76 | 77 | vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); 78 | p0 *= norm.x; 79 | p1 *= norm.y; 80 | p2 *= norm.z; 81 | p3 *= norm.w; 82 | 83 | vec4 m = max(0.60 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.00); 84 | m = m * m; 85 | return 42.00 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) ); 86 | } 87 | 88 | float snoise(float x, float y, float z){ 89 | return snoise(vec3(x, y, z)); 90 | } 91 | 92 | 93 | // const float posOffset = .015; 94 | // const float noiseScale = .05; 95 | const float zGap = 10.0; 96 | 97 | vec3 getPosition(vec3 value) { 98 | vec3 pos; 99 | 100 | float thetaY = value.x/numSeg * PI * 2.0; 101 | float thetaX = -value.y/numSeg * PI + PI * .5; 102 | 103 | pos.y = sin(thetaX) * radius; 104 | float r = cos(thetaX) * radius; 105 | pos.x = cos(thetaY) * r; 106 | pos.z = sin(thetaY) * r; 107 | 108 | float noise = snoise(pos*noise+time); 109 | pos = normalize(pos) * radius * (1.0 + noise * noiseScale); 110 | 111 | return pos; 112 | } 113 | 114 | void main(void) { 115 | vec3 pos = getPosition(aVertexPosition); 116 | gl_Position = uPMatrix * uMVMatrix * vec4(pos, 1.0); 117 | vTextureCoord = aTextureCoord; 118 | 119 | vNormal = normalize(pos); 120 | vColor = vec4(1.0); 121 | vVertex = pos; 122 | vRadius = radius; 123 | } -------------------------------------------------------------------------------- /labs/lv/.README: -------------------------------------------------------------------------------- 1 | Setup 2 | ===== 3 | 4 | sudo npm install 5 | 6 | 7 | Go to WAR 8 | ========= 9 | 10 | gulp 11 | 12 | 13 | 14 | If it don't work give me a shout on slack, liamviney 15 | 16 | 17 | -------------------------------------------------------------------------------- /labs/lv/dev/css/config.css: -------------------------------------------------------------------------------- 1 | 2 | /*# sourceMappingURL=config.css.map */ 3 | -------------------------------------------------------------------------------- /labs/lv/dev/css/config.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"config.css","sourcesContent":[],"sourceRoot":"/source/"} -------------------------------------------------------------------------------- /labs/lv/dev/css/main.css: -------------------------------------------------------------------------------- 1 | html,body{width:100%;height:100%;margin:0;padding:0;background:#000} 2 | /*# sourceMappingURL=main.css.map */ 3 | -------------------------------------------------------------------------------- /labs/lv/dev/css/main.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["main.css"],"names":[],"mappings":"AAEA,UACE,WAAW,AACX,YAAa,AACb,SAAS,AACT,UAAU,AAEV,eAA4B,CAC7B","file":"main.css","sourcesContent":["@import 'config.css';\n\nhtml, body {\n width:100%;\n height: 100%;\n margin:0;\n padding:0;\n\n background:var(--bg--color);\n}\n"],"sourceRoot":"/source/"} -------------------------------------------------------------------------------- /labs/lv/dev/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /labs/lv/dev/js/bundle.js: -------------------------------------------------------------------------------- 1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o0){if(deleteCount<=0){if(start==this.length){array_push.apply(this,args);return[]}if(start==0){array_unshift.apply(this,args);return[]}}result=_Array_slice_.call(this,start,start+deleteCount);args.push.apply(args,_Array_slice_.call(this,start+deleteCount,this.length));args.unshift.apply(args,_Array_slice_.call(this,0,start));args.unshift(0,this.length);array_splice.apply(this,args);return result}return array_splice.call(this,start,deleteCount)}}}if([].unshift(0)!=1){var array_unshift=Array.prototype.unshift;Array.prototype.unshift=function(){array_unshift.apply(this,arguments);return this.length}}if(!Array.isArray){Array.isArray=function isArray(obj){return _toString(obj)=="[object Array]"}}var boxedString=Object("a"),splitString=boxedString[0]!="a"||!(0 in boxedString);var boxedForEach=true;if(Array.prototype.forEach){Array.prototype.forEach.call("foo",function(item,i,obj){if(typeof obj!=="object")boxedForEach=false})}if(!Array.prototype.forEach||!boxedForEach){Array.prototype.forEach=function forEach(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,thisp=arguments[1],i=-1,length=self.length>>>0;if(_toString(fun)!="[object Function]"){throw new TypeError}while(++i>>0,result=Array(length),thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i>>0,result=[],value,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i>>0,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i>>0,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i>>0;if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}if(!length&&arguments.length==1){throw new TypeError("reduce of empty array with no initial value")}var i=0;var result;if(arguments.length>=2){result=arguments[1]}else{do{if(i in self){result=self[i++];break}if(++i>=length){throw new TypeError("reduce of empty array with no initial value")}}while(true)}for(;i>>0;if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}if(!length&&arguments.length==1){throw new TypeError("reduceRight of empty array with no initial value")}var result,i=length-1;if(arguments.length>=2){result=arguments[1]}else{do{if(i in self){result=self[i--];break}if(--i<0){throw new TypeError("reduceRight of empty array with no initial value")}}while(true)}if(i<0){return result}do{if(i in this){result=fun.call(void 0,result,self[i],i,object)}}while(i--);return result}}if(!Array.prototype.indexOf||[0,1].indexOf(1,2)!=-1){Array.prototype.indexOf=function indexOf(sought){var self=splitString&&_toString(this)=="[object String]"?this.split(""):toObject(this),length=self.length>>>0;if(!length){return-1}var i=0;if(arguments.length>1){i=toInteger(arguments[1])}i=i>=0?i:Math.max(0,length+i);for(;i>>0;if(!length){return-1}var i=length-1;if(arguments.length>1){i=Math.min(i,toInteger(arguments[1]))}i=i>=0?i:length-Math.abs(i);for(;i>=0;i--){if(i in self&&sought===self[i]){return i}}return-1}}if(!Object.keys){var hasDontEnumBug=true,dontEnums=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"],dontEnumsLength=dontEnums.length;for(var key in{toString:null}){hasDontEnumBug=false}Object.keys=function keys(object){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError("Object.keys called on a non-object")}var keys=[];for(var name in object){if(owns(object,name)){keys.push(name)}}if(hasDontEnumBug){for(var i=0,ii=dontEnumsLength;i9999?"+":"")+("00000"+Math.abs(year)).slice(0<=year&&year<=9999?-4:-6);length=result.length;while(length--){value=result[length];if(value<10){result[length]="0"+value}}return year+"-"+result.slice(0,2).join("-")+"T"+result.slice(2).join(":")+"."+("000"+this.getUTCMilliseconds()).slice(-3)+"Z"}}var dateToJSONIsSupported=false;try{dateToJSONIsSupported=Date.prototype.toJSON&&new Date(NaN).toJSON()===null&&new Date(negativeDate).toJSON().indexOf(negativeYearString)!==-1&&Date.prototype.toJSON.call({toISOString:function(){return true}})}catch(e){}if(!dateToJSONIsSupported){Date.prototype.toJSON=function toJSON(key){var o=Object(this),tv=toPrimitive(o),toISO;if(typeof tv==="number"&&!isFinite(tv)){return null}toISO=o.toISOString;if(typeof toISO!="function"){throw new TypeError("toISOString property is not callable")}return toISO.call(o)}}if(!Date.parse||"Date.parse is buggy"){Date=function(NativeDate){function Date(Y,M,D,h,m,s,ms){var length=arguments.length;if(this instanceof NativeDate){var date=length==1&&String(Y)===Y?new NativeDate(Date.parse(Y)):length>=7?new NativeDate(Y,M,D,h,m,s,ms):length>=6?new NativeDate(Y,M,D,h,m,s):length>=5?new NativeDate(Y,M,D,h,m):length>=4?new NativeDate(Y,M,D,h):length>=3?new NativeDate(Y,M,D):length>=2?new NativeDate(Y,M):length>=1?new NativeDate(Y):new NativeDate;date.constructor=Date;return date}return NativeDate.apply(this,arguments)}var isoDateExpression=new RegExp("^"+"(\\d{4}|[+-]\\d{6})"+"(?:-(\\d{2})"+"(?:-(\\d{2})"+"(?:"+"T(\\d{2})"+":(\\d{2})"+"(?:"+":(\\d{2})"+"(?:(\\.\\d{1,}))?"+")?"+"("+"Z|"+"(?:"+"([-+])"+"(\\d{2})"+":(\\d{2})"+")"+")?)?)?)?"+"$");var months=[0,31,59,90,120,151,181,212,243,273,304,334,365];function dayFromMonth(year,month){var t=month>1?1:0;return months[month]+Math.floor((year-1969+t)/4)-Math.floor((year-1901+t)/100)+Math.floor((year-1601+t)/400)+365*(year-1970)}function toUTC(t){return Number(new NativeDate(1970,0,1,0,0,0,t))}for(var key in NativeDate){Date[key]=NativeDate[key]}Date.now=NativeDate.now;Date.UTC=NativeDate.UTC;Date.prototype=NativeDate.prototype;Date.prototype.constructor=Date;Date.parse=function parse(string){var match=isoDateExpression.exec(string);if(match){var year=Number(match[1]),month=Number(match[2]||1)-1,day=Number(match[3]||1)-1,hour=Number(match[4]||0),minute=Number(match[5]||0),second=Number(match[6]||0),millisecond=Math.floor(Number(match[7]||0)*1e3),isLocalTime=Boolean(match[4]&&!match[8]),signOffset=match[9]==="-"?1:-1,hourOffset=Number(match[10]||0),minuteOffset=Number(match[11]||0),result;if(hour<(minute>0||second>0||millisecond>0?24:25)&&minute<60&&second<60&&millisecond<1e3&&month>-1&&month<12&&hourOffset<24&&minuteOffset<60&&day>-1&&day=0){c+=data[i];data[i]=Math.floor(c/n);c=c%n*base}}function toString(){var i=size;var s="";while(--i>=0){if(s!==""||i===0||data[i]!==0){var t=String(data[i]);if(s===""){s=t}else{s+="0000000".slice(0,7-t.length)+t}}}return s}function pow(x,n,acc){return n===0?acc:n%2===1?pow(x,n-1,acc*x):pow(x*x,n/2,acc)}function log(x){var n=0;while(x>=4096){n+=12;x/=4096}while(x>=2){n+=1;x/=2}return n}Number.prototype.toFixed=function(fractionDigits){var f,x,s,m,e,z,j,k;f=Number(fractionDigits);f=f!==f?0:Math.floor(f);if(f<0||f>20){throw new RangeError("Number.toFixed called with invalid number of decimals")}x=Number(this);if(x!==x){return"NaN"}if(x<=-1e21||x>=1e21){return String(x)}s="";if(x<0){s="-";x=-x}m="0";if(x>1e-21){e=log(x*pow(2,69,1))-69;z=e<0?x*pow(2,-e,1):x/pow(2,e,1);z*=4503599627370496;e=52-e;if(e>0){multiply(0,z);j=f;while(j>=7){multiply(1e7,0);j-=7}multiply(pow(10,j,1),0);j=e-1;while(j>=23){divide(1<<23);j-=23}divide(1<0){k=m.length;if(k<=f){m=s+"0.0000000000000000000".slice(0,f-k+2)+m}else{m=s+m.slice(0,k-f)+"."+m.slice(k-f)}}else{m=s+m}return m}})()}var string_split=String.prototype.split;if("ab".split(/(?:ab)*/).length!==2||".".split(/(.?)(.?)/).length!==4||"tesst".split(/(s)*/)[1]==="t"||"".split(/.?/).length||".".split(/()()/).length>1){(function(){var compliantExecNpcg=/()??/.exec("")[1]===void 0;String.prototype.split=function(separator,limit){var string=this;if(separator===void 0&&limit===0)return[];if(Object.prototype.toString.call(separator)!=="[object RegExp]"){return string_split.apply(this,arguments)}var output=[],flags=(separator.ignoreCase?"i":"")+(separator.multiline?"m":"")+(separator.extended?"x":"")+(separator.sticky?"y":""),lastLastIndex=0,separator=new RegExp(separator.source,flags+"g"),separator2,match,lastIndex,lastLength;string+="";if(!compliantExecNpcg){separator2=new RegExp("^"+separator.source+"$(?!\\s)",flags)}limit=limit===void 0?-1>>>0:limit>>>0;while(match=separator.exec(string)){lastIndex=match.index+match[0].length;if(lastIndex>lastLastIndex){output.push(string.slice(lastLastIndex,match.index));if(!compliantExecNpcg&&match.length>1){match[0].replace(separator2,function(){for(var i=1;i1&&match.index=limit){break}}if(separator.lastIndex===match.index){separator.lastIndex++}}if(lastLastIndex===string.length){if(lastLength||!separator.test("")){output.push("")}}else{output.push(string.slice(lastLastIndex))}return output.length>limit?output.slice(0,limit):output}})()}else if("0".split(void 0,0).length){String.prototype.split=function(separator,limit){if(separator===void 0&&limit===0)return[];return string_split.apply(this,arguments)}}if("".substr&&"0b".substr(-1)!=="b"){var string_substr=String.prototype.substr;String.prototype.substr=function(start,length){return string_substr.call(this,start<0?(start=this.length+start)<0?0:start:start,length)}}var ws=" \n \f\r \xa0\u1680\u180e\u2000\u2001\u2002\u2003"+"\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028"+"\u2029\ufeff";if(!String.prototype.trim||ws.trim()){ws="["+ws+"]";var trimBeginRegexp=new RegExp("^"+ws+ws+"*"),trimEndRegexp=new RegExp(ws+ws+"*$");String.prototype.trim=function trim(){if(this===void 0||this===null){throw new TypeError("can't convert "+this+" to object")}return String(this).replace(trimBeginRegexp,"").replace(trimEndRegexp,"")}}function toInteger(n){n=+n;if(n!==n){n=0}else if(n!==0&&n!==1/0&&n!==-(1/0)){n=(n>0||-1)*Math.floor(Math.abs(n))}return n}function isPrimitive(input){var type=typeof input;return input===null||type==="undefined"||type==="boolean"||type==="number"||type==="string"}function toPrimitive(input){var val,valueOf,toString;if(isPrimitive(input)){return input}valueOf=input.valueOf;if(typeof valueOf==="function"){val=valueOf.call(input);if(isPrimitive(val)){return val}}toString=input.toString;if(typeof toString==="function"){val=toString.call(input);if(isPrimitive(val)){return val}}throw new TypeError}var toObject=function(o){if(o==null){throw new TypeError("can't convert "+o+" to object")}return Object(o)}}); 20 | //# sourceMappingURL=es5-shim.map -------------------------------------------------------------------------------- /labs/lv/gulpfile.js: -------------------------------------------------------------------------------- 1 | /*eslint-env node*/ 2 | 'use strict'; 3 | 4 | var argv = require('yargs').argv, 5 | gulp = require('gulp'), 6 | browserSync = require('browser-sync').create(), 7 | reactify = require('reactify'), 8 | babelify = require('babelify'), 9 | concat = require('gulp-concat'), 10 | eslint = require('gulp-eslint'), 11 | watch = require('gulp-watch'), 12 | exit = require('gulp-exit'), 13 | clean = require('gulp-clean'), 14 | sourcemaps = require('gulp-sourcemaps'), 15 | postcss = require('gulp-postcss'), 16 | browserify = require('browserify'), 17 | source = require('vinyl-source-stream'), 18 | notify = require("gulp-notify"); 19 | 20 | var config = { 21 | paths: { 22 | html : './src/*.html', 23 | js : './src/js/app/**/*.js', 24 | jsLibs : './src/js/libs/**/*.js', 25 | images : './src/images/*', 26 | fonts : './src/fonts/*', 27 | json : './src/json/*', 28 | styl : './src/css/*', 29 | mainJs : './src/js/app/main.js', 30 | dist : './dist', 31 | dev : './dev', 32 | app : './src' 33 | } 34 | }; 35 | 36 | 37 | var production = (argv.env === 'production') ? true : false; 38 | var dir = (production) ? config.paths.dist : config.paths.dev; 39 | 40 | 41 | gulp.task('style', function() { 42 | var processors = [ 43 | require('postcss-import'), // Inline css import 44 | require('postcss-nested'), 45 | require('lost'), // Grid system 46 | require('rucksack-css'), // CSS Helper library 47 | require('postcss-pxtorem'), // Pixel values to rem 48 | require('cssnext')({}), // Use future css properties and variables 49 | require('autoprefixer')({browsers: ['last 2 versions'] }), 50 | require('css-mqpacker'), 51 | require('csswring') 52 | ]; 53 | return gulp.src(config.paths.styl) 54 | .pipe(sourcemaps.init()) 55 | .pipe(postcss(processors)) 56 | .pipe(sourcemaps.write('.')) 57 | .pipe(gulp.dest(dir+'/css')) 58 | .pipe(browserSync.reload({stream:true})); 59 | }); 60 | 61 | gulp.task('lint', function() { 62 | return gulp.src(config.paths.js) 63 | .pipe( eslint() ) 64 | .pipe(eslint.formatEach()); 65 | }); 66 | 67 | gulp.task('js', function() { 68 | browserify(config.paths.mainJs) 69 | .transform(babelify) 70 | .bundle() 71 | .on('error', console.error.bind(console)) 72 | .pipe(source('bundle.js')) 73 | .pipe(gulp.dest(dir + '/js')) 74 | .pipe( browserSync.reload({stream:true}) ) 75 | .pipe(notify("Javascript Compiled!")); 76 | }); 77 | 78 | gulp.task('jsLibs', function() { 79 | gulp.src(config.paths.jsLibs) 80 | .pipe(concat('vendor.js')) 81 | .pipe(gulp.dest(dir+'/js')) 82 | .pipe( browserSync.reload({stream:true}) ); 83 | }); 84 | 85 | gulp.task('html', function() { 86 | gulp.src(config.paths.html) 87 | .pipe(gulp.dest(dir)) 88 | .pipe( browserSync.reload({stream:true}) ); 89 | }); 90 | 91 | gulp.task('json', function() { 92 | gulp.src(config.paths.json) 93 | .pipe(gulp.dest(dir+'/json')) 94 | .pipe( browserSync.reload({stream:true}) ); 95 | }); 96 | 97 | gulp.task('images', function() { 98 | gulp.src(config.paths.images) 99 | .pipe(gulp.dest(dir+'/images')) 100 | .pipe( browserSync.reload({stream:true}) ); 101 | }); 102 | 103 | gulp.task('fonts', function() { 104 | gulp.src(config.paths.images) 105 | .pipe(gulp.dest(dir+'/fonts')) 106 | .pipe( browserSync.reload({stream:true}) ); 107 | }); 108 | 109 | gulp.task('serve', function() { 110 | 111 | browserSync.init({ 112 | server: { 113 | baseDir: dir 114 | }, 115 | ghostMode: { 116 | scroll: true 117 | }, 118 | notify: false 119 | }); 120 | 121 | gulp.watch(config.paths.styl, ['style']); 122 | gulp.watch(config.paths.js, ['js', 'lint']); 123 | gulp.watch(config.paths.jsLibs, ['jsLibs']); 124 | gulp.watch(config.paths.json, ['json']); 125 | gulp.watch(config.paths.fonts, ['fonts']); 126 | gulp.watch(config.paths.html, ['html']).on('change', browserSync.reload); 127 | 128 | }); 129 | 130 | gulp.task('clean', function(path) { 131 | return gulp.src( dir ).pipe( clean() ); 132 | }); 133 | 134 | if(production) { 135 | console.log("need to setup the production version"); 136 | } else { 137 | gulp.task('default', ['json','style','js','jsLibs','html','serve']); 138 | } 139 | 140 | -------------------------------------------------------------------------------- /labs/lv/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Codevember-es6", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "react", 11 | "postcss", 12 | "es6" 13 | ], 14 | "author": "Liam Viney", 15 | "license": "ISC", 16 | "devDependencies": { 17 | "autoprefixer": "^6.0.3", 18 | "autoresponsive-react": "^1.1.8", 19 | "babelify": "^6.4.0", 20 | "browser-sync": "^2.9.11", 21 | "browserify": "^12.0.1", 22 | "css-mqpacker": "^4.0.0", 23 | "cssnext": "^1.8.4", 24 | "csswring": "^4.0.0", 25 | "es6-react-mixins": "^0.2.1", 26 | "eslint-plugin-react": "^3.6.3", 27 | "gulp": "^3.9.0", 28 | "gulp-clean": "^0.3.1", 29 | "gulp-concat": "^2.6.0", 30 | "gulp-eslint": "^1.0.0", 31 | "gulp-exit": "0.0.2", 32 | "gulp-notify": "^2.2.0", 33 | "gulp-postcss": "^6.0.1", 34 | "gulp-sourcemaps": "^1.6.0", 35 | "gulp-watch": "^4.3.5", 36 | "lost": "^6.6.2", 37 | "postcss-import": "^7.1.0", 38 | "postcss-nested": "^1.0.0", 39 | "postcss-pxtorem": "^3.1.0", 40 | "postcss-simple-vars": "^1.0.1", 41 | "react": "^0.14.0", 42 | "react-dom": "^0.14.1", 43 | "react-mixin": "^2.0.2", 44 | "react-packery-mixin": "^0.1.9", 45 | "reactify": "^1.1.1", 46 | "rucksack-css": "^0.8.5", 47 | "vinyl-source-stream": "^1.1.0", 48 | "yargs": "^3.29.0" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /labs/lv/src/css/config.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg--color:#000; 3 | } 4 | -------------------------------------------------------------------------------- /labs/lv/src/css/main.css: -------------------------------------------------------------------------------- 1 | @import 'config.css'; 2 | 3 | html, body { 4 | width:100%; 5 | height: 100%; 6 | margin:0; 7 | padding:0; 8 | 9 | background:var(--bg--color); 10 | } 11 | -------------------------------------------------------------------------------- /labs/lv/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /labs/lv/src/js/app/MathUtils.js: -------------------------------------------------------------------------------- 1 | export default class MathUtils { 2 | constructor(){ 3 | console.log("setup a new class"); 4 | } 5 | random(min, max) { 6 | return min + Math.random() * (max - min); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /labs/lv/src/js/app/main.js: -------------------------------------------------------------------------------- 1 | import MathUtils from './MathUtils' 2 | 3 | var mathUtils = new MathUtils(); 4 | console.log('random : ' + mathUtils.random(0, 100) ); 5 | -------------------------------------------------------------------------------- /labs/lv/src/js/libs/console-polyfill.js: -------------------------------------------------------------------------------- 1 | // Console-polyfill. MIT license. 2 | // https://github.com/paulmillr/console-polyfill 3 | // Make it safe to do console.log() always. 4 | (function(con) { 5 | 'use strict'; 6 | var prop, method; 7 | var empty = {}; 8 | var dummy = function() {}; 9 | var properties = 'memory'.split(','); 10 | var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' + 11 | 'groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,' + 12 | 'table,time,timeEnd,timeStamp,trace,warn').split(','); 13 | while (prop = properties.pop()) con[prop] = con[prop] || empty; 14 | while (method = methods.pop()) con[method] = con[method] || dummy; 15 | })(this.console = this.console || {}); // Using `this` for web workers. 16 | -------------------------------------------------------------------------------- /labs/lv/src/js/libs/es5-sham.min.js: -------------------------------------------------------------------------------- 1 | (function(definition){if(typeof define=="function"){define(definition)}else if(typeof YUI=="function"){YUI.add("es5-sham",definition)}else{definition()}})(function(){var call=Function.prototype.call;var prototypeOfObject=Object.prototype;var owns=call.bind(prototypeOfObject.hasOwnProperty);var defineGetter;var defineSetter;var lookupGetter;var lookupSetter;var supportsAccessors;if(supportsAccessors=owns(prototypeOfObject,"__defineGetter__")){defineGetter=call.bind(prototypeOfObject.__defineGetter__);defineSetter=call.bind(prototypeOfObject.__defineSetter__);lookupGetter=call.bind(prototypeOfObject.__lookupGetter__);lookupSetter=call.bind(prototypeOfObject.__lookupSetter__)}if(!Object.getPrototypeOf){Object.getPrototypeOf=function getPrototypeOf(object){return object.__proto__||(object.constructor?object.constructor.prototype:prototypeOfObject)}}function doesGetOwnPropertyDescriptorWork(object){try{object.sentinel=0;return Object.getOwnPropertyDescriptor(object,"sentinel").value===0}catch(exception){}}if(Object.defineProperty){var getOwnPropertyDescriptorWorksOnObject=doesGetOwnPropertyDescriptorWork({});var getOwnPropertyDescriptorWorksOnDom=typeof document=="undefined"||doesGetOwnPropertyDescriptorWork(document.createElement("div"));if(!getOwnPropertyDescriptorWorksOnDom||!getOwnPropertyDescriptorWorksOnObject){var getOwnPropertyDescriptorFallback=Object.getOwnPropertyDescriptor}}if(!Object.getOwnPropertyDescriptor||getOwnPropertyDescriptorFallback){var ERR_NON_OBJECT="Object.getOwnPropertyDescriptor called on a non-object: ";Object.getOwnPropertyDescriptor=function getOwnPropertyDescriptor(object,property){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError(ERR_NON_OBJECT+object)}if(getOwnPropertyDescriptorFallback){try{return getOwnPropertyDescriptorFallback.call(Object,object,property)}catch(exception){}}if(!owns(object,property)){return}var descriptor={enumerable:true,configurable:true};if(supportsAccessors){var prototype=object.__proto__;object.__proto__=prototypeOfObject;var getter=lookupGetter(object,property);var setter=lookupSetter(object,property);object.__proto__=prototype;if(getter||setter){if(getter){descriptor.get=getter}if(setter){descriptor.set=setter}return descriptor}}descriptor.value=object[property];descriptor.writable=true;return descriptor}}if(!Object.getOwnPropertyNames){Object.getOwnPropertyNames=function getOwnPropertyNames(object){return Object.keys(object)}}if(!Object.create){var createEmpty;var supportsProto=Object.prototype.__proto__===null;if(supportsProto||typeof document=="undefined"){createEmpty=function(){return{__proto__:null}}}else{createEmpty=function(){var iframe=document.createElement("iframe");var parent=document.body||document.documentElement;iframe.style.display="none";parent.appendChild(iframe);iframe.src="javascript:";var empty=iframe.contentWindow.Object.prototype;parent.removeChild(iframe);iframe=null;delete empty.constructor;delete empty.hasOwnProperty;delete empty.propertyIsEnumerable;delete empty.isPrototypeOf;delete empty.toLocaleString;delete empty.toString;delete empty.valueOf;empty.__proto__=null;function Empty(){}Empty.prototype=empty;createEmpty=function(){return new Empty};return new Empty}}Object.create=function create(prototype,properties){var object;function Type(){}if(prototype===null){object=createEmpty()}else{if(typeof prototype!=="object"&&typeof prototype!=="function"){throw new TypeError("Object prototype may only be an Object or null")}Type.prototype=prototype;object=new Type;object.__proto__=prototype}if(properties!==void 0){Object.defineProperties(object,properties)}return object}}function doesDefinePropertyWork(object){try{Object.defineProperty(object,"sentinel",{});return"sentinel"in object}catch(exception){}}if(Object.defineProperty){var definePropertyWorksOnObject=doesDefinePropertyWork({});var definePropertyWorksOnDom=typeof document=="undefined"||doesDefinePropertyWork(document.createElement("div"));if(!definePropertyWorksOnObject||!definePropertyWorksOnDom){var definePropertyFallback=Object.defineProperty,definePropertiesFallback=Object.defineProperties}}if(!Object.defineProperty||definePropertyFallback){var ERR_NON_OBJECT_DESCRIPTOR="Property description must be an object: ";var ERR_NON_OBJECT_TARGET="Object.defineProperty called on non-object: ";var ERR_ACCESSORS_NOT_SUPPORTED="getters & setters can not be defined "+"on this javascript engine";Object.defineProperty=function defineProperty(object,property,descriptor){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError(ERR_NON_OBJECT_TARGET+object)}if(typeof descriptor!="object"&&typeof descriptor!="function"||descriptor===null){throw new TypeError(ERR_NON_OBJECT_DESCRIPTOR+descriptor)}if(definePropertyFallback){try{return definePropertyFallback.call(Object,object,property,descriptor)}catch(exception){}}if(owns(descriptor,"value")){if(supportsAccessors&&(lookupGetter(object,property)||lookupSetter(object,property))){var prototype=object.__proto__;object.__proto__=prototypeOfObject;delete object[property];object[property]=descriptor.value;object.__proto__=prototype}else{object[property]=descriptor.value}}else{if(!supportsAccessors){throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED)}if(owns(descriptor,"get")){defineGetter(object,property,descriptor.get)}if(owns(descriptor,"set")){defineSetter(object,property,descriptor.set)}}return object}}if(!Object.defineProperties||definePropertiesFallback){Object.defineProperties=function defineProperties(object,properties){if(definePropertiesFallback){try{return definePropertiesFallback.call(Object,object,properties)}catch(exception){}}for(var property in properties){if(owns(properties,property)&&property!="__proto__"){Object.defineProperty(object,property,properties[property])}}return object}}if(!Object.seal){Object.seal=function seal(object){return object}}if(!Object.freeze){Object.freeze=function freeze(object){return object}}try{Object.freeze(function(){})}catch(exception){Object.freeze=function freeze(freezeObject){return function freeze(object){if(typeof object=="function"){return object}else{return freezeObject(object)}}}(Object.freeze)}if(!Object.preventExtensions){Object.preventExtensions=function preventExtensions(object){return object}}if(!Object.isSealed){Object.isSealed=function isSealed(object){return false}}if(!Object.isFrozen){Object.isFrozen=function isFrozen(object){return false}}if(!Object.isExtensible){Object.isExtensible=function isExtensible(object){if(Object(object)!==object){throw new TypeError}var name="";while(owns(object,name)){name+="?"}object[name]=true;var returnValue=owns(object,name);delete object[name];return returnValue}}}); 2 | //# sourceMappingURL=es5-sham.map -------------------------------------------------------------------------------- /labs/lv/src/js/libs/es5-shim.min.js: -------------------------------------------------------------------------------- 1 | (function(definition){if(typeof define=="function"){define(definition)}else if(typeof YUI=="function"){YUI.add("es5",definition)}else{definition()}})(function(){if(parseInt("08")!==8){parseInt=function(origParseInt){var hexRegex=/^0[xX]/;return function parseIntES5(str,radix){str=String(str).trim();if(!+radix){radix=hexRegex.test(str)?16:10}return origParseInt(str,radix)}}(parseInt)}function Empty(){}if(!Function.prototype.bind){Function.prototype.bind=function bind(that){var target=this;if(typeof target!="function"){throw new TypeError("Function.prototype.bind called on incompatible "+target)}var args=_Array_slice_.call(arguments,1);var binder=function(){if(this instanceof bound){var result=target.apply(this,args.concat(_Array_slice_.call(arguments)));if(Object(result)===result){return result}return this}else{return target.apply(that,args.concat(_Array_slice_.call(arguments)))}};var boundLength=Math.max(0,target.length-args.length);var boundArgs=[];for(var i=0;i0){if(deleteCount<=0){if(start==this.length){array_push.apply(this,args);return[]}if(start==0){array_unshift.apply(this,args);return[]}}result=_Array_slice_.call(this,start,start+deleteCount);args.push.apply(args,_Array_slice_.call(this,start+deleteCount,this.length));args.unshift.apply(args,_Array_slice_.call(this,0,start));args.unshift(0,this.length);array_splice.apply(this,args);return result}return array_splice.call(this,start,deleteCount)}}}if([].unshift(0)!=1){var array_unshift=Array.prototype.unshift;Array.prototype.unshift=function(){array_unshift.apply(this,arguments);return this.length}}if(!Array.isArray){Array.isArray=function isArray(obj){return _toString(obj)=="[object Array]"}}var boxedString=Object("a"),splitString=boxedString[0]!="a"||!(0 in boxedString);var boxedForEach=true;if(Array.prototype.forEach){Array.prototype.forEach.call("foo",function(item,i,obj){if(typeof obj!=="object")boxedForEach=false})}if(!Array.prototype.forEach||!boxedForEach){Array.prototype.forEach=function forEach(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,thisp=arguments[1],i=-1,length=self.length>>>0;if(_toString(fun)!="[object Function]"){throw new TypeError}while(++i>>0,result=Array(length),thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i>>0,result=[],value,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i>>0,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i>>0,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i>>0;if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}if(!length&&arguments.length==1){throw new TypeError("reduce of empty array with no initial value")}var i=0;var result;if(arguments.length>=2){result=arguments[1]}else{do{if(i in self){result=self[i++];break}if(++i>=length){throw new TypeError("reduce of empty array with no initial value")}}while(true)}for(;i>>0;if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}if(!length&&arguments.length==1){throw new TypeError("reduceRight of empty array with no initial value")}var result,i=length-1;if(arguments.length>=2){result=arguments[1]}else{do{if(i in self){result=self[i--];break}if(--i<0){throw new TypeError("reduceRight of empty array with no initial value")}}while(true)}if(i<0){return result}do{if(i in this){result=fun.call(void 0,result,self[i],i,object)}}while(i--);return result}}if(!Array.prototype.indexOf||[0,1].indexOf(1,2)!=-1){Array.prototype.indexOf=function indexOf(sought){var self=splitString&&_toString(this)=="[object String]"?this.split(""):toObject(this),length=self.length>>>0;if(!length){return-1}var i=0;if(arguments.length>1){i=toInteger(arguments[1])}i=i>=0?i:Math.max(0,length+i);for(;i>>0;if(!length){return-1}var i=length-1;if(arguments.length>1){i=Math.min(i,toInteger(arguments[1]))}i=i>=0?i:length-Math.abs(i);for(;i>=0;i--){if(i in self&&sought===self[i]){return i}}return-1}}if(!Object.keys){var hasDontEnumBug=true,dontEnums=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"],dontEnumsLength=dontEnums.length;for(var key in{toString:null}){hasDontEnumBug=false}Object.keys=function keys(object){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError("Object.keys called on a non-object")}var keys=[];for(var name in object){if(owns(object,name)){keys.push(name)}}if(hasDontEnumBug){for(var i=0,ii=dontEnumsLength;i9999?"+":"")+("00000"+Math.abs(year)).slice(0<=year&&year<=9999?-4:-6);length=result.length;while(length--){value=result[length];if(value<10){result[length]="0"+value}}return year+"-"+result.slice(0,2).join("-")+"T"+result.slice(2).join(":")+"."+("000"+this.getUTCMilliseconds()).slice(-3)+"Z"}}var dateToJSONIsSupported=false;try{dateToJSONIsSupported=Date.prototype.toJSON&&new Date(NaN).toJSON()===null&&new Date(negativeDate).toJSON().indexOf(negativeYearString)!==-1&&Date.prototype.toJSON.call({toISOString:function(){return true}})}catch(e){}if(!dateToJSONIsSupported){Date.prototype.toJSON=function toJSON(key){var o=Object(this),tv=toPrimitive(o),toISO;if(typeof tv==="number"&&!isFinite(tv)){return null}toISO=o.toISOString;if(typeof toISO!="function"){throw new TypeError("toISOString property is not callable")}return toISO.call(o)}}if(!Date.parse||"Date.parse is buggy"){Date=function(NativeDate){function Date(Y,M,D,h,m,s,ms){var length=arguments.length;if(this instanceof NativeDate){var date=length==1&&String(Y)===Y?new NativeDate(Date.parse(Y)):length>=7?new NativeDate(Y,M,D,h,m,s,ms):length>=6?new NativeDate(Y,M,D,h,m,s):length>=5?new NativeDate(Y,M,D,h,m):length>=4?new NativeDate(Y,M,D,h):length>=3?new NativeDate(Y,M,D):length>=2?new NativeDate(Y,M):length>=1?new NativeDate(Y):new NativeDate;date.constructor=Date;return date}return NativeDate.apply(this,arguments)}var isoDateExpression=new RegExp("^"+"(\\d{4}|[+-]\\d{6})"+"(?:-(\\d{2})"+"(?:-(\\d{2})"+"(?:"+"T(\\d{2})"+":(\\d{2})"+"(?:"+":(\\d{2})"+"(?:(\\.\\d{1,}))?"+")?"+"("+"Z|"+"(?:"+"([-+])"+"(\\d{2})"+":(\\d{2})"+")"+")?)?)?)?"+"$");var months=[0,31,59,90,120,151,181,212,243,273,304,334,365];function dayFromMonth(year,month){var t=month>1?1:0;return months[month]+Math.floor((year-1969+t)/4)-Math.floor((year-1901+t)/100)+Math.floor((year-1601+t)/400)+365*(year-1970)}function toUTC(t){return Number(new NativeDate(1970,0,1,0,0,0,t))}for(var key in NativeDate){Date[key]=NativeDate[key]}Date.now=NativeDate.now;Date.UTC=NativeDate.UTC;Date.prototype=NativeDate.prototype;Date.prototype.constructor=Date;Date.parse=function parse(string){var match=isoDateExpression.exec(string);if(match){var year=Number(match[1]),month=Number(match[2]||1)-1,day=Number(match[3]||1)-1,hour=Number(match[4]||0),minute=Number(match[5]||0),second=Number(match[6]||0),millisecond=Math.floor(Number(match[7]||0)*1e3),isLocalTime=Boolean(match[4]&&!match[8]),signOffset=match[9]==="-"?1:-1,hourOffset=Number(match[10]||0),minuteOffset=Number(match[11]||0),result;if(hour<(minute>0||second>0||millisecond>0?24:25)&&minute<60&&second<60&&millisecond<1e3&&month>-1&&month<12&&hourOffset<24&&minuteOffset<60&&day>-1&&day=0){c+=data[i];data[i]=Math.floor(c/n);c=c%n*base}}function toString(){var i=size;var s="";while(--i>=0){if(s!==""||i===0||data[i]!==0){var t=String(data[i]);if(s===""){s=t}else{s+="0000000".slice(0,7-t.length)+t}}}return s}function pow(x,n,acc){return n===0?acc:n%2===1?pow(x,n-1,acc*x):pow(x*x,n/2,acc)}function log(x){var n=0;while(x>=4096){n+=12;x/=4096}while(x>=2){n+=1;x/=2}return n}Number.prototype.toFixed=function(fractionDigits){var f,x,s,m,e,z,j,k;f=Number(fractionDigits);f=f!==f?0:Math.floor(f);if(f<0||f>20){throw new RangeError("Number.toFixed called with invalid number of decimals")}x=Number(this);if(x!==x){return"NaN"}if(x<=-1e21||x>=1e21){return String(x)}s="";if(x<0){s="-";x=-x}m="0";if(x>1e-21){e=log(x*pow(2,69,1))-69;z=e<0?x*pow(2,-e,1):x/pow(2,e,1);z*=4503599627370496;e=52-e;if(e>0){multiply(0,z);j=f;while(j>=7){multiply(1e7,0);j-=7}multiply(pow(10,j,1),0);j=e-1;while(j>=23){divide(1<<23);j-=23}divide(1<0){k=m.length;if(k<=f){m=s+"0.0000000000000000000".slice(0,f-k+2)+m}else{m=s+m.slice(0,k-f)+"."+m.slice(k-f)}}else{m=s+m}return m}})()}var string_split=String.prototype.split;if("ab".split(/(?:ab)*/).length!==2||".".split(/(.?)(.?)/).length!==4||"tesst".split(/(s)*/)[1]==="t"||"".split(/.?/).length||".".split(/()()/).length>1){(function(){var compliantExecNpcg=/()??/.exec("")[1]===void 0;String.prototype.split=function(separator,limit){var string=this;if(separator===void 0&&limit===0)return[];if(Object.prototype.toString.call(separator)!=="[object RegExp]"){return string_split.apply(this,arguments)}var output=[],flags=(separator.ignoreCase?"i":"")+(separator.multiline?"m":"")+(separator.extended?"x":"")+(separator.sticky?"y":""),lastLastIndex=0,separator=new RegExp(separator.source,flags+"g"),separator2,match,lastIndex,lastLength;string+="";if(!compliantExecNpcg){separator2=new RegExp("^"+separator.source+"$(?!\\s)",flags)}limit=limit===void 0?-1>>>0:limit>>>0;while(match=separator.exec(string)){lastIndex=match.index+match[0].length;if(lastIndex>lastLastIndex){output.push(string.slice(lastLastIndex,match.index));if(!compliantExecNpcg&&match.length>1){match[0].replace(separator2,function(){for(var i=1;i1&&match.index=limit){break}}if(separator.lastIndex===match.index){separator.lastIndex++}}if(lastLastIndex===string.length){if(lastLength||!separator.test("")){output.push("")}}else{output.push(string.slice(lastLastIndex))}return output.length>limit?output.slice(0,limit):output}})()}else if("0".split(void 0,0).length){String.prototype.split=function(separator,limit){if(separator===void 0&&limit===0)return[];return string_split.apply(this,arguments)}}if("".substr&&"0b".substr(-1)!=="b"){var string_substr=String.prototype.substr;String.prototype.substr=function(start,length){return string_substr.call(this,start<0?(start=this.length+start)<0?0:start:start,length)}}var ws=" \n \f\r \xa0\u1680\u180e\u2000\u2001\u2002\u2003"+"\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028"+"\u2029\ufeff";if(!String.prototype.trim||ws.trim()){ws="["+ws+"]";var trimBeginRegexp=new RegExp("^"+ws+ws+"*"),trimEndRegexp=new RegExp(ws+ws+"*$");String.prototype.trim=function trim(){if(this===void 0||this===null){throw new TypeError("can't convert "+this+" to object")}return String(this).replace(trimBeginRegexp,"").replace(trimEndRegexp,"")}}function toInteger(n){n=+n;if(n!==n){n=0}else if(n!==0&&n!==1/0&&n!==-(1/0)){n=(n>0||-1)*Math.floor(Math.abs(n))}return n}function isPrimitive(input){var type=typeof input;return input===null||type==="undefined"||type==="boolean"||type==="number"||type==="string"}function toPrimitive(input){var val,valueOf,toString;if(isPrimitive(input)){return input}valueOf=input.valueOf;if(typeof valueOf==="function"){val=valueOf.call(input);if(isPrimitive(val)){return val}}toString=input.toString;if(typeof toString==="function"){val=toString.call(input);if(isPrimitive(val)){return val}}throw new TypeError}var toObject=function(o){if(o==null){throw new TypeError("can't convert "+o+" to object")}return Object(o)}}); 2 | //# sourceMappingURL=es5-shim.map -------------------------------------------------------------------------------- /labs/wen/02/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /labs/wen/02/dist/css/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | width: 100%; 3 | height: 100%; 4 | margin: 0; 5 | padding: 0; 6 | overflow: hidden; 7 | position: static; 8 | background: #fff; } 9 | 10 | html { 11 | -webkit-text-size-adjust: none; 12 | -ms-text-size-adjust: none; 13 | text-size-adjust: none; } 14 | 15 | h1, h2, h3, h4, text, p { 16 | -webkit-font-smoothing: antialiased; 17 | -moz-osx-webkit-font-smoothing: antialiased; } 18 | 19 | .Main-Canvas { 20 | width: 100%; 21 | height: 100%; 22 | top: 0px; 23 | left: 0px; 24 | position: absolute; } 25 | -------------------------------------------------------------------------------- /labs/wen/02/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Gulp - Template 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /labs/wen/02/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var browserSync = require('browser-sync').create(); 5 | var browserify = require('browserify'); 6 | var source = require('vinyl-source-stream2') 7 | var uglify = require('gulp-uglify'); 8 | var sass = require('gulp-ruby-sass'); 9 | var prefix = require('gulp-autoprefixer'); 10 | var watchify = require('watchify'); 11 | var buffer = require('vinyl-buffer'); 12 | var reload = browserSync.reload; 13 | 14 | 15 | var bundler = watchify(browserify('./src/js/app.js', watchify.args)); 16 | gulp.task('browserify', bundle); 17 | 18 | bundler.on('update', bundle); 19 | 20 | function logError(msg) { 21 | console.log( msg.toString() ); 22 | } 23 | 24 | function bundle() { 25 | var b = bundler.bundle() 26 | .on('error', logError) 27 | .pipe(source('bundle.js')) 28 | .pipe(buffer()) 29 | .pipe(gulp.dest('./dist/bundle/')) 30 | .pipe(reload({stream: true, once: true})); 31 | 32 | return b; 33 | } 34 | 35 | gulp.task('watch', function() { 36 | gulp.watch('./src/scss/*.scss', ['sass']); 37 | }); 38 | 39 | 40 | gulp.task('sass', function() { 41 | return sass('./src/scss/main.scss') 42 | .on('error', function (err) { 43 | console.error('Error!', err.message); 44 | }) 45 | .pipe(prefix({ 46 | browsers: ['last 2 versions'], 47 | cascade: false 48 | })) 49 | .pipe(gulp.dest('./dist/css')) 50 | .pipe(reload({stream:true})); 51 | }); 52 | 53 | gulp.task('browser-sync', function() { 54 | browserSync.init({ 55 | browser: 'google chrome', 56 | server: { 57 | baseDir: './dist/' 58 | }, 59 | files: [ 60 | './dist/js/bundle.js', 61 | './dist/css/main.css', 62 | './dist/index.html' 63 | ], 64 | // open: false, 65 | // port: '8000', 66 | reloadDebounce: 500 67 | }); 68 | }); 69 | 70 | gulp.task('default', ['browserify', 'sass', 'browser-sync', 'watch']); 71 | -------------------------------------------------------------------------------- /labs/wen/02/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "GulpTemplate", 3 | "version": "0.0.0", 4 | "author": "Yi-Wen Lin", 5 | "devDependencies": { 6 | "browser-sync": "^2.6.5", 7 | "browserify": "^10.2.0", 8 | "vinyl-source-stream2": "0.1.1", 9 | "gulp-uglify": "1.1.0", 10 | "gulp-ruby-sass": "1.0.0-alpha.3", 11 | "gulp-autoprefixer": "2.1.0", 12 | "glslify": "2.1.2", 13 | "vinyl-buffer": "^1.0.0", 14 | "watchify": "^3.2.0", 15 | "dat-gui": "0.5.0", 16 | "gulp": "3.8.11" 17 | }, 18 | "scripts": { 19 | "build": "gulp", 20 | "compile": "gulp compile", 21 | "watch": "gulp watch" 22 | }, 23 | "browserify": { 24 | "transform": [ 25 | "glslify" 26 | ] 27 | } 28 | } -------------------------------------------------------------------------------- /labs/wen/02/src/js/SceneApp.js: -------------------------------------------------------------------------------- 1 | // SceneApp.js 2 | 3 | var GL = bongiovi.GL, gl; 4 | var ViewIcoSphere = require("./ViewIcoSphere"); 5 | 6 | function SceneApp() { 7 | gl = GL.gl; 8 | bongiovi.Scene.call(this); 9 | this.camera._rx.value = -.2; 10 | 11 | window.addEventListener("resize", this.resize.bind(this)); 12 | } 13 | 14 | 15 | var p = SceneApp.prototype = new bongiovi.Scene(); 16 | 17 | p._initTextures = function() { 18 | console.log('Init Textures'); 19 | }; 20 | 21 | p._initViews = function() { 22 | console.log('Init Views'); 23 | this._vAxis = new bongiovi.ViewAxis(); 24 | this._vDotPlane = new bongiovi.ViewDotPlane(); 25 | 26 | this._vSphere = new ViewIcoSphere(); 27 | }; 28 | 29 | p.render = function() { 30 | GL.clear(0, 0, 0, 0); 31 | // this.camera._ry.value += .01; 32 | // this._vAxis.render(); 33 | this._vDotPlane.render(); 34 | 35 | this._vSphere.render(); 36 | }; 37 | 38 | p.resize = function() { 39 | GL.setSize(window.innerWidth, window.innerHeight); 40 | this.camera.resize(GL.aspectRatio); 41 | }; 42 | 43 | module.exports = SceneApp; -------------------------------------------------------------------------------- /labs/wen/02/src/js/ViewIcoSphere.js: -------------------------------------------------------------------------------- 1 | // ViewIcoSphere.js 2 | 3 | var GL = bongiovi.GL; 4 | var glm = bongiovi.glm; 5 | var vec3 = bongiovi.glm.vec3; 6 | var gl; 7 | var glslify = require("glslify"); 8 | 9 | var vertices = [[0,52.573111,85.065081],[0,-52.573111,85.065081],[85.065081,0,52.573111],[85.065081,0,-52.573111],[0,52.573111,-85.065081],[0,-52.573111,-85.065081],[-85.065081,0,-52.573111],[-85.065081,0,52.573111],[52.573111,85.065081,0],[-52.573111,85.065081,0],[-52.573111,-85.065081,0],[52.573111,-85.065081,0],[20.177411,97.943209,0],[-20.177411,97.943209,0],[20.177411,73.002557,65.295472],[40.354821,85.472883,32.647736],[-20.177411,73.002557,65.295472],[-40.354821,85.472883,32.647736],[85.472883,32.647736,40.354821],[73.002557,65.295472,20.177411],[32.647736,40.354821,85.472883],[65.295472,20.177411,73.002557],[85.472883,32.647736,-40.354821],[73.002557,65.295472,-20.177411],[97.943209,0,20.177411],[97.943209,0,-20.177411],[20.177411,73.002557,-65.295472],[40.354821,85.472883,-32.647736],[65.295472,20.177411,-73.002557],[32.647736,40.354821,-85.472883],[-20.177411,73.002557,-65.295472],[-40.354821,85.472883,-32.647736],[-85.472883,32.647736,-40.354821],[-73.002557,65.295472,-20.177411],[-32.647736,40.354821,-85.472883],[-65.295472,20.177411,-73.002557],[-85.472883,32.647736,40.354821],[-73.002557,65.295472,20.177411],[-97.943209,0,-20.177411],[-97.943209,0,20.177411],[-32.647736,40.354821,85.472883],[-65.295472,20.177411,73.002557],[-20.177411,-97.943209,0],[20.177411,-97.943209,0],[-20.177411,-73.002557,65.295472],[-40.354821,-85.472883,32.647736],[20.177411,-73.002557,65.295472],[40.354821,-85.472883,32.647736],[85.472883,-32.647736,40.354821],[73.002557,-65.295472,20.177411],[32.647736,-40.354821,85.472883],[65.295472,-20.177411,73.002557],[85.472883,-32.647736,-40.354821],[73.002557,-65.295472,-20.177411],[65.295472,-20.177411,-73.002557],[32.647736,-40.354821,-85.472883],[20.177411,-73.002557,-65.295472],[40.354821,-85.472883,-32.647736],[-20.177411,-73.002557,-65.295472],[-40.354821,-85.472883,-32.647736],[-32.647736,-40.354821,-85.472883],[-65.295472,-20.177411,-73.002557],[-85.472883,-32.647736,-40.354821],[-73.002557,-65.295472,-20.177411],[-85.472883,-32.647736,40.354821],[-73.002557,-65.295472,20.177411],[-32.647736,-40.354821,85.472883],[-65.295472,-20.177411,73.002557],[0,20.177411,97.943209],[0,-20.177411,97.943209],[0,20.177411,-97.943209],[0,-20.177411,-97.943209],[0,93.417236,35.682209],[57.735027,57.735027,57.735027],[93.417236,35.682209,0],[57.735027,57.735027,-57.735027],[0,93.417236,-35.682209],[-57.735027,57.735027,-57.735027],[-93.417236,35.682209,0],[-57.735027,57.735027,57.735027],[0,-93.417236,35.682209],[57.735027,-57.735027,57.735027],[93.417236,-35.682209,0],[57.735027,-57.735027,-57.735027],[0,-93.417236,-35.682209],[-57.735027,-57.735027,-57.735027],[-93.417236,-35.682209,0],[-57.735027,-57.735027,57.735027],[-35.682209,0,93.417236],[35.682209,0,93.417236],[35.682209,0,-93.417236],[-35.682209,0,-93.417236]]; 10 | var faces = [[18,14,10],[73,13,14],[14,18,73],[17,73,18],[16,9,13],[13,73,16],[15,16,73],[73,17,15],[1,15,17],[16,20,9],[74,19,20],[20,16,74],[15,74,16],[22,3,19],[19,74,22],[21,22,74],[74,15,21],[1,21,15],[20,24,9],[75,23,24],[24,20,75],[19,75,20],[26,4,23],[23,75,26],[25,26,75],[75,19,25],[3,25,19],[24,28,9],[76,27,28],[28,24,76],[23,76,24],[30,5,27],[27,76,30],[29,30,76],[76,23,29],[4,29,23],[28,13,9],[77,14,13],[13,28,77],[27,77,28],[32,10,14],[14,77,32],[31,32,77],[77,27,31],[5,31,27],[35,31,5],[78,32,31],[31,35,78],[36,78,35],[34,10,32],[32,78,34],[33,34,78],[78,36,33],[7,33,36],[39,33,7],[79,34,33],[33,39,79],[40,79,39],[38,10,34],[34,79,38],[37,38,79],[79,40,37],[8,37,40],[38,18,10],[80,17,18],[18,38,80],[37,80,38],[41,1,17],[17,80,41],[42,41,80],[80,37,42],[8,42,37],[48,44,12],[81,43,44],[44,48,81],[47,81,48],[46,11,43],[43,81,46],[45,46,81],[81,47,45],[2,45,47],[52,49,3],[82,50,49],[49,52,82],[51,82,52],[48,12,50],[50,82,48],[47,48,82],[82,51,47],[2,47,51],[49,25,3],[83,26,25],[25,49,83],[50,83,49],[53,4,26],[26,83,53],[54,53,83],[83,50,54],[12,54,50],[53,55,4],[84,56,55],[55,53,84],[54,84,53],[57,6,56],[56,84,57],[58,57,84],[84,54,58],[12,58,54],[57,59,6],[85,60,59],[59,57,85],[58,85,57],[43,11,60],[60,85,43],[44,43,85],[85,58,44],[12,44,58],[59,61,6],[86,62,61],[61,59,86],[60,86,59],[63,7,62],[62,86,63],[64,63,86],[86,60,64],[11,64,60],[63,39,7],[87,40,39],[39,63,87],[64,87,63],[65,8,40],[40,87,65],[66,65,87],[87,64,66],[11,66,64],[65,68,8],[88,67,68],[68,65,88],[66,88,65],[45,2,67],[67,88,45],[46,45,88],[88,66,46],[11,46,66],[70,67,2],[89,68,67],[67,70,89],[69,89,70],[42,8,68],[68,89,42],[41,42,89],[89,69,41],[1,41,69],[22,52,3],[90,51,52],[52,22,90],[21,90,22],[70,2,51],[51,90,70],[69,70,90],[90,21,69],[1,69,21],[30,71,5],[91,72,71],[71,30,91],[29,91,30],[56,6,72],[72,91,56],[55,56,91],[91,29,55],[4,55,29],[71,35,5],[92,36,35],[35,71,92],[72,92,71],[62,7,36],[36,92,62],[61,62,92],[92,72,61],[6,61,72]]; 11 | 12 | 13 | function ViewIcoSphere() { 14 | this.time = 0; 15 | // bongiovi.View.call(this, glslify('../shaders/sphere.vert'), bongiovi.ShaderLibs.get('simpleColorFrag')); 16 | bongiovi.View.call(this, glslify('../shaders/sphere.vert'), glslify('../shaders/sphere.frag')); 17 | } 18 | 19 | var p = ViewIcoSphere.prototype = new bongiovi.View(); 20 | p.constructor = ViewIcoSphere; 21 | 22 | 23 | p._init = function() { 24 | gl = GL.gl; 25 | var positions = []; 26 | var coords = []; 27 | var indices = []; 28 | var centers = []; 29 | var normals = []; 30 | var count = 0; 31 | 32 | 33 | function getNormal(p0, p1, p2) { 34 | var pp0 = vec3.clone(p0); 35 | var pp1 = vec3.clone(p1); 36 | var pp2 = vec3.clone(p2); 37 | var v0 = vec3.create(); 38 | var v1 = vec3.create(); 39 | var n = vec3.create(); 40 | vec3.sub(v0, pp1, pp0); 41 | vec3.sub(v1, pp2, pp0); 42 | 43 | vec3.cross(n, v0, v1); 44 | vec3.normalize(n, n); 45 | 46 | return n; 47 | } 48 | 49 | function getCenter(p0, p1, p2) { 50 | var x = (p0[0] + p1[0] + p2[0])/3; 51 | var y = (p0[1] + p1[1] + p2[1])/3; 52 | var z = (p0[2] + p1[2] + p2[2])/3; 53 | 54 | return [x, y, z]; 55 | } 56 | 57 | function addFace(p0, p1, p2, c) { 58 | // var c = getCenter(p0, p1, p2); 59 | var n = getNormal(p0, p1, p2); 60 | 61 | positions.push(p0); 62 | positions.push(p1); 63 | positions.push(p2); 64 | 65 | centers.push(c); 66 | centers.push(c); 67 | centers.push(c); 68 | 69 | normals.push(n); 70 | normals.push(n); 71 | normals.push(n); 72 | 73 | coords.push([0, 0]); 74 | coords.push([0, 0]); 75 | coords.push([0, 0]); 76 | 77 | indices.push(count*3); 78 | indices.push(count*3+1); 79 | indices.push(count*3+2); 80 | 81 | count ++; 82 | } 83 | 84 | 85 | function addPyramid(p0, p1, p2) { 86 | var c = getCenter(p0, p1, p2); 87 | 88 | addFace(p0, p1, p2, c); 89 | addFace([0, 0, 0], p1, p0, c); 90 | addFace([0, 0, 0], p2, p1, c); 91 | addFace([0, 0, 0], p0, p2, c); 92 | } 93 | 94 | for(var i=0; i 0 { 32 | padding: $pad; 33 | } 34 | @media (#{-webkit-min-device-pixel-ratio}: #{1.6}), (#{min--moz-device-pixel-ratio}: #{1.6}), (#{-o-min-device-pixel-ratio}: #{3 / 2}), (#{min-device-pixel-ratio}: #{1.6}) { 35 | & { 36 | $pos: sprite-position($sprites2x, $name, -$pad * 2, -$pad * 2); 37 | background-image: sprite-url($sprites2x); 38 | background-position: nth($pos, 1) nth($pos, 2) / 2; 39 | @include background-size(ceil(image-width(sprite-path($sprites2x)) / 2), auto); 40 | // ^-- this is the "smarter" way to do this. 41 | // sprite-path() returns the path of the generated sprite sheet, which 42 | // image-width() calculates the width of. the ceil() is in place in case 43 | // you have sprites that have an odd-number of pixels in width (which 44 | // you shouldn't in the first place) 45 | 46 | } 47 | } 48 | } 49 | 50 | @mixin sprite-centered($name){ 51 | margin-top: (image-height(sprite-file($sprites, $name))/-2); 52 | margin-left: (image-width(sprite-file($sprites, $name))/-2); 53 | position: absolute; 54 | top: 50%; 55 | left: 50%; 56 | @media (#{-webkit-min-device-pixel-ratio}: #{1.6}), (#{min--moz-device-pixel-ratio}: #{1.6}), (#{-o-min-device-pixel-ratio}: #{3 / 2}), (#{min-device-pixel-ratio}: #{1.6}) { 57 | & { 58 | margin-top: (image-height(sprite-file($sprites2x, $name))/-2); 59 | margin-left: (image-height(sprite-file($sprites2x, $name))/-2); 60 | position: absolute; 61 | top: 50%; 62 | left: 50%; 63 | } 64 | } 65 | } 66 | 67 | @mixin absPositionMaximumSize{ 68 | position: absolute; 69 | top:0px; 70 | left:0px; 71 | width:100%; 72 | height:100%; 73 | } 74 | 75 | @mixin absCenteredVertical($height){ 76 | position: absolute; 77 | top:50%; 78 | margin-top:($height / -2); 79 | height:$height; 80 | } 81 | 82 | @mixin absCenteredHorizontal($width){ 83 | position: absolute; 84 | left:50%; 85 | margin-left:($width / -2); 86 | width:$width; 87 | } 88 | 89 | @mixin absCentered($height, $width){ 90 | position: absolute; 91 | top:50%; 92 | left:50%; 93 | margin-left:($width / -2); 94 | margin-top:($height / -2); 95 | width:$width; 96 | height:$height; 97 | } 98 | 99 | @mixin clear-floats{ 100 | content: "."; 101 | visibility: hidden; 102 | display: block; 103 | height: 0; 104 | clear: both; 105 | } 106 | 107 | /* 108 | * Clearfix: contain floats 109 | * 110 | * For modern browsers 111 | * 1. The space content is one way to avoid an Opera bug when the 112 | * `contenteditable` attribute is included anywhere else in the document. 113 | * Otherwise it causes space to appear at the top and bottom of elements 114 | * that receive the `clearfix` class. 115 | * 2. The use of `table` rather than `block` is only necessary if using 116 | * `:before` to contain the top-margins of child elements. 117 | */ 118 | 119 | @mixin clearfix{ 120 | 121 | &:before, 122 | &:after { 123 | content: " "; /* 1 */ 124 | display: table; /* 2 */ 125 | } 126 | 127 | &:after { 128 | clear: both; 129 | } 130 | 131 | /* 132 | * For IE 6/7 only 133 | * Include this rule to trigger hasLayout and contain floats. 134 | */ 135 | *zoom: 1; 136 | } 137 | %clearfix { @include clearfix(); } 138 | 139 | @mixin breakpoint($point){ 140 | @if $point == mobile { 141 | @media (max-width: $mobile) {@content;} 142 | } 143 | 144 | @if $point == tablet { 145 | @media (max-width: $tablet) {@content;} 146 | } 147 | } 148 | 149 | 150 | @mixin scrollbar($bg-color, $scrollbar-width, $thumb-color){ 151 | 152 | &::-webkit-scrollbar-track{ 153 | background-color: $bg-color; 154 | } 155 | &::-webkit-scrollbar{ 156 | width: $scrollbar-width; 157 | background-color: $bg-color; 158 | } 159 | &::-webkit-scrollbar-thumb{ 160 | background-color: $thumb-color; 161 | } 162 | &::-moz-scrollbar-track{ 163 | background-color: $bg-color; 164 | } 165 | &::-moz-scrollbar{ 166 | width: $scrollbar-width; 167 | background-color: $bg-color; 168 | } 169 | &::-moz-scrollbar-thumb{ 170 | background-color: $thumb-color; 171 | } 172 | 173 | } 174 | -------------------------------------------------------------------------------- /labs/wen/02/src/shaders/post.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | void main(void) { 4 | gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); 5 | } -------------------------------------------------------------------------------- /labs/wen/02/src/shaders/sphere.frag: -------------------------------------------------------------------------------- 1 | // sphere.frag 2 | 3 | #define SHADER_NAME SIMPLE_TEXTURE 4 | 5 | precision highp float; 6 | varying vec2 vTextureCoord; 7 | varying vec3 vNormal; 8 | varying vec3 vVertex; 9 | 10 | uniform vec3 eye; 11 | uniform float opacity; 12 | 13 | float ambient = .2; 14 | vec3 lightPos = vec3(1.0); 15 | float lightWeight = 1.0 - ambient; 16 | 17 | 18 | void main(void) { 19 | float lambert = dot(vNormal, normalize(lightPos)) * .5 + .5; 20 | // float lambert = max(dot(vNormal, normalize(lightPos)), 0.0); 21 | float grey = ambient + lambert * lightWeight; 22 | 23 | // vec3 dirEye = normalize(eye - vVertex); 24 | // vec3 dirLight = normalize(lightPos - vVertex); 25 | // vec3 h = normalize(vNormal + dirEye); 26 | // float specular = pow(max(dot(h, vNormal), 0.0), 40.0) * .5; 27 | // grey += specular; 28 | 29 | gl_FragColor = vec4(vec3(grey), 1.0); 30 | 31 | } -------------------------------------------------------------------------------- /labs/wen/02/src/shaders/sphere.vert: -------------------------------------------------------------------------------- 1 | // sphere.vert 2 | 3 | #define SHADER_NAME BASIC_VERTEX 4 | 5 | precision highp float; 6 | attribute vec3 aVertexPosition; 7 | attribute vec3 aCenter; 8 | attribute vec3 aNormal; 9 | attribute vec2 aTextureCoord; 10 | 11 | uniform mat4 uMVMatrix; 12 | uniform mat4 uPMatrix; 13 | uniform float time; 14 | 15 | varying vec2 vTextureCoord; 16 | varying vec3 vCenter; 17 | varying vec3 vNormal; 18 | varying vec3 vVertex; 19 | 20 | float exponentialIn(float t) { 21 | return t == 0.0 ? t : pow(2.0, 10.0 * (t - 1.0)); 22 | } 23 | 24 | float exponentialOut(float t) { 25 | return t == 1.0 ? t : 1.0 - pow(2.0, -10.0 * t); 26 | } 27 | 28 | float exponentialInOut(float t) { 29 | return t == 0.0 || t == 1.0 30 | ? t 31 | : t < 0.5 32 | ? +0.5 * pow(2.0, (20.0 * t) - 10.0) 33 | : -0.5 * pow(2.0, 10.0 - (t * 20.0)) + 1.0; 34 | } 35 | 36 | const float PI = 3.141592657; 37 | 38 | vec4 quat_from_axis_angle(vec3 axis, float angle){ 39 | vec4 qr; 40 | float half_angle = (angle * 0.5) * 3.14159 / 180.0; 41 | qr.x = axis.x * sin(half_angle); 42 | qr.y = axis.y * sin(half_angle); 43 | qr.z = axis.z * sin(half_angle); 44 | qr.w = cos(half_angle); 45 | return qr; 46 | } 47 | 48 | vec3 rotate_vertex_position(vec3 position, vec3 axis, float angle) { 49 | vec4 q = quat_from_axis_angle(axis, angle); 50 | vec3 v = position.xyz; 51 | return v + 2.0 * cross(q.xyz, cross(q.xyz, v) + q.w * v); 52 | } 53 | 54 | void main(void) { 55 | float lengthCenter = length(aCenter); 56 | // float scale = (sin(aCenter.x * .01 + time) * cos(aCenter.y * .02 + time) * sin(aCenter.z * .015 + time)) * .5 + .5; 57 | 58 | vec3 nPos = normalize(aVertexPosition); 59 | vec3 nCenter = normalize(aCenter); 60 | float nOffset = sin(nCenter.x * .5 * PI + time); 61 | nOffset = smoothstep(0.0, 1.0, nOffset); 62 | 63 | float scale = 1.0 + nOffset * .25; 64 | float r = lengthCenter * scale; 65 | vec3 newCenter = normalize(aCenter) * r; 66 | vec3 posOffset = newCenter - aCenter; 67 | 68 | vec3 relativePos = aVertexPosition - aCenter; 69 | float angleOffset = smoothstep(0.0, 1.5, nOffset); 70 | float angle = exponentialInOut(angleOffset)*36.0; 71 | relativePos = rotate_vertex_position(relativePos, nCenter, angle); 72 | 73 | vec3 newPos = aCenter + relativePos + posOffset; 74 | 75 | gl_Position = uPMatrix * uMVMatrix * vec4(newPos, 1.0); 76 | vTextureCoord = aTextureCoord; 77 | 78 | vVertex = newPos; 79 | vNormal = mix(aNormal, nPos, sin(time*1.5)); 80 | } -------------------------------------------------------------------------------- /labs/wen/03/dist/assets/gradient.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yiwenl/Codevember/2888bf126dfe210b8d1bac51999e06013a236418/labs/wen/03/dist/assets/gradient.jpg -------------------------------------------------------------------------------- /labs/wen/03/dist/css/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | width: 100%; 3 | height: 100%; 4 | margin: 0; 5 | padding: 0; 6 | overflow: hidden; 7 | position: static; 8 | background: #222222; } 9 | 10 | html { 11 | -webkit-text-size-adjust: none; 12 | -ms-text-size-adjust: none; 13 | text-size-adjust: none; } 14 | 15 | h1, h2, h3, h4, text, p { 16 | -webkit-font-smoothing: antialiased; 17 | -moz-osx-webkit-font-smoothing: antialiased; } 18 | 19 | .Main-Canvas { 20 | width: 100%; 21 | height: 100%; 22 | top: 0px; 23 | left: 0px; 24 | position: absolute; } 25 | -------------------------------------------------------------------------------- /labs/wen/03/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Gulp - Template 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /labs/wen/03/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var browserSync = require('browser-sync').create(); 5 | var browserify = require('browserify'); 6 | var source = require('vinyl-source-stream2') 7 | var uglify = require('gulp-uglify'); 8 | var sass = require('gulp-ruby-sass'); 9 | var prefix = require('gulp-autoprefixer'); 10 | var watchify = require('watchify'); 11 | var buffer = require('vinyl-buffer'); 12 | var reload = browserSync.reload; 13 | 14 | 15 | var bundler = watchify(browserify('./src/js/app.js', watchify.args)); 16 | gulp.task('browserify', bundle); 17 | 18 | bundler.on('update', bundle); 19 | 20 | function logError(msg) { 21 | console.log( msg.toString() ); 22 | } 23 | 24 | function bundle() { 25 | var b = bundler.bundle() 26 | .on('error', logError) 27 | .pipe(source('bundle.js')) 28 | .pipe(buffer()) 29 | .pipe(gulp.dest('./dist/bundle/')) 30 | .pipe(reload({stream: true, once: true})); 31 | 32 | return b; 33 | } 34 | 35 | gulp.task('watch', function() { 36 | gulp.watch('./src/scss/*.scss', ['sass']); 37 | }); 38 | 39 | 40 | gulp.task('sass', function() { 41 | return sass('./src/scss/main.scss') 42 | .on('error', function (err) { 43 | console.error('Error!', err.message); 44 | }) 45 | .pipe(prefix({ 46 | browsers: ['last 2 versions'], 47 | cascade: false 48 | })) 49 | .pipe(gulp.dest('./dist/css')) 50 | .pipe(reload({stream:true})); 51 | }); 52 | 53 | gulp.task('browser-sync', function() { 54 | browserSync.init({ 55 | browser: 'google chrome', 56 | server: { 57 | baseDir: './dist/' 58 | }, 59 | files: [ 60 | './dist/js/bundle.js', 61 | './dist/css/main.css', 62 | './dist/index.html' 63 | ], 64 | // open: false, 65 | // port: '8000', 66 | reloadDebounce: 500 67 | }); 68 | }); 69 | 70 | gulp.task('default', ['browserify', 'sass', 'browser-sync', 'watch']); 71 | -------------------------------------------------------------------------------- /labs/wen/03/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "GulpTemplate", 3 | "version": "0.0.0", 4 | "author": "Yi-Wen Lin", 5 | "devDependencies": { 6 | "browser-sync": "^2.6.5", 7 | "browserify": "^10.2.0", 8 | "vinyl-source-stream2": "0.1.1", 9 | "gulp-uglify": "1.1.0", 10 | "gulp-ruby-sass": "1.0.0-alpha.3", 11 | "gulp-autoprefixer": "2.1.0", 12 | "glslify": "2.1.2", 13 | "vinyl-buffer": "^1.0.0", 14 | "watchify": "^3.2.0", 15 | "dat-gui": "0.5.0", 16 | "gulp": "3.8.11" 17 | }, 18 | "scripts": { 19 | "build": "gulp", 20 | "compile": "gulp compile", 21 | "watch": "gulp watch" 22 | }, 23 | "browserify": { 24 | "transform": [ 25 | "glslify" 26 | ] 27 | } 28 | } -------------------------------------------------------------------------------- /labs/wen/03/src/js/SceneApp.js: -------------------------------------------------------------------------------- 1 | // SceneApp.js 2 | 3 | var GL = bongiovi.GL, gl; 4 | var ViewNoise = require("./ViewNoise"); 5 | 6 | function SceneApp() { 7 | gl = GL.gl; 8 | bongiovi.Scene.call(this); 9 | 10 | window.addEventListener("resize", this.resize.bind(this)); 11 | } 12 | 13 | 14 | var p = SceneApp.prototype = new bongiovi.Scene(); 15 | 16 | p._initTextures = function() { 17 | console.log('Init Textures'); 18 | this._texGradient = new bongiovi.GLTexture(images.gradient); 19 | }; 20 | 21 | p._initViews = function() { 22 | console.log('Init Views'); 23 | this._vAxis = new bongiovi.ViewAxis(); 24 | this._vDotPlane = new bongiovi.ViewDotPlane(); 25 | 26 | this._vNoise = new ViewNoise(); 27 | }; 28 | 29 | p.render = function() { 30 | // this._vAxis.render(); 31 | // this._vDotPlane.render(); 32 | 33 | 34 | GL.setMatrices(this.cameraOrtho); 35 | GL.rotate(this.sceneRotation.matrix); 36 | 37 | this._vNoise.render(this._texGradient); 38 | }; 39 | 40 | p.resize = function() { 41 | GL.setSize(window.innerWidth, window.innerHeight); 42 | this.camera.resize(GL.aspectRatio); 43 | }; 44 | 45 | module.exports = SceneApp; -------------------------------------------------------------------------------- /labs/wen/03/src/js/ViewNoise.js: -------------------------------------------------------------------------------- 1 | // ViewNoise.js 2 | 3 | var GL = bongiovi.GL; 4 | var gl; 5 | var glslify = require("glslify"); 6 | 7 | function ViewNoise() { 8 | this.time = 0; 9 | bongiovi.View.call(this, null, glslify("../shaders/post.frag")); 10 | } 11 | 12 | var p = ViewNoise.prototype = new bongiovi.View(); 13 | p.constructor = ViewNoise; 14 | 15 | 16 | p._init = function() { 17 | gl = GL.gl; 18 | this.mesh = bongiovi.MeshUtils.createPlane(2, 2, 1); 19 | }; 20 | 21 | p.render = function(textureNoise) { 22 | this.time += .01; 23 | this.shader.bind(); 24 | this.shader.uniform("time", "uniform1f", this.time); 25 | this.shader.uniform("resolution", "uniform2fv", [GL.width, GL.height]); 26 | 27 | this.shader.uniform("textureNoise", "uniform1i", 0); 28 | textureNoise.bind(0); 29 | GL.draw(this.mesh); 30 | }; 31 | 32 | module.exports = ViewNoise; -------------------------------------------------------------------------------- /labs/wen/03/src/js/app.js: -------------------------------------------------------------------------------- 1 | // app.js 2 | window.bongiovi = require("./libs/bongiovi.js"); 3 | var dat = require("dat-gui"); 4 | 5 | (function() { 6 | var SceneApp = require("./SceneApp"); 7 | 8 | App = function() { 9 | var loader = new bongiovi.SimpleImageLoader(); 10 | var assets = ['assets/gradient.jpg']; 11 | loader.load(assets, this, this._onImageLoaded); 12 | } 13 | 14 | var p = App.prototype; 15 | 16 | p._onImageLoaded = function(img) { 17 | window.images = img; 18 | console.log(img); 19 | 20 | if(document.body) this._init(); 21 | else { 22 | window.addEventListener("load", this._init.bind(this)); 23 | } 24 | }; 25 | 26 | p._init = function() { 27 | this.canvas = document.createElement("canvas"); 28 | this.canvas.width = window.innerWidth; 29 | this.canvas.height = window.innerHeight; 30 | this.canvas.className = "Main-Canvas"; 31 | document.body.appendChild(this.canvas); 32 | bongiovi.GL.init(this.canvas); 33 | 34 | this._scene = new SceneApp(); 35 | bongiovi.Scheduler.addEF(this, this._loop); 36 | 37 | // this.gui = new dat.GUI({width:300}); 38 | }; 39 | 40 | p._loop = function() { 41 | this._scene.loop(); 42 | }; 43 | 44 | })(); 45 | 46 | 47 | new App(); -------------------------------------------------------------------------------- /labs/wen/03/src/scss/_global.scss: -------------------------------------------------------------------------------- 1 | html, body { 2 | width:100%; 3 | height:100%; 4 | 5 | margin:0; 6 | padding:0; 7 | 8 | overflow:hidden; 9 | position: static; 10 | background: #222222; 11 | } 12 | 13 | html { 14 | -webkit-text-size-adjust: none; 15 | -moz-text-size-adjust: none; 16 | text-size-adjust: none; 17 | } 18 | 19 | h1,h2,h3,h4,text,p { 20 | -webkit-font-smoothing: antialiased; 21 | -moz-osx-webkit-font-smoothing: antialiased; 22 | } 23 | 24 | .Main-Canvas { 25 | width:100%; 26 | height:100%; 27 | top:0px; 28 | left:0px; 29 | position: absolute; 30 | } -------------------------------------------------------------------------------- /labs/wen/03/src/scss/common/_fonts.scss: -------------------------------------------------------------------------------- 1 | 2 | @include font-face( 3 | "Museo", 4 | font-files("Museo100-Regular.eot", 5 | "Museo100-Regular.woff", 6 | "Museo100-Regular.ttf"), eot("Museo100-Regular.eot?#iefix") 7 | ); 8 | 9 | 10 | $Museo:"Museo",Verdana,Geneva; 11 | -------------------------------------------------------------------------------- /labs/wen/03/src/scss/main.scss: -------------------------------------------------------------------------------- 1 | @import "global"; 2 | -------------------------------------------------------------------------------- /labs/wen/03/src/scss/utils/_importMixins.scss: -------------------------------------------------------------------------------- 1 | @import "utils/mixins"; -------------------------------------------------------------------------------- /labs/wen/03/src/scss/utils/_mixins.scss: -------------------------------------------------------------------------------- 1 | @import "compass/utilities/sprites"; 2 | @import "compass/css3/background-size"; 3 | 4 | // Define the sprites here. Notice that I've added an optional spacing. 5 | $sprites: sprite-map("1x/sprites/*.png", $spacing: 10px); 6 | $sprites2x: sprite-map("2x/sprites/*.png", $spacing: 20px); 7 | 8 | // Now let's define the sprite mixin. 9 | // This delegates to the reusable retina-sprite mixin. 10 | @mixin sprite($name){ 11 | @include retina-sprite($name, $sprites, $sprites2x); 12 | } 13 | 14 | // The general purpose retina sprite mixin. 15 | // 16 | // @include retina-sprite(name, $spritemap1, $spritemap2) 17 | // @include retina-sprite(name, $spritemap1, $spritemap2[, $dimensions: true, $pad: 0]) 18 | // 19 | // If `dimensions` is true, then width/height will also be set. 20 | // 21 | // if `pad` is non-zero, then that's how much padding the element will have (requires 22 | // $spacing on the sprite maps). Great for iPhone interfaces to make hit areas bigger. 23 | 24 | @mixin retina-sprite($name, $sprites, $sprites2x, $dimensions: true, $pad: 0) { 25 | @if $dimensions == true { 26 | @include sprite-dimensions($sprites, $name); 27 | } 28 | background-image: sprite-url($sprites); 29 | background-position: sprite-position($sprites, $name, -$pad, -$pad); 30 | background-repeat: no-repeat; 31 | @if $pad > 0 { 32 | padding: $pad; 33 | } 34 | @media (#{-webkit-min-device-pixel-ratio}: #{1.6}), (#{min--moz-device-pixel-ratio}: #{1.6}), (#{-o-min-device-pixel-ratio}: #{3 / 2}), (#{min-device-pixel-ratio}: #{1.6}) { 35 | & { 36 | $pos: sprite-position($sprites2x, $name, -$pad * 2, -$pad * 2); 37 | background-image: sprite-url($sprites2x); 38 | background-position: nth($pos, 1) nth($pos, 2) / 2; 39 | @include background-size(ceil(image-width(sprite-path($sprites2x)) / 2), auto); 40 | // ^-- this is the "smarter" way to do this. 41 | // sprite-path() returns the path of the generated sprite sheet, which 42 | // image-width() calculates the width of. the ceil() is in place in case 43 | // you have sprites that have an odd-number of pixels in width (which 44 | // you shouldn't in the first place) 45 | 46 | } 47 | } 48 | } 49 | 50 | @mixin sprite-centered($name){ 51 | margin-top: (image-height(sprite-file($sprites, $name))/-2); 52 | margin-left: (image-width(sprite-file($sprites, $name))/-2); 53 | position: absolute; 54 | top: 50%; 55 | left: 50%; 56 | @media (#{-webkit-min-device-pixel-ratio}: #{1.6}), (#{min--moz-device-pixel-ratio}: #{1.6}), (#{-o-min-device-pixel-ratio}: #{3 / 2}), (#{min-device-pixel-ratio}: #{1.6}) { 57 | & { 58 | margin-top: (image-height(sprite-file($sprites2x, $name))/-2); 59 | margin-left: (image-height(sprite-file($sprites2x, $name))/-2); 60 | position: absolute; 61 | top: 50%; 62 | left: 50%; 63 | } 64 | } 65 | } 66 | 67 | @mixin absPositionMaximumSize{ 68 | position: absolute; 69 | top:0px; 70 | left:0px; 71 | width:100%; 72 | height:100%; 73 | } 74 | 75 | @mixin absCenteredVertical($height){ 76 | position: absolute; 77 | top:50%; 78 | margin-top:($height / -2); 79 | height:$height; 80 | } 81 | 82 | @mixin absCenteredHorizontal($width){ 83 | position: absolute; 84 | left:50%; 85 | margin-left:($width / -2); 86 | width:$width; 87 | } 88 | 89 | @mixin absCentered($height, $width){ 90 | position: absolute; 91 | top:50%; 92 | left:50%; 93 | margin-left:($width / -2); 94 | margin-top:($height / -2); 95 | width:$width; 96 | height:$height; 97 | } 98 | 99 | @mixin clear-floats{ 100 | content: "."; 101 | visibility: hidden; 102 | display: block; 103 | height: 0; 104 | clear: both; 105 | } 106 | 107 | /* 108 | * Clearfix: contain floats 109 | * 110 | * For modern browsers 111 | * 1. The space content is one way to avoid an Opera bug when the 112 | * `contenteditable` attribute is included anywhere else in the document. 113 | * Otherwise it causes space to appear at the top and bottom of elements 114 | * that receive the `clearfix` class. 115 | * 2. The use of `table` rather than `block` is only necessary if using 116 | * `:before` to contain the top-margins of child elements. 117 | */ 118 | 119 | @mixin clearfix{ 120 | 121 | &:before, 122 | &:after { 123 | content: " "; /* 1 */ 124 | display: table; /* 2 */ 125 | } 126 | 127 | &:after { 128 | clear: both; 129 | } 130 | 131 | /* 132 | * For IE 6/7 only 133 | * Include this rule to trigger hasLayout and contain floats. 134 | */ 135 | *zoom: 1; 136 | } 137 | %clearfix { @include clearfix(); } 138 | 139 | @mixin breakpoint($point){ 140 | @if $point == mobile { 141 | @media (max-width: $mobile) {@content;} 142 | } 143 | 144 | @if $point == tablet { 145 | @media (max-width: $tablet) {@content;} 146 | } 147 | } 148 | 149 | 150 | @mixin scrollbar($bg-color, $scrollbar-width, $thumb-color){ 151 | 152 | &::-webkit-scrollbar-track{ 153 | background-color: $bg-color; 154 | } 155 | &::-webkit-scrollbar{ 156 | width: $scrollbar-width; 157 | background-color: $bg-color; 158 | } 159 | &::-webkit-scrollbar-thumb{ 160 | background-color: $thumb-color; 161 | } 162 | &::-moz-scrollbar-track{ 163 | background-color: $bg-color; 164 | } 165 | &::-moz-scrollbar{ 166 | width: $scrollbar-width; 167 | background-color: $bg-color; 168 | } 169 | &::-moz-scrollbar-thumb{ 170 | background-color: $thumb-color; 171 | } 172 | 173 | } 174 | -------------------------------------------------------------------------------- /labs/wen/03/src/shaders/post.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | 4 | varying vec2 vTextureCoord; 5 | uniform float time; 6 | uniform vec2 resolution; 7 | uniform sampler2D textureNoise; 8 | 9 | 10 | vec4 permute(vec4 x) { return mod(((x*34.00)+1.00)*x, 289.00); } 11 | vec4 taylorInvSqrt(vec4 r) { return 1.79 - 0.85 * r; } 12 | 13 | float snoise(vec3 v){ 14 | const vec2 C = vec2(1.00/6.00, 1.00/3.00) ; 15 | const vec4 D = vec4(0.00, 0.50, 1.00, 2.00); 16 | 17 | vec3 i = floor(v + dot(v, C.yyy) ); 18 | vec3 x0 = v - i + dot(i, C.xxx) ; 19 | 20 | vec3 g = step(x0.yzx, x0.xyz); 21 | vec3 l = 1.00 - g; 22 | vec3 i1 = min( g.xyz, l.zxy ); 23 | vec3 i2 = max( g.xyz, l.zxy ); 24 | 25 | vec3 x1 = x0 - i1 + 1.00 * C.xxx; 26 | vec3 x2 = x0 - i2 + 2.00 * C.xxx; 27 | vec3 x3 = x0 - 1. + 3.00 * C.xxx; 28 | 29 | i = mod(i, 289.00 ); 30 | vec4 p = permute( permute( permute( i.z + vec4(0.00, i1.z, i2.z, 1.00 )) + i.y + vec4(0.00, i1.y, i2.y, 1.00 )) + i.x + vec4(0.00, i1.x, i2.x, 1.00 )); 31 | 32 | float n_ = 1.00/7.00; 33 | vec3 ns = n_ * D.wyz - D.xzx; 34 | 35 | vec4 j = p - 49.00 * floor(p * ns.z *ns.z); 36 | 37 | vec4 x_ = floor(j * ns.z); 38 | vec4 y_ = floor(j - 7.00 * x_ ); 39 | 40 | vec4 x = x_ *ns.x + ns.yyyy; 41 | vec4 y = y_ *ns.x + ns.yyyy; 42 | vec4 h = 1.00 - abs(x) - abs(y); 43 | 44 | vec4 b0 = vec4( x.xy, y.xy ); 45 | vec4 b1 = vec4( x.zw, y.zw ); 46 | 47 | vec4 s0 = floor(b0)*2.00 + 1.00; 48 | vec4 s1 = floor(b1)*2.00 + 1.00; 49 | vec4 sh = -step(h, vec4(0.00)); 50 | 51 | vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ; 52 | vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ; 53 | 54 | vec3 p0 = vec3(a0.xy,h.x); 55 | vec3 p1 = vec3(a0.zw,h.y); 56 | vec3 p2 = vec3(a1.xy,h.z); 57 | vec3 p3 = vec3(a1.zw,h.w); 58 | 59 | vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); 60 | p0 *= norm.x; 61 | p1 *= norm.y; 62 | p2 *= norm.z; 63 | p3 *= norm.w; 64 | 65 | vec4 m = max(0.60 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.00); 66 | m = m * m; 67 | return 42.00 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) ); 68 | } 69 | 70 | float snoise(float x, float y, float z){ 71 | return snoise(vec3(x, y, z)); 72 | } 73 | 74 | float cubicIn(float t) { 75 | return t * t * t; 76 | } 77 | 78 | float cubicOut(float t) { 79 | float f = t - 1.0; 80 | return f * f * f + 1.0; 81 | } 82 | 83 | void main(void) { 84 | vec2 tmp = vTextureCoord; 85 | tmp.x *= resolution.x/ resolution.y * .24; 86 | vec3 uv = vec3(tmp * 5.1, time * .1); 87 | 88 | float grey = snoise(uv) * .5 + .5; 89 | float gap = .01; 90 | 91 | // grey = floor(grey/gap) * gap; 92 | 93 | vec2 uvmap = vec2(grey, .5); 94 | vec3 color = texture2D(textureNoise, uvmap).rgb; 95 | float gray = dot(color, vec3(0.299, 0.587, 0.114)); 96 | 97 | // gl_FragColor = vec4(vec3(grey), 1.0); 98 | // gl_FragColor = vec4(vec3(gray), 1.0); 99 | gl_FragColor = vec4(color, 1.0); 100 | } -------------------------------------------------------------------------------- /labs/wen/04/dist/assets/gradient.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yiwenl/Codevember/2888bf126dfe210b8d1bac51999e06013a236418/labs/wen/04/dist/assets/gradient.jpg -------------------------------------------------------------------------------- /labs/wen/04/dist/css/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | width: 100%; 3 | height: 100%; 4 | margin: 0; 5 | padding: 0; 6 | overflow: hidden; 7 | position: static; 8 | background: #222222; } 9 | 10 | html { 11 | -webkit-text-size-adjust: none; 12 | -ms-text-size-adjust: none; 13 | text-size-adjust: none; } 14 | 15 | h1, h2, h3, h4, text, p { 16 | -webkit-font-smoothing: antialiased; 17 | -moz-osx-webkit-font-smoothing: antialiased; } 18 | 19 | .Main-Canvas { 20 | width: 100%; 21 | height: 100%; 22 | top: 0px; 23 | left: 0px; 24 | position: absolute; } 25 | -------------------------------------------------------------------------------- /labs/wen/04/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Gulp - Template 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /labs/wen/04/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var browserSync = require('browser-sync').create(); 5 | var browserify = require('browserify'); 6 | var source = require('vinyl-source-stream2') 7 | var uglify = require('gulp-uglify'); 8 | var sass = require('gulp-ruby-sass'); 9 | var prefix = require('gulp-autoprefixer'); 10 | var watchify = require('watchify'); 11 | var buffer = require('vinyl-buffer'); 12 | var reload = browserSync.reload; 13 | 14 | 15 | var bundler = watchify(browserify('./src/js/app.js', watchify.args)); 16 | gulp.task('browserify', bundle); 17 | 18 | bundler.on('update', bundle); 19 | 20 | function logError(msg) { 21 | console.log( msg.toString() ); 22 | } 23 | 24 | function bundle() { 25 | var b = bundler.bundle() 26 | .on('error', logError) 27 | .pipe(source('bundle.js')) 28 | .pipe(buffer()) 29 | .pipe(gulp.dest('./dist/bundle/')) 30 | .pipe(reload({stream: true, once: true})); 31 | 32 | return b; 33 | } 34 | 35 | gulp.task('watch', function() { 36 | gulp.watch('./src/scss/*.scss', ['sass']); 37 | }); 38 | 39 | 40 | gulp.task('sass', function() { 41 | return sass('./src/scss/main.scss') 42 | .on('error', function (err) { 43 | console.error('Error!', err.message); 44 | }) 45 | .pipe(prefix({ 46 | browsers: ['last 2 versions'], 47 | cascade: false 48 | })) 49 | .pipe(gulp.dest('./dist/css')) 50 | .pipe(reload({stream:true})); 51 | }); 52 | 53 | gulp.task('browser-sync', function() { 54 | browserSync.init({ 55 | browser: 'google chrome', 56 | server: { 57 | baseDir: './dist/' 58 | }, 59 | files: [ 60 | './dist/js/bundle.js', 61 | './dist/css/main.css', 62 | './dist/index.html' 63 | ], 64 | // open: false, 65 | // port: '8000', 66 | reloadDebounce: 500 67 | }); 68 | }); 69 | 70 | gulp.task('default', ['browserify', 'sass', 'browser-sync', 'watch']); 71 | -------------------------------------------------------------------------------- /labs/wen/04/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "GulpTemplate", 3 | "version": "0.0.0", 4 | "author": "Yi-Wen Lin", 5 | "devDependencies": { 6 | "browser-sync": "^2.6.5", 7 | "browserify": "^10.2.0", 8 | "vinyl-source-stream2": "0.1.1", 9 | "gulp-uglify": "1.1.0", 10 | "gulp-ruby-sass": "1.0.0-alpha.3", 11 | "gulp-autoprefixer": "2.1.0", 12 | "glslify": "2.1.2", 13 | "vinyl-buffer": "^1.0.0", 14 | "watchify": "^3.2.0", 15 | "dat-gui": "0.5.0", 16 | "gulp": "3.8.11" 17 | }, 18 | "scripts": { 19 | "build": "gulp", 20 | "compile": "gulp compile", 21 | "watch": "gulp watch" 22 | }, 23 | "browserify": { 24 | "transform": [ 25 | "glslify" 26 | ] 27 | } 28 | } -------------------------------------------------------------------------------- /labs/wen/04/src/js/Particle.js: -------------------------------------------------------------------------------- 1 | // Particle.js 2 | 3 | var vec3 = bongiovi.glm.vec3; 4 | var gravity = vec3.clone([0, -.15, 0]); 5 | var random = function(min, max) { return min + Math.random() * (max - min); } 6 | 7 | function Particle() { 8 | this.position = vec3.create(); 9 | this.velocity = vec3.create(); 10 | this.color = vec3.create(); 11 | this._init(); 12 | } 13 | 14 | var p = Particle.prototype; 15 | 16 | 17 | p._init = function() { 18 | 19 | }; 20 | 21 | 22 | p.update = function() { 23 | vec3.add(this.velocity, this.velocity, gravity); 24 | vec3.add(this.position, this.position, this.velocity); 25 | 26 | this._checkHitSphere(); 27 | this._checkHitFloor(); 28 | }; 29 | 30 | 31 | p._checkHitSphere = function() { 32 | if(vec3.length(this.position) < params.sphereSize) { 33 | 34 | var f = vec3.clone(this.position); 35 | vec3.normalize(f, f); 36 | vec3.scale(this.position, f, params.sphereSize); 37 | var bf = vec3.length(this.velocity) * 1.5; 38 | vec3.scale(f, f, bf * this.bounceRate); 39 | vec3.add(this.velocity, this.velocity, f); 40 | } 41 | }; 42 | 43 | 44 | p._checkHitFloor = function() { 45 | if(this.position[1] < -200.0) { 46 | this.reset(); 47 | } 48 | }; 49 | 50 | p.reset = function() { 51 | var r = 40; 52 | this.bounceRate = random(.5, 1.0); 53 | this.position[0] = random(-r, r); 54 | this.position[2] = random(-r, r); 55 | this.position[1] = random(400, 600); 56 | this.velocity[0] = this.velocity[1] = this.velocity[2] = 0; 57 | 58 | var min = .9; 59 | 60 | this.color[0] = random(min, 1.0); 61 | this.color[1] = random(min, 1.0); 62 | this.color[2] = random(min, 1.0); 63 | this.color = [1, 1, .975]; 64 | this.size = random(1, 2); 65 | }; 66 | 67 | module.exports = Particle; -------------------------------------------------------------------------------- /labs/wen/04/src/js/SceneApp.js: -------------------------------------------------------------------------------- 1 | // SceneApp.js 2 | 3 | var GL = bongiovi.GL, gl; 4 | var ViewSphere = require("./ViewSphere"); 5 | var ViewDot = require("./ViewDot"); 6 | var Particle = require("./Particle"); 7 | var random = function(min, max) { return min + Math.random() * (max - min); } 8 | 9 | function SceneApp() { 10 | gl = GL.gl; 11 | bongiovi.Scene.call(this); 12 | 13 | this.camera._rx.value = -.2; 14 | this.camera._ry.value = .3; 15 | this.camera.radius.value = 1000.0; 16 | 17 | 18 | this.particles = []; 19 | for(var i=0; i 0 { 32 | padding: $pad; 33 | } 34 | @media (#{-webkit-min-device-pixel-ratio}: #{1.6}), (#{min--moz-device-pixel-ratio}: #{1.6}), (#{-o-min-device-pixel-ratio}: #{3 / 2}), (#{min-device-pixel-ratio}: #{1.6}) { 35 | & { 36 | $pos: sprite-position($sprites2x, $name, -$pad * 2, -$pad * 2); 37 | background-image: sprite-url($sprites2x); 38 | background-position: nth($pos, 1) nth($pos, 2) / 2; 39 | @include background-size(ceil(image-width(sprite-path($sprites2x)) / 2), auto); 40 | // ^-- this is the "smarter" way to do this. 41 | // sprite-path() returns the path of the generated sprite sheet, which 42 | // image-width() calculates the width of. the ceil() is in place in case 43 | // you have sprites that have an odd-number of pixels in width (which 44 | // you shouldn't in the first place) 45 | 46 | } 47 | } 48 | } 49 | 50 | @mixin sprite-centered($name){ 51 | margin-top: (image-height(sprite-file($sprites, $name))/-2); 52 | margin-left: (image-width(sprite-file($sprites, $name))/-2); 53 | position: absolute; 54 | top: 50%; 55 | left: 50%; 56 | @media (#{-webkit-min-device-pixel-ratio}: #{1.6}), (#{min--moz-device-pixel-ratio}: #{1.6}), (#{-o-min-device-pixel-ratio}: #{3 / 2}), (#{min-device-pixel-ratio}: #{1.6}) { 57 | & { 58 | margin-top: (image-height(sprite-file($sprites2x, $name))/-2); 59 | margin-left: (image-height(sprite-file($sprites2x, $name))/-2); 60 | position: absolute; 61 | top: 50%; 62 | left: 50%; 63 | } 64 | } 65 | } 66 | 67 | @mixin absPositionMaximumSize{ 68 | position: absolute; 69 | top:0px; 70 | left:0px; 71 | width:100%; 72 | height:100%; 73 | } 74 | 75 | @mixin absCenteredVertical($height){ 76 | position: absolute; 77 | top:50%; 78 | margin-top:($height / -2); 79 | height:$height; 80 | } 81 | 82 | @mixin absCenteredHorizontal($width){ 83 | position: absolute; 84 | left:50%; 85 | margin-left:($width / -2); 86 | width:$width; 87 | } 88 | 89 | @mixin absCentered($height, $width){ 90 | position: absolute; 91 | top:50%; 92 | left:50%; 93 | margin-left:($width / -2); 94 | margin-top:($height / -2); 95 | width:$width; 96 | height:$height; 97 | } 98 | 99 | @mixin clear-floats{ 100 | content: "."; 101 | visibility: hidden; 102 | display: block; 103 | height: 0; 104 | clear: both; 105 | } 106 | 107 | /* 108 | * Clearfix: contain floats 109 | * 110 | * For modern browsers 111 | * 1. The space content is one way to avoid an Opera bug when the 112 | * `contenteditable` attribute is included anywhere else in the document. 113 | * Otherwise it causes space to appear at the top and bottom of elements 114 | * that receive the `clearfix` class. 115 | * 2. The use of `table` rather than `block` is only necessary if using 116 | * `:before` to contain the top-margins of child elements. 117 | */ 118 | 119 | @mixin clearfix{ 120 | 121 | &:before, 122 | &:after { 123 | content: " "; /* 1 */ 124 | display: table; /* 2 */ 125 | } 126 | 127 | &:after { 128 | clear: both; 129 | } 130 | 131 | /* 132 | * For IE 6/7 only 133 | * Include this rule to trigger hasLayout and contain floats. 134 | */ 135 | *zoom: 1; 136 | } 137 | %clearfix { @include clearfix(); } 138 | 139 | @mixin breakpoint($point){ 140 | @if $point == mobile { 141 | @media (max-width: $mobile) {@content;} 142 | } 143 | 144 | @if $point == tablet { 145 | @media (max-width: $tablet) {@content;} 146 | } 147 | } 148 | 149 | 150 | @mixin scrollbar($bg-color, $scrollbar-width, $thumb-color){ 151 | 152 | &::-webkit-scrollbar-track{ 153 | background-color: $bg-color; 154 | } 155 | &::-webkit-scrollbar{ 156 | width: $scrollbar-width; 157 | background-color: $bg-color; 158 | } 159 | &::-webkit-scrollbar-thumb{ 160 | background-color: $thumb-color; 161 | } 162 | &::-moz-scrollbar-track{ 163 | background-color: $bg-color; 164 | } 165 | &::-moz-scrollbar{ 166 | width: $scrollbar-width; 167 | background-color: $bg-color; 168 | } 169 | &::-moz-scrollbar-thumb{ 170 | background-color: $thumb-color; 171 | } 172 | 173 | } 174 | -------------------------------------------------------------------------------- /labs/wen/04/src/shaders/post.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | void main(void) { 4 | gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); 5 | } -------------------------------------------------------------------------------- /labs/wen/04/src/shaders/sphere.frag: -------------------------------------------------------------------------------- 1 | // sphere.frag 2 | 3 | precision highp float; 4 | 5 | uniform vec3 eye; 6 | uniform sampler2D texture; 7 | 8 | varying vec3 vNormal; 9 | varying vec3 vVertex; 10 | 11 | 12 | const int NUM_PARTICLES = {{NUM_PARTICLES}}; 13 | uniform vec3 particles[NUM_PARTICLES]; 14 | uniform vec3 colors[NUM_PARTICLES]; 15 | 16 | vec3 diffuse(vec3 normal, vec3 light, vec3 color) { 17 | vec3 L = normalize(light); 18 | float lambert = max(dot(normal, L), 0.0); 19 | return color * lambert; 20 | } 21 | 22 | 23 | vec3 diffuse(vec3 normal, vec3 light, vec3 pos, vec3 color) { 24 | vec3 dirToLight = light - pos; 25 | return diffuse(normal, dirToLight, color); 26 | } 27 | 28 | 29 | vec3 specular(vec3 normal, vec3 light, vec3 eye, vec3 vertex, vec3 color, float shiness) { 30 | vec3 dirLight = normalize(light - vertex); 31 | vec3 dirEye = normalize(eye - vertex); 32 | vec3 lightReflect = normalize(reflect(-dirLight, normal)); 33 | float lambert = max(dot(dirEye, lightReflect), 0.0); 34 | return pow(lambert, shiness) * color; 35 | } 36 | 37 | vec3 specular(vec3 normal, vec3 light, vec3 eye, vec3 vertex, vec3 color) { 38 | return specular(normal, light, eye, vertex, color, 40.0); 39 | } 40 | 41 | float exponentialIn(float t) { 42 | return t == 0.0 ? t : pow(2.0, 10.0 * (t - 1.0)); 43 | } 44 | 45 | float exponentialOut(float t) { 46 | return t == 1.0 ? t : 1.0 - pow(2.0, -10.0 * t); 47 | } 48 | 49 | 50 | const vec3 lightPos0 = vec3(105.0); 51 | const vec3 lightColor0 = vec3(1.0, 1.0, .96); 52 | const float lightWeight0 = .35; 53 | 54 | const vec3 lightPos1 = vec3(-195.0, -195.0, 0.0); 55 | const vec3 lightColor1 = vec3(.96, .96, 1.0); 56 | const float lightWeight1 = .25; 57 | 58 | const vec3 color0 = vec3(19.0, 19.0, 28.0)/255.0; 59 | const vec3 color1 = vec3(1.0); 60 | 61 | void main(void) { 62 | 63 | vec3 diff0 = diffuse(vNormal, lightPos0, vVertex, lightColor0) * lightWeight0; 64 | vec3 diff1 = diffuse(vNormal, lightPos1, vVertex, lightColor1) * lightWeight1; 65 | 66 | vec3 lightParticle = vec3(.0); 67 | float minRadius = 250.0; 68 | float lightWeight = .15; 69 | for(int i=0; i 2 | 3 | 4 | Gulp - Template 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /labs/wen/05/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var browserSync = require('browser-sync').create(); 5 | var browserify = require('browserify'); 6 | var source = require('vinyl-source-stream2') 7 | var uglify = require('gulp-uglify'); 8 | var sass = require('gulp-ruby-sass'); 9 | var prefix = require('gulp-autoprefixer'); 10 | var watchify = require('watchify'); 11 | var buffer = require('vinyl-buffer'); 12 | var reload = browserSync.reload; 13 | 14 | 15 | var bundler = watchify(browserify('./src/js/app.js', watchify.args)); 16 | gulp.task('browserify', bundle); 17 | 18 | bundler.on('update', bundle); 19 | 20 | function logError(msg) { 21 | console.log( msg.toString() ); 22 | } 23 | 24 | function bundle() { 25 | var b = bundler.bundle() 26 | .on('error', logError) 27 | .pipe(source('bundle.js')) 28 | .pipe(buffer()) 29 | .pipe(gulp.dest('./dist/bundle/')) 30 | .pipe(reload({stream: true, once: true})); 31 | 32 | return b; 33 | } 34 | 35 | gulp.task('watch', function() { 36 | gulp.watch('./src/scss/*.scss', ['sass']); 37 | }); 38 | 39 | 40 | gulp.task('sass', function() { 41 | return sass('./src/scss/main.scss') 42 | .on('error', function (err) { 43 | console.error('Error!', err.message); 44 | }) 45 | .pipe(prefix({ 46 | browsers: ['last 2 versions'], 47 | cascade: false 48 | })) 49 | .pipe(gulp.dest('./dist/css')) 50 | .pipe(reload({stream:true})); 51 | }); 52 | 53 | gulp.task('browser-sync', function() { 54 | browserSync.init({ 55 | browser: 'google chrome', 56 | server: { 57 | baseDir: './dist/' 58 | }, 59 | files: [ 60 | './dist/js/bundle.js', 61 | './dist/css/main.css', 62 | './dist/index.html' 63 | ], 64 | // open: false, 65 | // port: '8000', 66 | reloadDebounce: 500 67 | }); 68 | }); 69 | 70 | gulp.task('default', ['browserify', 'sass', 'browser-sync', 'watch']); 71 | -------------------------------------------------------------------------------- /labs/wen/05/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "GulpTemplate", 3 | "version": "0.0.0", 4 | "author": "Yi-Wen Lin", 5 | "devDependencies": { 6 | "browser-sync": "^2.6.5", 7 | "browserify": "^10.2.0", 8 | "vinyl-source-stream2": "0.1.1", 9 | "gulp-uglify": "1.1.0", 10 | "gulp-ruby-sass": "1.0.0-alpha.3", 11 | "gulp-autoprefixer": "2.1.0", 12 | "glslify": "2.1.2", 13 | "vinyl-buffer": "^1.0.0", 14 | "watchify": "^3.2.0", 15 | "dat-gui": "0.5.0", 16 | "gulp": "3.8.11" 17 | }, 18 | "scripts": { 19 | "build": "gulp", 20 | "compile": "gulp compile", 21 | "watch": "gulp watch" 22 | }, 23 | "browserify": { 24 | "transform": [ 25 | "glslify" 26 | ] 27 | } 28 | } -------------------------------------------------------------------------------- /labs/wen/05/src/js/SceneApp.js: -------------------------------------------------------------------------------- 1 | // SceneApp.js 2 | 3 | var GL = bongiovi.GL, gl; 4 | var ViewNoise = require("./ViewNoise"); 5 | var ViewNormal = require("./ViewNormal"); 6 | var ViewBelt = require("./ViewBelt"); 7 | var ViewPlane = require('./ViewPlane'); 8 | 9 | function SceneApp() { 10 | gl = GL.gl; 11 | bongiovi.Scene.call(this); 12 | 13 | this.camera._rx.value = -.5; 14 | this.camera._ry.value = .3; 15 | 16 | this.sceneRotation.lock(true); 17 | this.camera.lockRotation(false); 18 | 19 | window.addEventListener("resize", this.resize.bind(this)); 20 | } 21 | 22 | 23 | var p = SceneApp.prototype = new bongiovi.Scene(); 24 | 25 | p._initTextures = function() { 26 | console.log('Init Textures'); 27 | 28 | var noiseSize = 256; 29 | this.fboNoise = new bongiovi.FrameBuffer(noiseSize, noiseSize); 30 | this.fboNormal = new bongiovi.FrameBuffer(noiseSize, noiseSize); 31 | }; 32 | 33 | p._initViews = function() { 34 | console.log('Init Views'); 35 | this._vAxis = new bongiovi.ViewAxis(); 36 | this._vDotPlane = new bongiovi.ViewDotPlane(); 37 | this._vNoise = new ViewNoise(); 38 | this._vNormal = new ViewNormal(); 39 | this._vCopy = new bongiovi.ViewCopy(); 40 | this._vBelt = new ViewBelt(); 41 | this._vPlane = new ViewPlane(); 42 | }; 43 | 44 | p.render = function() { 45 | GL.clear(0, 0, 0, 0); 46 | 47 | GL.setMatrices(this.cameraOrtho); 48 | GL.rotate(this.rotationFront); 49 | 50 | GL.setViewport(0, 0, this.fboNoise.width, this.fboNoise.height); 51 | this.fboNoise.bind(); 52 | GL.clear(0, 0, 0, 0); 53 | this._vNoise.render(); 54 | this.fboNoise.unbind(); 55 | 56 | this.fboNormal.bind(); 57 | GL.clear(0, 0, 0, 0); 58 | this._vNormal.render(this.fboNoise.getTexture()); 59 | this.fboNormal.unbind(); 60 | GL.setViewport(0, 0, 256, 256); 61 | // this._vCopy.render(this.fboNoise.getTexture()); 62 | GL.setViewport(0, 270, 256, 256); 63 | // this._vCopy.render(this.fboNormal.getTexture()); 64 | 65 | 66 | GL.setViewport(0, 0, GL.width, GL.height); 67 | GL.setMatrices(this.camera); 68 | GL.rotate(this.sceneRotation.matrix); 69 | // this._vAxis.render(); 70 | this._vDotPlane.render(); 71 | 72 | var totalWidth = params.numBelts * params.beltWidth; 73 | 74 | for(var i=0; i 0 { 32 | padding: $pad; 33 | } 34 | @media (#{-webkit-min-device-pixel-ratio}: #{1.6}), (#{min--moz-device-pixel-ratio}: #{1.6}), (#{-o-min-device-pixel-ratio}: #{3 / 2}), (#{min-device-pixel-ratio}: #{1.6}) { 35 | & { 36 | $pos: sprite-position($sprites2x, $name, -$pad * 2, -$pad * 2); 37 | background-image: sprite-url($sprites2x); 38 | background-position: nth($pos, 1) nth($pos, 2) / 2; 39 | @include background-size(ceil(image-width(sprite-path($sprites2x)) / 2), auto); 40 | // ^-- this is the "smarter" way to do this. 41 | // sprite-path() returns the path of the generated sprite sheet, which 42 | // image-width() calculates the width of. the ceil() is in place in case 43 | // you have sprites that have an odd-number of pixels in width (which 44 | // you shouldn't in the first place) 45 | 46 | } 47 | } 48 | } 49 | 50 | @mixin sprite-centered($name){ 51 | margin-top: (image-height(sprite-file($sprites, $name))/-2); 52 | margin-left: (image-width(sprite-file($sprites, $name))/-2); 53 | position: absolute; 54 | top: 50%; 55 | left: 50%; 56 | @media (#{-webkit-min-device-pixel-ratio}: #{1.6}), (#{min--moz-device-pixel-ratio}: #{1.6}), (#{-o-min-device-pixel-ratio}: #{3 / 2}), (#{min-device-pixel-ratio}: #{1.6}) { 57 | & { 58 | margin-top: (image-height(sprite-file($sprites2x, $name))/-2); 59 | margin-left: (image-height(sprite-file($sprites2x, $name))/-2); 60 | position: absolute; 61 | top: 50%; 62 | left: 50%; 63 | } 64 | } 65 | } 66 | 67 | @mixin absPositionMaximumSize{ 68 | position: absolute; 69 | top:0px; 70 | left:0px; 71 | width:100%; 72 | height:100%; 73 | } 74 | 75 | @mixin absCenteredVertical($height){ 76 | position: absolute; 77 | top:50%; 78 | margin-top:($height / -2); 79 | height:$height; 80 | } 81 | 82 | @mixin absCenteredHorizontal($width){ 83 | position: absolute; 84 | left:50%; 85 | margin-left:($width / -2); 86 | width:$width; 87 | } 88 | 89 | @mixin absCentered($height, $width){ 90 | position: absolute; 91 | top:50%; 92 | left:50%; 93 | margin-left:($width / -2); 94 | margin-top:($height / -2); 95 | width:$width; 96 | height:$height; 97 | } 98 | 99 | @mixin clear-floats{ 100 | content: "."; 101 | visibility: hidden; 102 | display: block; 103 | height: 0; 104 | clear: both; 105 | } 106 | 107 | /* 108 | * Clearfix: contain floats 109 | * 110 | * For modern browsers 111 | * 1. The space content is one way to avoid an Opera bug when the 112 | * `contenteditable` attribute is included anywhere else in the document. 113 | * Otherwise it causes space to appear at the top and bottom of elements 114 | * that receive the `clearfix` class. 115 | * 2. The use of `table` rather than `block` is only necessary if using 116 | * `:before` to contain the top-margins of child elements. 117 | */ 118 | 119 | @mixin clearfix{ 120 | 121 | &:before, 122 | &:after { 123 | content: " "; /* 1 */ 124 | display: table; /* 2 */ 125 | } 126 | 127 | &:after { 128 | clear: both; 129 | } 130 | 131 | /* 132 | * For IE 6/7 only 133 | * Include this rule to trigger hasLayout and contain floats. 134 | */ 135 | *zoom: 1; 136 | } 137 | %clearfix { @include clearfix(); } 138 | 139 | @mixin breakpoint($point){ 140 | @if $point == mobile { 141 | @media (max-width: $mobile) {@content;} 142 | } 143 | 144 | @if $point == tablet { 145 | @media (max-width: $tablet) {@content;} 146 | } 147 | } 148 | 149 | 150 | @mixin scrollbar($bg-color, $scrollbar-width, $thumb-color){ 151 | 152 | &::-webkit-scrollbar-track{ 153 | background-color: $bg-color; 154 | } 155 | &::-webkit-scrollbar{ 156 | width: $scrollbar-width; 157 | background-color: $bg-color; 158 | } 159 | &::-webkit-scrollbar-thumb{ 160 | background-color: $thumb-color; 161 | } 162 | &::-moz-scrollbar-track{ 163 | background-color: $bg-color; 164 | } 165 | &::-moz-scrollbar{ 166 | width: $scrollbar-width; 167 | background-color: $bg-color; 168 | } 169 | &::-moz-scrollbar-thumb{ 170 | background-color: $thumb-color; 171 | } 172 | 173 | } 174 | -------------------------------------------------------------------------------- /labs/wen/05/src/shaders/belt.frag: -------------------------------------------------------------------------------- 1 | // belt.frag 2 | 3 | #define SHADER_NAME SIMPLE_TEXTURE 4 | 5 | precision highp float; 6 | varying vec2 vTextureCoord; 7 | varying vec3 vNormal; 8 | varying vec3 vVertex; 9 | 10 | vec3 diffuse(vec3 normal, vec3 light, vec3 color) { 11 | vec3 L = normalize(light); 12 | float lambert = max(dot(normal, L), 0.0); 13 | return color * lambert; 14 | } 15 | 16 | 17 | vec3 diffuse(vec3 normal, vec3 light, vec3 pos, vec3 color) { 18 | vec3 dirToLight = light - pos; 19 | return diffuse(normal, dirToLight, color); 20 | } 21 | 22 | 23 | const float ambient = .2; 24 | 25 | const vec3 lightPos0 = vec3(150.0*2.0, 300.0*2.0, 0.0); 26 | const vec3 lightColor0 = vec3(1.0, 1.0, .96); 27 | const float lightWeight0 = 1.00; 28 | 29 | const vec3 lightPos1 = vec3(-295.0, 0.0, -295.0); 30 | const vec3 lightColor1 = vec3(.96, .96, 1.0); 31 | const float lightWeight1 = .0; 32 | 33 | const vec3 lightPos2 = vec3(0.0, 195.0, 0.0); 34 | const vec3 lightColor2 = vec3(1.0); 35 | const float lightWeight2 = .0; 36 | 37 | void main(void) { 38 | vec3 diff0 = diffuse(vNormal, lightPos0, vVertex, lightColor0) * lightWeight0; 39 | vec3 diff1 = diffuse(vNormal, lightPos1, vVertex, lightColor1) * lightWeight1; 40 | vec3 diff2 = diffuse(vNormal, lightPos2, vVertex, lightColor2) * lightWeight2; 41 | 42 | vec3 color = vec3(ambient) + diff0 + diff1 + diff2; 43 | 44 | gl_FragColor = vec4(color, 1.0); 45 | } -------------------------------------------------------------------------------- /labs/wen/05/src/shaders/belt.vert: -------------------------------------------------------------------------------- 1 | // belt.vert 2 | 3 | #define SHADER_NAME BASIC_VERTEX 4 | 5 | precision highp float; 6 | attribute vec3 aVertexPosition; 7 | attribute vec2 aTextureCoord; 8 | 9 | uniform mat4 uMVMatrix; 10 | uniform mat4 uPMatrix; 11 | 12 | uniform sampler2D textureHeight; 13 | uniform sampler2D textureNormal; 14 | uniform float uvy; 15 | uniform float height; 16 | uniform vec3 position; 17 | 18 | varying vec2 vTextureCoord; 19 | varying vec3 vNormal; 20 | varying vec3 vVertex; 21 | 22 | void main(void) { 23 | vec3 pos = aVertexPosition; 24 | vec2 uv = vec2(aTextureCoord.x, uvy); 25 | float h = texture2D(textureHeight, uv).r; 26 | pos.y = h * height + 50.0; 27 | pos += position; 28 | vNormal = texture2D(textureNormal, uv).rgb * 2.0 - 1.0; 29 | 30 | gl_Position = uPMatrix * uMVMatrix * vec4(pos, 1.0); 31 | vTextureCoord = aTextureCoord; 32 | vVertex = pos; 33 | } -------------------------------------------------------------------------------- /labs/wen/05/src/shaders/noise.frag: -------------------------------------------------------------------------------- 1 | // noise.frag 2 | 3 | #define SHADER_NAME SIMPLE_TEXTURE 4 | 5 | precision highp float; 6 | varying vec2 vTextureCoord; 7 | 8 | vec4 permute(vec4 x) { return mod(((x*34.00)+1.00)*x, 289.00); } 9 | vec4 taylorInvSqrt(vec4 r) { return 1.79 - 0.85 * r; } 10 | 11 | float snoise(vec3 v){ 12 | const vec2 C = vec2(1.00/6.00, 1.00/3.00) ; 13 | const vec4 D = vec4(0.00, 0.50, 1.00, 2.00); 14 | 15 | vec3 i = floor(v + dot(v, C.yyy) ); 16 | vec3 x0 = v - i + dot(i, C.xxx) ; 17 | 18 | vec3 g = step(x0.yzx, x0.xyz); 19 | vec3 l = 1.00 - g; 20 | vec3 i1 = min( g.xyz, l.zxy ); 21 | vec3 i2 = max( g.xyz, l.zxy ); 22 | 23 | vec3 x1 = x0 - i1 + 1.00 * C.xxx; 24 | vec3 x2 = x0 - i2 + 2.00 * C.xxx; 25 | vec3 x3 = x0 - 1. + 3.00 * C.xxx; 26 | 27 | i = mod(i, 289.00 ); 28 | vec4 p = permute( permute( permute( i.z + vec4(0.00, i1.z, i2.z, 1.00 )) + i.y + vec4(0.00, i1.y, i2.y, 1.00 )) + i.x + vec4(0.00, i1.x, i2.x, 1.00 )); 29 | 30 | float n_ = 1.00/7.00; 31 | vec3 ns = n_ * D.wyz - D.xzx; 32 | 33 | vec4 j = p - 49.00 * floor(p * ns.z *ns.z); 34 | 35 | vec4 x_ = floor(j * ns.z); 36 | vec4 y_ = floor(j - 7.00 * x_ ); 37 | 38 | vec4 x = x_ *ns.x + ns.yyyy; 39 | vec4 y = y_ *ns.x + ns.yyyy; 40 | vec4 h = 1.00 - abs(x) - abs(y); 41 | 42 | vec4 b0 = vec4( x.xy, y.xy ); 43 | vec4 b1 = vec4( x.zw, y.zw ); 44 | 45 | vec4 s0 = floor(b0)*2.00 + 1.00; 46 | vec4 s1 = floor(b1)*2.00 + 1.00; 47 | vec4 sh = -step(h, vec4(0.00)); 48 | 49 | vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ; 50 | vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ; 51 | 52 | vec3 p0 = vec3(a0.xy,h.x); 53 | vec3 p1 = vec3(a0.zw,h.y); 54 | vec3 p2 = vec3(a1.xy,h.z); 55 | vec3 p3 = vec3(a1.zw,h.w); 56 | 57 | vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); 58 | p0 *= norm.x; 59 | p1 *= norm.y; 60 | p2 *= norm.z; 61 | p3 *= norm.w; 62 | 63 | vec4 m = max(0.60 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.00); 64 | m = m * m; 65 | return 42.00 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) ); 66 | } 67 | 68 | float snoise(float x, float y, float z){ 69 | return snoise(vec3(x, y, z)); 70 | } 71 | 72 | uniform float time; 73 | const float PI = 3.141592657; 74 | 75 | void main(void) { 76 | vec2 uv = vTextureCoord * 1.1; 77 | float grey = snoise(uv.x, uv.y - time, cos(time)) * .5 + .5; 78 | grey *= sin(vTextureCoord.x * PI); 79 | grey *= sin(vTextureCoord.y * PI); 80 | grey = pow(grey, 2.5); 81 | gl_FragColor = vec4(vec3(grey), 1.0); 82 | } -------------------------------------------------------------------------------- /labs/wen/05/src/shaders/normal.frag: -------------------------------------------------------------------------------- 1 | // normal.frag 2 | 3 | #define SHADER_NAME SIMPLE_TEXTURE 4 | 5 | precision highp float; 6 | varying vec2 vTextureCoord; 7 | uniform sampler2D texture; 8 | 9 | const float gap = 0.01; 10 | const float hOffset = .1; 11 | 12 | void main(void) { 13 | vec2 uv = vTextureCoord; 14 | vec2 uvRight = uv + vec2(gap, 0.0); 15 | vec2 uvBottom = uv + vec2(0.0, gap); 16 | float h = texture2D(texture, uv).r; 17 | float hRight = texture2D(texture, uvRight).r; 18 | float hBottom = texture2D(texture, uvBottom).r; 19 | 20 | vec3 pCurr = vec3(0.0, h, 0.0); 21 | vec3 pRight = vec3(gap, hRight, 0.0); 22 | vec3 pBottom = vec3(0.0, hBottom, gap); 23 | 24 | vec3 vRight = pRight - pCurr; 25 | vec3 vBottom = pBottom - pCurr; 26 | vec3 normal = cross(vBottom, vRight); 27 | // vec3 normal = cross(vRight, vBottom); 28 | normal = normalize(normal) * .5 + .5; 29 | 30 | 31 | gl_FragColor = vec4(normal, 1.0); 32 | } -------------------------------------------------------------------------------- /labs/wen/05/src/shaders/plane.frag: -------------------------------------------------------------------------------- 1 | // plane.frag 2 | #define SHADER_NAME SIMPLE_TEXTURE 3 | 4 | precision highp float; 5 | varying vec3 vNormal; 6 | varying vec3 vVertex; 7 | 8 | vec3 diffuse(vec3 normal, vec3 light, vec3 color) { 9 | vec3 L = normalize(light); 10 | float lambert = max(dot(normal, L), 0.0); 11 | return color * lambert; 12 | } 13 | 14 | 15 | vec3 diffuse(vec3 normal, vec3 light, vec3 pos, vec3 color) { 16 | vec3 dirToLight = light - pos; 17 | return diffuse(normal, dirToLight, color); 18 | } 19 | 20 | const float ambient = .2; 21 | 22 | const vec3 lightPos0 = vec3(150.0*2.0, 300.0*2.0, 0.0); 23 | const vec3 lightColor0 = vec3(1.0, 1.0, .96); 24 | const float lightWeight0 = 1.00; 25 | 26 | const vec3 lightPos1 = vec3(-295.0, 0.0, -295.0); 27 | const vec3 lightColor1 = vec3(.96, .96, 1.0); 28 | const float lightWeight1 = .0; 29 | 30 | const vec3 lightPos2 = vec3(0.0, 195.0, 0.0); 31 | const vec3 lightColor2 = vec3(1.0); 32 | const float lightWeight2 = .0; 33 | 34 | void main(void) { 35 | vec3 diff0 = diffuse(vNormal, lightPos0, vVertex, lightColor0) * lightWeight0; 36 | vec3 diff1 = diffuse(vNormal, lightPos1, vVertex, lightColor1) * lightWeight1; 37 | vec3 diff2 = diffuse(vNormal, lightPos2, vVertex, lightColor2) * lightWeight2; 38 | 39 | vec3 color = vec3(ambient) + diff0 + diff1 + diff2; 40 | gl_FragColor = vec4(color, 1.0); 41 | } -------------------------------------------------------------------------------- /labs/wen/05/src/shaders/plane.vert: -------------------------------------------------------------------------------- 1 | // plane.vert 2 | 3 | #define SHADER_NAME BASIC_VERTEX 4 | 5 | precision highp float; 6 | attribute vec3 aVertexPosition; 7 | attribute vec2 aTextureCoord; 8 | attribute vec3 aNormal; 9 | 10 | uniform mat4 uMVMatrix; 11 | uniform mat4 uPMatrix; 12 | uniform vec3 position; 13 | 14 | varying vec2 vTextureCoord; 15 | varying vec3 vNormal; 16 | varying vec3 vVertex; 17 | 18 | void main(void) { 19 | vec3 pos = aVertexPosition + position; 20 | gl_Position = uPMatrix * uMVMatrix * vec4(pos, 1.0); 21 | vTextureCoord = aTextureCoord; 22 | 23 | vNormal = normalize(aNormal); 24 | vVertex = pos; 25 | } -------------------------------------------------------------------------------- /labs/wen/05/src/shaders/post.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | void main(void) { 4 | gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); 5 | } --------------------------------------------------------------------------------