Illustration of conditions

let cellSize = 30;  
let numberOfMoves = 100000;
let points = [];
let rolls = [];

function setup() {
  createCanvas(600,600);
  noLoop();
  generateDrawing();
}

function draw() {
  background(245);
  noFill();

  beginShape();
  for (let p of points) {
    vertex(p.x, p.y);
  }
  endShape();

  for (let i = 0; i < points.length; i++) {
    fill(20);
    noStroke();
    circle(points[i].x, points[i].y, 8);
  }

}

function generateDrawing() {
  points = [];
  rolls = [];

  let x = width / 2;
  let y = height / 2;

  points.push({ x: x, y: y });

  for (let i = 0; i < numberOfMoves; i++) {
    let directionRoll = floor(random(1, 7)); 
    let distanceRoll = floor(random(1, 7)); 
    let dx = 0;
    let dy = 0;

    if (directionRoll === 1) {
      dy = -distanceRoll * cellSize;
    } else if (directionRoll === 2) {
      dy = distanceRoll * cellSize;
    } else if (directionRoll === 3) {
      dx = distanceRoll * cellSize;
    } else if (directionRoll === 4) {
      dx = -distanceRoll * cellSize;
    } else if (directionRoll === 5) {
      dx = distanceRoll * cellSize;
      dy = -distanceRoll * cellSize;
    } else if (directionRoll === 6) {
      dx = -distanceRoll * cellSize;
      dy = distanceRoll * cellSize;
    }

    x += dx;
    y += dy;

    points.push({ x: x, y: y });

    rolls.push({
      move: i + 1,
      direction: directionRoll,
      distance: distanceRoll
    });
  }
}

function drawGrid() {
  stroke(210);
  strokeWeight(1);

  for (let x = 0; x <= width; x += cellSize) {
    line(x, 0, x, height);
  }

  for (let y = 0; y <= height; y += cellSize) {
    line(0, y, width, y);
  }
}

function mousePressed() {
  generateDrawing();
  redraw();
}