{"id":195,"date":"2012-04-16T16:25:48","date_gmt":"2012-04-16T17:25:48","guid":{"rendered":"http:\/\/www.tamats.com\/blog\/?p=195"},"modified":"2012-04-16T16:30:02","modified_gmt":"2012-04-16T17:30:02","slug":"resurrecting-the-blog","status":"publish","type":"post","link":"https:\/\/www.tamats.com\/blog\/?p=195","title":{"rendered":"Resurrecting the Blog"},"content":{"rendered":"

I loose count on how many times I’ve trying to resurrect my blog.
\nI wanted to do a propper devlog like all those amazing blogs I’m suscribed (I should make a post about them), but when I’m very active at coding I do not feel very communicative to write about it, so here we go again.<\/p>\n

I plan to write at least once a week to explain how some of my projects are going and to share all those annoying bugs or problems I had discovered and which solutions did I use.<\/p>\n

And as I always do, I cleaned my wordpress theme so at least it will help me find the strength to write.<\/p>\n

I did a small WebGL widget to make it more interesting, I plan to do more silly 3d widgets over the time.
\nThis one is tiny in code, and it shouldnt take too much resources (it only gets executed when the tab is visible).
\nI used the library lightgl<\/a> to simplify the code.
\nLightgl is a tiny javascript library to wrap some of the WebGL funcionalities in a more friendly code. It helps to upload textures and meshes, compile shaders and it comes with the mathematical operations common to 3D.<\/p>\n

Check the code to make the example above<\/p>\n

<\/p>\n

\r\nfunction launch3D()\r\n{\r\n\tvar is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;\r\n\r\n\tvar angle = 0;\r\n\tvar is_mouse_over = false;\r\n\tvar scale = 1.0;\r\n\tvar gl = GL.create();\r\n\tgl.clearColor(0.9,0.9,0.9,1.0);\r\n\r\n\tvar mesh = GL.Mesh.cube();\r\n\tvar shader = new GL.Shader('\\\r\n\t  varying vec2 coord;\\\r\n\t  void main() {\\\r\n\t\tcoord = gl_TexCoord.xy;\\\r\n\t\tgl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;\\\r\n\t  }\\\r\n\t', '\\\r\n\tuniform sampler2D texture;\\\r\n    varying vec2 coord;\\\r\n\tuniform vec3 u_color;\\\r\n\tuniform float u_usetex;\\\r\n\tvoid main() {\\\r\n\t\tgl_FragColor = vec4(0.7, 0.7, 0.7, 1.0);\\\r\n\t\tvec3 color = u_color + vec3(1.0 - gl_FragCoord.x\/256.0,1.0 - gl_FragCoord.y\/256.0,1.0);\\\r\n\t\tif(u_usetex == 1.0)\\\r\n\t\t\tcolor *= texture2D(texture,  gl_FragCoord.xy \/ 4.0 ).xyz;\\\r\n\t\tgl_FragColor = vec4( color,1.0);\\\r\n\t}\\\r\n\t');\r\n\tvar texture = GL.Texture.fromURL('data\/pattern4.png', {wrap: gl.REPEAT, filter: gl.NEAREST });\r\n\r\n\tgl.onupdate = function(seconds) {\r\n\t  angle += 20 * seconds;\r\n\t  scale = scale * 0.9 + 0.1;\r\n\t};\r\n\r\n\tgl.ondraw = function() {\r\n\t  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\r\n\t  gl.loadIdentity();\r\n\t  gl.translate(0, 0, -5);\r\n\r\n\t  texture.bind(0);\r\n\t  gl.scale(scale,scale,scale);\r\n\r\n\t  \/\/bg\r\n\t  gl.pushMatrix();\r\n\t  gl.rotate(45, 1, 0, 0);\r\n\t  gl.rotate(angle, 0, 1, 0);\r\n\t  shader.uniforms({ texture: 0, u_color: [2.0,2.0,2.0], u_usetex: is_chrome ? 0 : 1});\r\n\t  shader.draw(mesh);\r\n\r\n\t  gl.scale(0.9,0.9,0.9);\r\n\t  shader.uniforms({ texture: 0, u_color: [0.0,0.0,0.0], u_usetex: is_chrome ? 0 : 1});\r\n\t  shader.draw(mesh);\r\n\t  gl.popMatrix();\r\n\r\n\t};\r\n\r\n\t\/\/set size\r\n\t$(\"#bgwidget\").append( gl.canvas );\r\n\t  gl.canvas.width = 256;\r\n\t  gl.canvas.height = 256;\r\n\t  var options = {};\r\n\t  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);\r\n\tgl.matrixMode(gl.PROJECTION);\r\n\tgl.loadIdentity();\r\n\tgl.perspective(options.fov || 45, gl.canvas.width \/ gl.canvas.height,\r\n\t  options.near || 0.1, options.far || 1000);\r\n\r\n\tsetInterval(function() {\r\n\t\tscale += 0.05;\r\n\t},1000);\r\n\r\n\t\/\/gl.loadIdentity();\r\n\t\/\/gl.ortho(-2,2,-2,2,-10,10);\r\n\r\n\tgl.matrixMode(gl.MODELVIEW);\r\n\t\/\/gl.fullscreen();\r\n\tgl.animate();\r\n\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
I loose count on how many times I’ve trying to resurrect my blog. I wanted to do a propper devlog like all those amazing blogs I’m suscribed (I should make a post about them), but when I’m very active at coding I do not feel very communicative to write about it, so here we go […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,3,22,21],"tags":[],"class_list":["post-195","post","type-post","status-publish","format-standard","hentry","category-coding","category-devlog","category-graphics","category-webdevelopment"],"_links":{"self":[{"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=195"}],"version-history":[{"count":3,"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/195\/revisions"}],"predecessor-version":[{"id":198,"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/195\/revisions\/198"}],"wp:attachment":[{"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tamats.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}