Commits

David Lin committed 7715c0a

pixelize effect

  • Participants
  • Parent commits da03932

Comments (0)

Files changed (7)

File www/js/app/fx/grayscale.cl

-const sampler_t sampler = CLK_NORMALIZED_COORDS_FALSE |
+const sampler_t sampler = CLK_NORMALIZED_COORDS_TRUE |
                           CLK_ADDRESS_CLAMP_TO_EDGE |
                           CLK_FILTER_NEAREST;
 
 __kernel void main(__read_only image2d_t src,
-                   __write_only image2d_t dst,
-                   uint width, uint height)
+                   __write_only image2d_t dst)
 {
-  uint x = get_global_id(0), y = get_global_id(1);
-  if (x >= width || y >= height)
+  int x = get_global_id(0), y = get_global_id(1);
+  int2 dim = get_image_dim(dst);
+  if (x >= dim.x || y >= dim.y)
     return;
-  float4 color = read_imagef(src, sampler, (int2)(x, y));
+  float tx = x / (float)dim.x, ty = y / (float)dim.y;
+  float4 color = read_imagef(src, sampler, (float2)(tx, ty));
   float lum = dot(color, (float4)(0.299f, 0.587f, 0.114f, 0.0f));
   float4 result = (float4)(lum, lum, lum, 1.0f);
   write_imagef(dst, (int2)(x, y), result);

File www/js/app/fx/grayscale.js

     var kernel = fx.buildKernel(code);
     kernel.setKernelArg(0, imgIn);
     kernel.setKernelArg(1, imgOut);
-    kernel.setKernelArg(2, src.width, WebCL.types.UINT);
-    kernel.setKernelArg(3, src.height, WebCL.types.UINT);
     fx.dispatchExecution2D(kernel, src.width, src.height);
     var canvas = outputCanvasElement();
     canvas.width = src.width;
   
   function setup()
   {
+    $("#parameters-area").html('');
     $("button#execute").off().on("click", execute);
   }
   

File www/js/app/fx/invert.cl

-const sampler_t sampler = CLK_NORMALIZED_COORDS_FALSE |
+const sampler_t sampler = CLK_NORMALIZED_COORDS_TRUE |
                           CLK_ADDRESS_CLAMP_TO_EDGE |
                           CLK_FILTER_NEAREST;
 
 __kernel void main(__read_only image2d_t src,
-                   __write_only image2d_t dst,
-                   uint width, uint height)
+                   __write_only image2d_t dst)
 {
-  uint x = get_global_id(0), y = get_global_id(1);
-  if (x >= width || y >= height)
+  int x = get_global_id(0), y = get_global_id(1);
+  int2 dim = get_image_dim(dst);
+  if (x >= dim.x || y >= dim.y)
     return;
-  float4 color = read_imagef(src, sampler, (int2)(x, y));
+  float tx = x / (float)dim.x, ty = y / (float)dim.y;
+  float4 color = read_imagef(src, sampler, (float2)(tx, ty));
   float4 result = (float4)((float3)(1.0f) - color.xyz, 1.0f);
   write_imagef(dst, (int2)(x, y), result);
 }

File www/js/app/fx/invert.js

     var kernel = fx.buildKernel(code);
     kernel.setKernelArg(0, imgIn);
     kernel.setKernelArg(1, imgOut);
-    kernel.setKernelArg(2, src.width, WebCL.types.UINT);
-    kernel.setKernelArg(3, src.height, WebCL.types.UINT);
     fx.dispatchExecution2D(kernel, src.width, src.height);
     var canvas = outputCanvasElement();
     canvas.width = src.width;
   
   function setup()
   {
+    $("#parameters-area").html('');
     $("button#execute").off().on("click", execute);
   }
   

File www/js/app/fx/pixelize.cl

+const sampler_t sampler = CLK_NORMALIZED_COORDS_TRUE |
+                          CLK_ADDRESS_CLAMP_TO_EDGE |
+                          CLK_FILTER_NEAREST;
+
+__kernel void main(__read_only image2d_t src,
+                   __write_only image2d_t dst,
+                   int block_size)
+{
+  int x = get_global_id(0), y = get_global_id(1);
+  int2 dim = get_image_dim(dst);
+  if (x >= dim.x || y >= dim.y)
+    return;
+  float tx = ((x/block_size)*block_size) / (float)dim.x;
+  float ty = ((y/block_size)*block_size) / (float)dim.y;
+  float4 color = read_imagef(src, sampler, (float2)(tx, ty));
+  write_imagef(dst, (int2)(x, y), color);
+}

File www/js/app/fx/pixelize.js

+define([
+  'zepto',
+  './shared',
+  'text!./pixelize.cl'
+], function($, fx, code){
+  
+  function sourceImageElement()
+  {
+    return $("img#source")[0];
+  }
+  
+  function sourceImageData()
+  {
+    var cav = document.createElement('canvas');
+    var img = sourceImageElement();
+    cav.width = img.width;
+    cav.height = img.height;
+    var ctx = cav.getContext('2d');
+    ctx.drawImage(img, 0, 0);
+    return ctx.getImageData(0, 0, img.width, img.height);
+  }
+  
+  function outputCanvasElement()
+  {
+    return $("canvas#output")[0];
+  }
+  
+  function execute()
+  {
+    _execute(fx.context, fx.commandQueue);
+  }
+  
+  function _execute(ctx, cmd)
+  {
+    var src = sourceImageData();
+    var format = { channelOrder: WebCL.CL_RGBA,
+                   channelDataType: WebCL.CL_UNORM_INT8 }
+    var imgIn = ctx.createImage2D(WebCL.CL_MEM_READ_ONLY, format, src.width, src.height, 0);
+    var imgOut = ctx.createImage2D(WebCL.CL_MEM_WRITE_ONLY, format, src.width, src.height, 0);
+    fx.dispatchWriteImage2D(imgIn, src.data);
+    var kernel = fx.buildKernel(code);
+    kernel.setKernelArg(0, imgIn);
+    kernel.setKernelArg(1, imgOut);
+    kernel.setKernelArg(2, $("#param-block_size")[0].value, WebCL.types.INT);
+    fx.dispatchExecution2D(kernel, src.width, src.height);
+    var canvas = outputCanvasElement();
+    canvas.width = src.width;
+    canvas.height = src.height;
+    var canvasCtx = canvas.getContext('2d');
+    var result = canvasCtx.createImageData(src.width, src.height);
+    fx.dispatchReadImage2D(imgOut, result.data);
+    cmd.finish();
+    canvasCtx.putImageData(result, 0, 0);
+    imgIn.releaseCLResources();
+    imgOut.releaseCLResources();
+  }
+  
+  function setup()
+  {
+    $("#parameters-area").html(
+      '<form>' +
+      '<label>Block Size:</label>' +
+      '<input id="param-block_size" type="range" min="1" max="64" />' +
+      '</form>'
+    );
+    $("button#execute").off().on("click", execute);
+  }
+  
+  return setup;
+});

File www/js/app/main.js

       var value = e.target.value;
       require(["./fx/"+value], function(fx){ fx(); });
     }).append((function(){
-      var options = ['invert', 'grayscale'];
+      var options = ['invert', 'grayscale', 'pixelize'];
       for (var i in options) {
         var node = document.createElement('option');
         node.value = options[i];