tadasan/210101

var NORTH = 0;

var NORTHEAST = 1;

var EAST = 2;

var SOUTHEAST = 3;

var SOUTH = 4;

var SOUTHWEST = 5;

var WEST = 6;

var NORTHWEST = 7;

var direction;

​

var stepSize = 3;

var diameter = 12;

​

var posX;

var posY;

​

let count = 0;

​

function setup() {

  createCanvas(600, 600);

  colorMode(HSB, 360, 100, 100, 100);

  noStroke();

  fill(0, 40);

  background(360, 100);

  //background(300, 10, 155);

  //background(30, 10, 155);

​

  posX = width / 2;

  posY = height / 2;

  //frameRate(6);

}

​

function draw() {

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

    noStroke();

    direction = int(random(0, 8));

​

    if (direction == NORTH) {

      posY -= stepSize;

    } else if (direction == NORTHEAST) {

      posX += stepSize;

      posY -= stepSize;

    } else if (direction == EAST) {

      posX += stepSize;

    } else if (direction == SOUTHEAST) {

      posX += stepSize;

      posY += stepSize;

    } else if (direction == SOUTH) {

      posY += stepSize;

    } else if (direction == SOUTHWEST) {

      posX -= stepSize;

      posY += stepSize;

    } else if (direction == WEST) {

      posX -= stepSize;

    } else if (direction == NORTHWEST) {

      posX -= stepSize;

      posY -= stepSize;

    }

​

    if (posX > width) posX = 0;

    if (posX < 0) posX = width;

    if (posY < 0) posY = height;

    if (posY > height) posY = 0;

​

    let diameter_size = mouseX / 2;

    let d = diameter_size;

​

​

    //random walk

    let to = color(260);

    let from = color(300, 100, 50); //(1, 100, 50)

    let interA = lerpColor(from, to, (i / 20) / width);

    strokeWeight(0.7);

    stroke(300, 100, 50); //#800080

    //stroke(3, 100, 50);

​

    fill(interA);

    ellipse(posX + stepSize, posY + stepSize, d, d);

​

  }

}