Random Drawers digression [p5.js]

Still doodling with p5.js/processing! I started taking a look into The Nature of Code, by Daniel Shiffman. The very first part of the book uses Random Walkers to get you started into generating the first sketches. While looking at that part of the book, I came up with what I call “Random Drawers”, which are Random Walkers used to draw images. The image can be loaded at runtime. You can also sketch over it gently with your mouse!


Maybe I will add a button to switch images – the one you see is loaded from a file.

p5.disableFriendlyErrors = true; // disables FES

var walkers;
var walkersNum;

// will hold the "look up table" image
let LUT;

var bgColor;

var w
var h;

var imgURL = "assets/peace.png";

function preload()
{
  LUT = loadImage(imgURL);
  LUT.loadPixels();
}

function setupImage()
{

  LUT.resize(0, h);
  LUT.filter(GRAY);

  walkersNum = height*4;
  walkers = new Array(walkersNum);

  for (var i = 0; i < walkersNum; i++)
    walkers[i] = new Walker(height/200, height/200);
}

function setup()
{
  const elt = select("#drawerSketch");
  w = elt.width;
  h = elt.height;

  // we now create our canvas for p5js, and parent it to the specified element (our "polysketch" div)
  canvas = createCanvas(w, h);
  canvas.parent('drawerSketch');
  canvas.position(0,0);

  setupImage();

  noCursor();
  noStroke();

  //smooth();
  bgColor = color(45, 30);

  background(bgColor);

  rectMode(CENTER);
}

function draw()
{
  fill(bgColor);
  rect(width/2, height/2, width, height);

  // calling this here so it gets called only once per draw
  for (var i = 0; i < walkersNum; i++)
  {
    walkers[i].step(LUT);
    walkers[i].displayAsCircle();
  }
}

// in case the window is resized
function windowResized()
{
    const elt = select("#drawerSketch");
    w = elt.width;
    h = elt.height;

    if(w > displayWidth)
        w = displayWidth;

    if(h > displayHeight)
        h = displayHeight;

    resizeCanvas(w, h);

    setup();
}

class Walker
{
  constructor(_radius,_speed)
  {
    this.x = random(width);
    this.y = random(height);
    this.xOff = random(1000);
    this.yOff = random(1000);
    this.radius = _radius;
    this.speed = _speed;
    this.col =  color(random(255), random(255), random(255));
    this.mouseDistSqr = (height/20)*(height/20);
  }

  displayAsPovar()
  {
    stroke(this.col);
    povar(this.x, this.y);
  }

  displayAsCircle()
  {

    fill(this.col);
    circle(this.x, this.y, this.radius*2);
  }

  respawn()
  {
    this.x = random(width);
    this.y = random(height);
  }

  step(LUTimage)
  {
    var stepx = (noise(this.xOff)*2 - 1)*this.speed;
    var stepy = (noise(this.yOff)*2 - 1)*this.speed;

    this.xOff += 0.1;
    this.yOff += 0.1;

    this.x += stepx;
    this.y += stepy;

    if (this.x < 0 || this.x > width)
      this.respawn();

    if (this.y < 0 || this.y > height)
      this.respawn();

    // this maybe could be optimized
    var g = red(LUTimage.get(this.x, this.y));

    if(random(255) < 255 - g)
    {
      this.respawn();
    }

    if(distSquared(mouseX, mouseY, this.x, this.y) < this.mouseDistSqr)
    {
      this.respawn();
    }
  }
}

function distSquared(x1, y1, x2, y2)
{
    let dx = x2 - x1;
    let dy = y2 - y1;
    return dx * dx + dy * dy;
}

dario mazzanti, 2020

Up ↑