ContourMap-v2 initialy coded by Cedric Kiefer / Onformative ( https://onformative.com/) with BlobDetection lib using Processing.

​

This version uses blobDetection.js which is a direct port of BlobDetection library written in Java for Processing

​

*/

​

​

let levels = 15;

let elevation = 120; 

let factor = 3;

let theBlobDetection = [];

let theShapes = [];

let img;

let colorStart =  0;               // Starting dregee of color range in HSB Mode (0-360)

let colorRange =  160;             // color range / can also be negative

let pg;

​

function preload()

{

  img = loadImage("map.jpg");

}

​

function setup() 

{

  let pd = pixelDensity();

  pixelDensity(1);

  pg = createGraphics(img.width,img.height,P2D);  

  pg.background(0);

  pg.image(img,0,0,img.width,img.height);

​

  pg.noFill();

  pg.stroke(0);

  pg.strokeWeight(4);

  pg.rect(0,0,img.width,img.height)

​

  pixelDensity(pd);

  createCanvas(img.width*factor, img.height*factor, WEBGL);

  colorMode(HSB,360,100,100);

  pg.loadPixels();

  let n = 0;

  for (let i=0 ; i<levels ; i++) 

  {

    theBlobDetection[i] = new BlobDetection(img.width, img.height);

    theBlobDetection[i].setThreshold(i/levels);

    theBlobDetection[i].computeBlobs(pg.pixels, blob => {

      if (n<3){    

        console.log( blob );

        n++;

      }    

      return true;

    });

  }  

}

​

function draw() 

{

  background(0);

​

  push();

  translate(0,0,-300)

  rotateX(map(mouseY,0,height,-PI,PI));

  rotateY(map(mouseX,0,width,-PI,PI));

  translate(-width/2,-height/2);

  push();

  noFill();

  for (let i=0 ; i<levels ; i++) 

  {

    translate(0,0,elevation/levels);    

    drawContours(i);

  }

  pop();

  pop();

  image(pg,-width/2,-height/2);

}

​

function drawContours(i) 

{

  let b,eA,eB;

  for (let n=0 ; n<theBlobDetection[i].getBlobNb() ; n++) {

    b=theBlobDetection[i].getBlob(n);

    if (b) 

    {

      stroke((i/levels*colorRange)+colorStart,100,100);

        beginShape();

      for (let m=0;m<=b.getEdgeNb();m++) 

      {

        eA = b.getEdgeVertexA(m);

        eB = b.getEdgeVertexB(m);

        if (eA && eB)

        {

          vertex( eA.x*img.width*factor, eA.y*img.height*factor,0 );

        }

      }

        endShape();

    }

  }

}

​