apr.22

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(0);

  update();

}

​

function mousePressed(){

  update()

}

​

function draw() {

}

​

function shuffle(array) {

  array.sort(function(){ return random() - 0.5});

}

​

​

function update(){

  var w = width/20;

  var h = height/20;

  var palette = [

    color(163, 77, 43),

    color(74, 130, 179),

    color(226, 183, 164),

    color(149, 171, 129)

  ];

  for(var i=0; i<20; i++){

    for(var j=0; j<20; j++){

      palette = shuffle(palette);

      var fc = palette[0];

      var bc = palette[1];

      var p = int(random(4));

      if(p==4) p--;

      var block = new Bock(i*w,j*h, w,h,fc,bc,p);

      block.draw();     

    }   

  }

  // filter(POSTERIZE,palette.length+2);

}

​

function Bock(x,y,w,h,fc,bc,p){

  this.x=x;

  this.y=y;

  this.w=w; // width

  this.h=h; // height

  this.fc=fc; // foreground color

  this.bc=bc; // background color

  this.p=p; // position

  this.draw = function(){

    this.mask = createGraphics(this.w,this.h);

    this.mask.background(this.bc);

    this.mask.fill(this.fc);

    switch(this.p){

      case 0:

        this.mask.ellipse(0,0,2*this.w,2*this.h);

        break;

      case 1:

        this.mask.ellipse(this.w,0,2*this.w,2*this.h);

        break;

      case 2:

        this.mask.ellipse(this.w,this.h,2*this.w,2*this.h);

        break;

      case 3:

        this.mask.ellipse(0,this.h,2*this.w,2*this.h);

        break;

    }

    this.mask.filter(ERODE);

    image(this.mask,this.x,this.y);

  }

}