fixing some stuff

pull/14/head
Patricio Gonzalez Vivo 9 years ago
parent 1ec3f8ec24
commit 34826d6759

@ -48,7 +48,7 @@
<ul class="navigationBar" >
<li class="navigationBar" onclick="previusPage()">&lt; &lt; Previous</li>
<li class="navigationBar" onclick="homePage()"> Home </li>
<!-- <li class="navigationBar" onclick="nextPage()">Next &gt; &gt;</li> -->
<li class="navigationBar" onclick="nextPage()">Next &gt; &gt;</li>
</ul>
<footer>

@ -8,7 +8,7 @@ In this chapter we are going to apply what we've learned so far and repeat it al
*"The grid provides a framework within which human intuition and invention can operate and that it can subvert. Within the chaos of nature patterns provide a constrast and promise of order. From early patterns on pottery to geometric mosaics in Roman baths, people have long used grids to enhance their lives with decoration."* [*10 PRINT*, Mit Press, (2013)](http://10print.org/)
First let's remember the [```fract()```](http://www.shaderific.com/glsl-functions/#fractionalpart) function, which is in essence the modulo of one (```mod(x,1.0)```) because it returns the fractional part of a number. In other words, ```fract()``` returns the number after the floating point. Our normalized coordinate system variable (```st```) already goes from 0.0 to 1.0 so it doesn't make sense to do something like:
First let's remember the [```fract()```](../glossary/index.html#fract.md) function, which is in essence the modulo of one ([```mod(x,1.0)```](../glossary/index.html#mod.md)) because it returns the fractional part of a number. In other words, [```fract()```](../glossary/index.html#fract.md) returns the number after the floating point. Our normalized coordinate system variable (```st```) already goes from 0.0 to 1.0 so it doesn't make sense to do something like:
```glsl
void main(){
@ -22,11 +22,9 @@ void main(){
But if we scale the normalized coordinate system up - let's say by three - we will get three sequences of linear interpolations between 0-1: the first one between 0-1, the second one for the floating points between 1-2 and the third one for the floating points between 2-3.
____comment the code below with some comments about where the interpolation by three is happening____
<div class="codeAndCanvas" data="grid-making.frag"></div>
Now it's time to draw something on each subspace in the same way we did in previous chapters, by uncommenting line 25. Because we are multiplying equally in x and y the aspect ratio of the space doesn't change and shapes will be as expected.
Now it's time to draw something on each subspace in the same way we did in previous chapters, by uncommenting line 27. Because we are multiplying equally in x and y the aspect ratio of the space doesn't change and shapes will be as expected.
Try some of the following exercises to get a deeper understanding:
@ -40,11 +38,17 @@ Try some of the following exercises to get a deeper understanding:
Since each subdivision or cell is a smaller version of the normalized coordinate system we have already been using we can apply a matrix transformation to it in order to translate, rotate or scale the space inside.
____comment the code below with some comments about where the matrix transformations are happening____
<div class="codeAndCanvas" data="checks.frag"></div>
____maybe add some exercises here for the code above?____
* Think on intersting ways of animating this pattern. Think on color, on shapes and motion. Make three different animations.
* By composing diferent shapes recreate more complicated patterns
<a href="../edit.html#09/diamondtiles.frag"><canvas id="custom" class="canvas" data-fragment-url="diamondtiles.frag" width="520px" height="200px"></canvas></a>
* Combine different layers of patterns like this one to compose your own [Scottish Tartan Patterns](https://www.google.com/search?q=scottish+patterns+fabric&tbm=isch&tbo=u&source=univ&sa=X&ei=Y1aFVfmfD9P-yQTLuYCIDA&ved=0CB4QsAQ&biw=1399&bih=799#tbm=isch&q=Scottish+Tartans+Patterns).
[ ![Vector Pattern Scottish Tartan By Kavalenkava](tartan.jpg) ](http://graphicriver.net/item/vector-pattern-scottish-tartan/6590076)
### Offset patterns
@ -64,11 +68,7 @@ By multiplying *x* by a half the space coordinate duplicate it size (which is th
____fix the previous two paragraphs with Jen____
Now we can apply some offset to odd rows to give a *brick* effect to our tiles. Check line number 10 and 11 of the following code:
____check if lines 10 and 11 are still the right lines____
____comment the code below with notes about where the brick offset is happening____
Now we can apply some offset to odd rows to give a *brick* effect to our tiles. Check line number 14 and 15 of the following code:
<div class="codeAndCanvas" data="bricks.frag"></div>

@ -1,5 +1,5 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;
#endif
@ -9,9 +9,12 @@ uniform float u_time;
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;
}
return fract(_st);
}
@ -30,9 +33,12 @@ void main(void){
// http://www.jaharrison.me.uk/Brickwork/Sizes.html
// st /= vec2(2.15,0.65)/1.5;
// Apply the brick tiling
st = brickTile(st,5.0);
color = vec3(box(st,vec2(0.95)));
color = vec3(box(st,vec2(0.9)));
// Uncomment to see the space coordinates
// color = vec3(st,0.0);
gl_FragColor = vec4(color,1.0);

@ -1,5 +1,5 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;
#endif
@ -34,8 +34,13 @@ void main(void){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);
st = tile(st,4.);
// Divide the space in 4
st = tile(st,4.);
// Use a matrix to rotate the space 45 degrees
st = rotate2D(st,PI*0.25);
// Draw a square
color = vec3(box(st,vec2(0.7),0.01));
// color = vec3(st,0.0);

@ -1,5 +1,4 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;

@ -1,5 +1,5 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;
#endif

@ -1,5 +1,5 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;
#endif
@ -10,50 +10,55 @@ uniform vec2 u_resolution;
uniform float u_time;
vec2 rotate2D(vec2 _st, float _angle){
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}
vec2 tile(vec2 _st, float _zoom){
_st *= _zoom;
return fract(_st);
_st *= _zoom;
return fract(_st);
}
float box(vec2 _st, vec2 _size, float _smoothEdges){
_size = vec2(0.5)-_size*0.5;
vec2 aa = vec2(_smoothEdges*0.5);
vec2 uv = smoothstep(_size,_size+aa,_st);
uv *= smoothstep(_size,_size+aa,vec2(1.0)-_st);
return uv.x*uv.y;
_size = vec2(0.5)-_size*0.5;
vec2 aa = vec2(_smoothEdges*0.5);
vec2 uv = smoothstep(_size,_size+aa,_st);
uv *= smoothstep(_size,_size+aa,vec2(1.0)-_st);
return uv.x*uv.y;
}
vec2 offset(vec2 _st, vec2 _offset){
vec2 uv;
if(_st.x>0.5){
uv.x = _st.x - 0.5;
} else {
uv.x = _st.x + 0.5;
}
if(_st.y>0.5){
uv.y = _st.y - 0.5;
}else {
uv.y = _st.y + 0.5;
}
return uv;
vec2 uv;
if(_st.x>0.5){
uv.x = _st.x - 0.5;
} else {
uv.x = _st.x + 0.5;
}
if(_st.y>0.5){
uv.y = _st.y - 0.5;
} else {
uv.y = _st.y + 0.5;
}
return uv;
}
void main(void){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st = tile(st,5.);
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.y *= u_resolution.y/u_resolution.x;
st = tile(st,10.);
vec2 offsetSt = offset(st,vec2(0.5));
vec2 offsetSt = offset(st,vec2(0.5));
st = rotate2D(st,PI*0.25);
st = rotate2D(st,PI*0.25);
vec3 color = vec3( box(offsetSt,vec2(0.95),0.01) - box(st,vec2(0.3),0.01) + 2.*box(st,vec2(0.2),0.01) );
vec3 color = vec3( box(offsetSt,vec2(0.95),0.01) - box(st,vec2(0.3),0.01) + 2.*box(st,vec2(0.2),0.01) );
gl_FragColor = vec4(color,1.0);
gl_FragColor = vec4(color,1.0);
}

@ -1,5 +1,4 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;

@ -1,5 +1,4 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;

@ -1,5 +1,4 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;

@ -1,5 +1,4 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;

@ -1,5 +1,4 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;

@ -1,5 +1,5 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
#ifdef GL_ES
precision mediump float;
#endif
@ -18,8 +18,10 @@ void main() {
vec2 st = gl_FragCoord.xy/u_resolution;
vec3 color = vec3(0.0);
st *= 3.0;
st = fract(st);
st *= 3.0; // Scale up the space by 3
st = fract(st); // Wrap arround 1.0
// Now we have 3 spaces that goes from 0-1
color = vec3(st,0.0);
//color = vec3(circle(st,0.5));

@ -1,5 +1,5 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;
#endif

@ -48,7 +48,7 @@
<ul class="navigationBar" >
<li class="navigationBar" onclick="previusPage()">&lt; &lt; Previous</li>
<li class="navigationBar" onclick="homePage()"> Home </li>
<li class="navigationBar" onclick="nextPage()">Next &gt; &gt;</li>
<!-- <li class="navigationBar" onclick="nextPage()">Next &gt; &gt;</li> -->
</ul>
<footer>

@ -1,5 +1,5 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;
#endif

@ -1,5 +1,5 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;
#endif

@ -1,5 +1,5 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;
#endif

@ -1,5 +1,5 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;
#endif

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

@ -1,5 +1,5 @@
// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com
// Author @patriciogv ( patriciogonzalezvivo.com ) - 2015
#ifdef GL_ES
precision mediump float;
#endif

@ -24,7 +24,7 @@ This is a gentle step-by-step guide through the abstract and complex universe of
* [Colors](06/)
* [Shapes](07/)
* [Matrices](08/)
* Patterns
* [Patterns](09/)
* Generative designs
* Random

@ -38,7 +38,28 @@ The following is a list of examples present in this book.
- [Polar](../edit.html#07/polar.frag)
- [Polar (distance field)](../edit.html#07/shapes.frag)
- [Arrow (distance field)](../edit.html#07/arrow.frag)
* [Matrix](../08/)
- [cross](../edit.html#08/cross.frag)
- [translate](../edit.html#08/cross-translate.frag)
- [rotate](../edit.html#08/cross-rotate.frag)
- [scale](../edit.html#08/cross-scale.frag)
* [Patterns](../09/)
- Grid: [making](../edit.html#09/grid-making.frag), [final](../edit.html#09/grid.frag), [grid of +](../edit.html#09/cross.frag)
- [Checks](../edit.html#09/checks.frag)
- [Diamond tiles](../edit.html#09/diamondtiles.frag)
- [Bricks](../edit.html#09/bricks.frag)
- Dots: [0](../edit.html#09/dots.frag), [1](../edit.html#09/dots1.frag), [2](../edit.html#09/dots2.frag), [3](../edit.html#09/dots3.frag), [4](../edit.html#09/dots4.frag)
- [Side grid](../edit.html#09/sidegrid.frag)
- [Rotated tiles](../edit.html#09/rotatedtiles.frag)
- [Nuts pattern](../edit.html#09/nuts.frag)
- [Mirror tiles](../edit.html#09/mirrortiles.frag)
- [Zigzag](../edit.html#09/zigzag.frag)
- [Truchet](../edit.html#09/truchet.frag)
- [Deco](../edit.html#09/deco.frag)
### Advance
* [Moon](../edit.html#examples/moon.frag&examples/images/moon-texture.jpg)
* [Matrix](../edit.html#08/matrix.frag)

Loading…
Cancel
Save