/prog/ - DECEMBER CHALLENGE

Name: Anonymous 2016-12-09 0:03

implement js snowflakes in a clever way -- interesting falling patterns, short source code, randomly generated snowflakes, etc

http://www.schillmania.com/projects/snowstorm/ for reference

Name: Anonymous 2016-12-16 14:07

starter code bump

var c = document.getElementById("flake");
var flake = c.getContext("2d");

flake.strokeStyle="#FF0000";

var imgData=flake.createImageData(20,20);

for (var i=0;i<imgData.data.length;i+=12)
  {
  imgData.data[i+0]=255;
  imgData.data[i+1]=0;
  imgData.data[i+2]=0;
  imgData.data[i+3]=255;
  }

flake.putImageData(imgData,0,0);

var canv = document.getElementById("myCanvas");
var ctx = canv.getContext("2d");

var imgData = flake.getImageData(0,0,20,20);

ctx.putImageData(imgData,0,0);

Name: Anonymous 2016-12-17 3:56

random snowflake generator

var c = document.getElementById("flake");
var flake = c.getContext("2d");

var canv = document.getElementById("myCanvas");
var ctx = canv.getContext("2d");

function ucoord(x, y, ox){
  return(x + y*ox);
  }

function zcoord(xc, c){
  return(xc*4 + c);
  }

function ufilt(step, fsize){
  var len = (fsize*2+1) * (fsize*2+1);
  var arr = [];
  var x, y, z=0;
  for(y=-fsize; y<=fsize; y++){
    for(x=-fsize; x<=fsize; x++){
      arr[z] = x + y*step;
      z++;
      }
    }
  return(arr);
  }

function xfilt(img, filt, i){
  var n = filt.length, acc = 0;
  for(var j=0; j<n; j++){
    acc += img[i + 4*filt[j]];
    }
  return(acc);
  }

function genflake(flake, xy, cx, cy, iter){
  var i, gx, gy, gz, ac;

  var imData = flake.createImageData(20,20);

  var f1 = ufilt(20, 1);

  gz = ucoord(cx, cy, xy);
  gx = zcoord(gz, 2); // blue chan
  imData.data[gx] = 255; 
  imData.data[gx+1] = 255; // alpha

  for(i=0;i<iter;i++){
    gx = Math.floor(Math.random()*(xy-4)+2);
    gy = Math.floor(Math.random()*(xy-4)+2);

    gz = ucoord(gx, gy, xy);
    gx = zcoord(gz, 2);

    ac = xfilt(imData.data, f1, gx);

//    alert(gx +" "+gy+" "+gz+" "+ac);

    if(((ac > 0) + (ac < 255*3)) == 2){    

      imData.data[gx] = 255; 
      imData.data[gx+1] = 128; // alpha
      }

    if(((ac > 255*5) + (ac < 255*9)) == 2){    

      imData.data[gx] = 128; 
      imData.data[gx+1] = 64; // alpha
      }

//    flake.putImageData(imData,0,0);

    }
  return(imData);
  }
    

var imgData = genflake(flake, 20, 10, 10, 400);

//var imgData=flake.createImageData(20,20);
//
//for (var i=0;i<imgData.data.length;i+=12)
  //{
  //imgData.data[i+0]=255;
  //imgData.data[i+1]=0;
  //imgData.data[i+2]=0;
  //imgData.data[i+3]=64;
  //}

flake.putImageData(imgData,0,0);

var imgData = flake.getImageData(0,0,20,20);

ctx.drawImage(c,0,0);

ctx.drawImage(c,5,5);

//ctx.putImageData(imgData,0,0);

//ctx.putImageData(imgData,11,10);

ctx.drawImage(c,10,10);

Name: Anonymous 2016-12-17 4:09

better include the html

<html>
<head>
</head>
<body bgcolor=#ccc>

<canvas id="flake" width="20" height="20" style="border:1px solid#333;"></canvas><br>

<canvas id="myCanvas" width="250" height="250" style="width:90%;height:90%;border:1px solid#999;"></canvas> 

<script src="snow.js"></script>
</body>
</html>

DECEMBER CHALLENGE

1 Name: Anonymous 2016-12-09 0:03

13 Name: Anonymous 2016-12-16 14:07

14 Name: Anonymous 2016-12-17 3:56

15 Name: Anonymous 2016-12-17 4:09

Name: Anonymous 2016-12-09 0:03

Name: Anonymous 2016-12-16 14:07

Name: Anonymous 2016-12-17 3:56

Name: Anonymous 2016-12-17 4:09