diff --git a/00/index.html b/00/index.html index 9914748..1132c6e 100644 --- a/00/index.html +++ b/00/index.html @@ -36,7 +36,7 @@ - +
diff --git a/01/index.html b/01/index.html index 65a58e6..8771fbe 100644 --- a/01/index.html +++ b/01/index.html @@ -37,7 +37,7 @@ - + diff --git a/02/index.html b/02/index.html index e95b730..01128f0 100644 --- a/02/index.html +++ b/02/index.html @@ -37,7 +37,7 @@ - + diff --git a/03/index.html b/03/index.html index 2681e7a..ac21e11 100644 --- a/03/index.html +++ b/03/index.html @@ -37,7 +37,7 @@ - + diff --git a/04/index.html b/04/index.html index 2981cee..8928b50 100644 --- a/04/index.html +++ b/04/index.html @@ -36,7 +36,7 @@ - + diff --git a/05/index.html b/05/index.html index e3119d2..90792a0 100644 --- a/05/index.html +++ b/05/index.html @@ -36,7 +36,7 @@ - + diff --git a/06/index.html b/06/index.html index 977109b..d2f06c7 100644 --- a/06/index.html +++ b/06/index.html @@ -35,7 +35,7 @@ - + diff --git a/07/index.html b/07/index.html index ae90785..7511ecd 100644 --- a/07/index.html +++ b/07/index.html @@ -37,7 +37,7 @@ - + diff --git a/08/index.html b/08/index.html index 0d6d2bb..fb52af0 100644 --- a/08/index.html +++ b/08/index.html @@ -37,7 +37,7 @@ - + diff --git a/09/README.md b/09/README.md index 281bf04..90b5e43 100644 --- a/09/README.md +++ b/09/README.md @@ -60,17 +60,17 @@ As a first step we need to know if the row of our thread is an even or odd numbe ____we have to fix these next two paragraphs together____ -For that we are going to use ```fract()``` again but with the coordinates at the double of space. Take a look to the folowing formula and how it looks like. +For that we are going to use [```mod()```](../glossary/index.html#mod.md) of ```2.0``` and then see if the result is under ```1.0``` or not. Take a look to the folowing formula and uncomment the two last lines. - + -By multiplying *x* by a half the space coordinate duplicate it size (which is the oposite of what we have been doing where we multiply the ```st``` and the space got shrinked). Let's say we are in position 1.0 (not even) we divide by two will be 0.5, while if the position was 2.0 (even) we devide by two the result will be 1.0. For values over 2.0, ```fract()``` will wrap them up and start again and again. This means the return value of this function will give numbers bellow 0.5 for not even numbers and above 0.5 for even. Isn't this super help full? +As you can see we can use a [ternary operator](https://en.wikipedia.org/wiki/%3F:) to check if the [```mod()```](../glossary/index.html#mod.md) of ```2.0``` is under ```1.0``` (second line) or similarly we can use a [```step()```](../glossary/index.html#step.md) function which does that the same operation, but faster. Why? Althogh is hard to know how each graphic card optimize and compiles the code is safe to assume that built-ins functions are faster than non-built-in one. Everytime you can use one, use it! -____fix the previous two paragraphs with Jen____ +So now we have our even number formula we can apply some offset to odd rows to give a *brick* effect to our tiles. Check lines 14 the following code, there we are using the function we just describe "detect odd" rows and give them an offset on ```x``` of half of unit. Note that by multipling by ```0.0``` even will make the offset similiar to ```0.0``` so we don't add any offset. But on odd rows we multipliy the result of our function (```1.0```) to the offset of ```0.5``` to the ```x``` axis of the coordinate system. -Now we can apply some offset to odd rows to give a *brick* effect to our tiles. Check lines 14 and 15 of the following code, there we are using the function we just describe together with an ```if``` statement to detect even rows and give them an offset on ```x``` of half a space. - -Note also that uncommenting line 34 will streach the aspect ration of the coordinate system to mimic the aspect of a "modern brick". As we did before by uncomenting line 42 you can see how the coordinate system looks maped on RED and GREEN. +Now try uncommenting line 32, this will streach the aspect ration of the coordinate system to mimic the aspect of a "modern brick". As we did before by uncomenting line 40 you can see how the coordinate system looks maped on RED and GREEN. @@ -98,7 +98,7 @@ Pay close attention to the function ```rotateTilePattern()```, which subdivides -* Comment, uncomment and duplicate lines 73 to 76 to compose new designs. +* Comment, uncomment and duplicate lines 69 to 72 to compose new designs. * Change the black and white triangle for other element like: half cicles, rotated squares or lines. diff --git a/09/bricks.frag b/09/bricks.frag index aefc9b1..2781a6b 100644 --- a/09/bricks.frag +++ b/09/bricks.frag @@ -11,9 +11,7 @@ vec2 brickTile(vec2 _st, float _zoom){ _st *= _zoom; // Here is where the offset is happening - if (fract(_st.y * 0.5) > 0.5){ - _st.x += 0.5; - } + _st.x += step(1., mod(_st.y,2.0)) * 0.5; return fract(_st); } diff --git a/09/index.html b/09/index.html index 04e3f59..a4f1442 100644 --- a/09/index.html +++ b/09/index.html @@ -37,7 +37,7 @@ - + diff --git a/09/truchet.frag b/09/truchet.frag index bf9fa4b..dba47f3 100644 --- a/09/truchet.frag +++ b/09/truchet.frag @@ -30,12 +30,8 @@ vec2 rotateTilePattern(vec2 _st){ // Give to each cell a index number // acording to their position float index = 0.0; - if (fract(_st.x * 0.5) > 0.5){ - index += 1.0; - } - if (fract(_st.y * 0.5) > 0.5){ - index += 2.0; - } + index += step(1., mod(_st.x,2.0)); + index += step(1., mod(_st.y,2.0))*2.0; // | // 0 | 1 diff --git a/10/index.html b/10/index.html index ccf1bcf..85a661c 100644 --- a/10/index.html +++ b/10/index.html @@ -37,7 +37,7 @@ - + diff --git a/11/index.html b/11/index.html index efcf64a..1346fac 100644 --- a/11/index.html +++ b/11/index.html @@ -37,7 +37,7 @@ - + diff --git a/12/index.html b/12/index.html index 8da0af8..3dbe4a1 100644 --- a/12/index.html +++ b/12/index.html @@ -37,7 +37,7 @@ - + diff --git a/14/index.html b/14/index.html index 53e44a7..9f0a9ac 100644 --- a/14/index.html +++ b/14/index.html @@ -37,7 +37,7 @@ - + diff --git a/15/index.html b/15/index.html index 53e44a7..9f0a9ac 100644 --- a/15/index.html +++ b/15/index.html @@ -37,7 +37,7 @@ - + diff --git a/16/index.html b/16/index.html index 53e44a7..9f0a9ac 100644 --- a/16/index.html +++ b/16/index.html @@ -37,7 +37,7 @@ - + diff --git a/17/index.html b/17/index.html index 53e44a7..9f0a9ac 100644 --- a/17/index.html +++ b/17/index.html @@ -37,7 +37,7 @@ - + diff --git a/appendix/index.html b/appendix/index.html index 48de43a..29f8da1 100644 --- a/appendix/index.html +++ b/appendix/index.html @@ -37,7 +37,7 @@ - + diff --git a/edit.html b/edit.html index fa6c489..0f2f360 100644 --- a/edit.html +++ b/edit.html @@ -26,7 +26,7 @@ - + diff --git a/src/glslCanvas.js b/src/glslCanvas.js deleted file mode 100644 index 75d5e85..0000000 --- a/src/glslCanvas.js +++ /dev/null @@ -1,535 +0,0 @@ -/* -The MIT License (MIT) - -Copyright (c) 2015 Patricio Gonzalez Vivo ( http://www.patriciogonzalezvivo.com ) - -Permission is hereby granted, free of charge, to any person obtaining a copy of -this software and associated documentation files (the "Software"), to deal in -the Software without restriction, including without limitation the rights to -use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of -the Software, and to permit persons to whom the Software is furnished to do so, -subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS -FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR -COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER -IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN -CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -*/ - -var timeLoad = Date.now(); -var mouse = {x: 0, y: 0}; -var billboards = []; - -function isCanvasVisible(_canvas){ - return ((_canvas.getBoundingClientRect().top + _canvas.height) > 0) && - (_canvas.getBoundingClientRect().top < (window.innerHeight || document.documentElement.clientHeight)); -} - -function isPowerOf2(value) { - return (value & (value - 1)) == 0; -}; - -function nextHighestPowerOfTwo(x) { - --x; - for (var i = 1; i < 32; i <<= 1) { - x = x | x >> i; - } - return x + 1; -} - -function loadTexture(_gl, _texture) { - _gl.bindTexture(_gl.TEXTURE_2D, _texture); - _gl.pixelStorei(_gl.UNPACK_FLIP_Y_WEBGL, true); - _gl.texImage2D(_gl.TEXTURE_2D, 0, _gl.RGBA, _gl.RGBA, _gl.UNSIGNED_BYTE, _texture.image); - if (isPowerOf2(_texture.image.width) && isPowerOf2(_texture.image.height) ) { - _gl.generateMipmap(_gl.TEXTURE_2D); - _gl.texParameteri(_gl.TEXTURE_2D, _gl.TEXTURE_MAG_FILTER, _gl.LINEAR); - _gl.texParameteri(_gl.TEXTURE_2D, _gl.TEXTURE_MIN_FILTER, _gl.LINEAR_MIPMAP_LINEAR); - } else { - _gl.texParameteri(_gl.TEXTURE_2D, _gl.TEXTURE_WRAP_S, _gl.CLAMP_TO_EDGE); - _gl.texParameteri(_gl.TEXTURE_2D, _gl.TEXTURE_WRAP_T, _gl.CLAMP_TO_EDGE); - _gl.texParameteri(_gl.TEXTURE_2D, _gl.TEXTURE_MIN_FILTER, _gl.LINEAR); - } - _gl.bindTexture(_gl.TEXTURE_2D, null); -} - -function getMousePos(_canvas, _evt) { - var rect = _canvas.getBoundingClientRect(); - return { - x: _evt.clientX - rect.left, - y: _evt.clientY - rect.top - }; -} - -function loadShaders() { - var list = document.getElementsByTagName("canvas"); - - // Load canvas and WebGLContexta - for(var i = 0; i < list.length; i++){ - - var shaderSrc = { vertURL: null, vertSTR: null, - fragURL: null, fragSTR: null}; - - if( list[i].hasAttribute("data-fragment") ){ - shaderSrc.fragSTR = list[i].getAttribute('data-fragment'); - } else if( list[i].hasAttribute("data-fragment-url") ){ - shaderSrc.fragURL = list[i].getAttribute('data-fragment-url'); - } else { - continue; - } - - var canvas = list[i]; - var gl; - - if( !billboards[i] || !billboards[i].gl){ - console.log("Creating WebGL context"); - gl = setupWebGL(list[i]); - } else { - gl = billboards[i].gl - } - - var shader = loadShader(gl, shaderSrc); - - if(!shader.program){ - if(billboards[i].program){ - shader.program = billboards[i].program; - } else { - billboards[i] = null; - return; - } - } else if ( billboards[i] && billboards[i].program ){ - billboards[i].gl.deleteProgram(billboards[i].program); - } - - var vbo = []; - if ( !billboards[i] || !billboards[i].vbo){ - console.log("Creating Vbo"); - - // Define UVS buffer - var uvs; - var texCoordLocation = gl.getAttribLocation(shader.program, "a_texcoord"); - uvs = gl.createBuffer(); - gl.bindBuffer( gl.ARRAY_BUFFER, uvs); - gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 0.0, 1.0, - 1.0, 0.0, - 1.0, 1.0]), gl.STATIC_DRAW); - gl.enableVertexAttribArray( texCoordLocation ); - gl.vertexAttribPointer( texCoordLocation, 2, gl.FLOAT, false, 0, 0); - vbo.push(uvs); - - // Define Vertex buffer - var vertices; - var positionLocation = gl.getAttribLocation(shader.program, "a_position"); - vertices = gl.createBuffer(); - gl.bindBuffer( gl.ARRAY_BUFFER, vertices); - gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([-1.0, -1.0, - 1.0, -1.0, - -1.0, 1.0, - -1.0, 1.0, - 1.0, -1.0, - 1.0, 1.0]), gl.STATIC_DRAW); - gl.enableVertexAttribArray( positionLocation ); - gl.vertexAttribPointer( positionLocation , 2, gl.FLOAT, false, 0, 0); - vbo.push(vertices); - } else { - vbo = billboards[i].vbo; - } - - // Clean texture - var textures = []; - - // Need to load textures - var bLoadTextures = list[i].hasAttribute('data-textures'); - if ( billboards[i] && billboards[i].textures && bLoadTextures){ - var nImages = canvas.getAttribute('data-textures').split(','); - - if (nImages.length === billboards[i].textures.length){ - bLoadTextures = false; - for(var j in nImages){ - if( billboards[i].textures[j].image.getAttribute("src") !== nImages[j] ){ - bLoadTextures = true; - break; - } - } - } - - if (!bLoadTextures){ - textures = billboards[i].textures; - } - } - - if( bLoadTextures ){ - // Clean the texture array - while(textures.length > 0) { - console.log("Deleting texture: " + (textures.length-1)); - gl.deleteTexture(textures[textures.length-1]); - textures.pop(); - } - - var imgList = list[i].getAttribute('data-textures').split(','); - for(var nImg in imgList){ - console.log("Loading texture: " + imgList[nImg]); - - textures.push(gl.createTexture()); - - gl.bindTexture(gl.TEXTURE_2D, textures[nImg]); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 255, 0, 255])); // red - - textures[nImg].image = new Image(); - textures[nImg].image.onload = function(_canvas,_gl,_program,_textures,_tex) { - return function() { - loadTexture(_gl, _tex); - render(_canvas, _gl, _program, _textures) - }; - }(canvas,gl,shader.program, textures, textures[nImg]); - textures[nImg].image.src = imgList[nImg]; - } - } - - // Assign canvas, gl context, shader, UV/Verts buffers and animate boolean to billboard - billboards[i] = { canvas: canvas, - gl: gl, - program: shader.program, - vbo: vbo, - textures: textures, - mouse: mouse, - animated: shader.animated }; - - renderShader( billboards[i] ); - } -} - -function renderShaders(){ - for(var i = 0; i < billboards.length; i++){ - // If there is something on the billboard - if( billboards[i] !== undefined ){ - if ( billboards[i].animated === true && - isCanvasVisible(billboards[i].canvas )){ - renderShader( billboards[i] ); - } - } - } - window.requestAnimFrame(renderShaders); -} - -/** - * Creates the HTLM for a failure message - * @param {string} canvasContainerId id of container of th - * canvas. - * @return {string} The html. - */ -var makeFailHTML = function(msg) { - return '' + - '| ' +
- ' ' +
- ' ' +
- '' + msg + ' ' +
- ' |