Me trying to figure out how to use floodfill

  below are some variables that you can change to see different behaviour

  TODO 

    - [] put changable variables into nice button/slider thingies

    - [] fix colormode breaks at SPEEDFACTOR < 1

    - [] allow colormode calcs per step instead of per SPEEDFACTOR steps

    - [] ???

    - [] profit

    - [] multi agent floodfill SCENE? no maybe just put that in a different p5 for now

*/

​

/* SPEEDFACTOR

Amt of fills to do per frame (min = 1)

features (unadressed bugs):

  - values below 1 break coloring/used figures

  - different values cause different coloring with different coloring chosen

*/

const SPEEDFACTOR = 8;

​

/* CUSTOMCOLORMODE

available options options

  - rainbow

  - softstuff

  - nothing

*/

const CUSTOMCOLORMODE = 'rainbow'; 

​

// enable random filling pattern

var RANDOMFILL = true;

​

// enable spiraling filling pattern 

var SPIRALFILL = true;  // overwrites randomfill but also requires it lol

​

var modes = [[true, true],[false, true],[true, false]]

var mode = 0

​

// size of shapes

const OBJECT_SIZE = 0.5;

​

​

// amount of objects will be xBound*yBound

const xBound = 70;

const yBound = 70;

​

// screen size 

const CANVAS_WIDTH = 800;

const CANVAS_HEIGHT = 800;

​

// resizing factors

const FACTORX = CANVAS_WIDTH/xBound;

const FACTORY = CANVAS_HEIGHT/yBound;

​

// -----------------------------------------------------------------

// - - - dont change below this line - - -

// -----------------------------------------------------------------

// nothing interesting

const MAXLOOP = (1+xBound)*(1+yBound);

const MINLOOP = MAXLOOP/SPEEDFACTOR;

​

const grid  = []

const steps = [];

​

// coloring things

var col = 0; //color

var cd  = 0.05 //colordelta

var r,g,b,a;

​

// oh, yes

function getRandomInt(max) {

  return Math.floor(Math.random() * max);

}

​

// the mess its all about

function flood(x,y,mod){

  point(x*FACTORX,y*FACTORY);

  if (

    0 > x ||

    0 > y ||

    x > xBound||

    y > yBound||

    grid[x][y] != 0){

    return;

  } else{

    grid[x][y]=1;

    steps.push([x,y]);

    if (RANDOMFILL){

      if (SPIRALFILL){

        // It's very fun to change the order of those

        // but i still cant make it spiral

        if(mod %4 == 0){

          flood(x-1,y,mod+1);

          flood(x,y-1,mod+2);

          flood(x+1,y,mod+3);

          flood(x,y+1,mod+8);

        } else if(mod % 4 == 1) {

          flood(x,y-1,mod+1);

          flood(x+1,y,mod+2);

          flood(x,y+1,mod+3);

          flood(x-1,y,mod+8);

        }else if(mod % 4 == 2) {

          flood(x+1,y,mod+1);

          flood(x,y+1,mod+2);

          flood(x-1,y,mod+3);

          flood(x,y-1,mod+8);

        }else if(mod % 4 == 3) {

          flood(x,y+1,mod+1);

          flood(x-1,y,mod+2);

          flood(x,y-1,mod+3);

          flood(x+1,y,mod+8);

        }

      }

      else{

  switch(getRandomInt(2)) {

  case 1:

    flood(x,y+1);    

    flood(x+1,y);

    flood(x,y-1);

    flood(x-1,y);

    break;

  case 2: 

    flood(x-1,y);

    flood(x+1,y);

    flood(x,y-1);     

    flood(x,y+1);

    break;

  default:  

    flood(x+1,y);

    flood(x,y-1);

    flood(x-1,y);

    flood(x,y+1);

}}

    }

    else{

    flood(x+1,y);

    flood(x,y-1);

    flood(x-1,y);

    flood(x,y+1);

    }

​

  }

​

}

​

​

/**===========================================================

 here's the setup 

​

  ===========================================================**/

function setup() {

  createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);

  background(53);

  r=0;

  g=0;

  b=0;

  a=255;

  for (var i =0; i <yBound+1;i++){

    grid.push([]);

    for(var j=0; j<xBound+1; j++){

      grid[i].push(0);

    }

  }

  flood(floor(xBound/2),floor(yBound/2),0);

  console.log(`there are ${steps.length} steps to take`);

  rectMode(CENTER);

  ellipseMode(CENTER);

  frameRate(200);

}

​

function flumpColormodes(){

  switch(CUSTOMCOLORMODE){

    case "rainbow":

      colorMode(HSB);

      col+=1;

      r = map(col,0,MAXLOOP,0,255);

      fill(col, 100,100);

      break;

    case "softstuff":

      col+=cd;

      r= noise(col+1)*255;

      g= noise(col+100)*255;

      b= noise(col+1000)*255;

      a= noise(col+10000)*255;

      fill(r,g,b,a);

      break;

    case "somethingelse":

      break;

    default:

        stroke(b,g,r,a);

        r=random()*255;

        g=random()*255;

        b=random()*255;

        a=random()*255;

      break;

   }

}

var d = 0;

​

function draw() {

  flumpColormodes();

  if (SPEEDFACTOR < 1){

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

      var point = steps.shift();

    if (point === undefined){

      break;

    }

  if (random() > 0.5){

     rect(point[0]*FACTORX,   point[1]*FACTORY,2*FACTORX*OBJECT_SIZE,2*FACTORY*OBJECT_SIZE)

  } else {

    circle(point[0]*FACTORX, point[1]*FACTORY,2*FACTORX*OBJECT_SIZE)

  }

  }

    noLoop();

  }

  else {

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

      var point = steps.shift();

    if (point === undefined){

      break;

    }

  // if (random() > 0.5){

  //    rect(point[0]*FACTOR,   point[1]*FACTOR,2*FACTOR*OBJECT_SIZE,2*FACTOR*OBJECT_SIZE)

  // } else {

  //   circle(point[0]*FACTOR, point[1]*FACTOR,2*FACTOR*OBJECT_SIZE)

  // }

     circle(point[0]*FACTORX, point[1]*FACTORY,2*FACTORX*OBJECT_SIZE)

  }

  }

​

​

​

​

}