Nature of Code book (random walker)

p5.js Beginners
1

I have been trying to follow with the Nature Of Code processing book in p5js.
The following code does not work:

class Walker {
  contructor() {
    this.x = 250;
    this.y = 250;
  }
  
  display() {
    stroke(255);
    point(this.x, this.y);
  }
  
  step() {
    const random_choice = random(4);
    
    switch (random_choice) {
      case 0: {
        this.x += 1;
        break;
      }
      case 1: {
        this.x -= 1;
        break;
      }
      case 2: {
        this.y += 1;
        break;
      }
      case 3: {
        this.y -= 1;
        break;
      }
    }
  }
}

let w;

function setup() {
  createCanvas(500, 500);
  w = new Walker(width, height);
}

function draw() {
  //background(0);
  
  w.display();
  w.step();
  
}

Sorry for the small description! I am currently in ahurry.

2

this works, but is not good code

let x = 250;
let y = 250;

class Walker {

  contructor() {
    // x = 250;
    ///  y = 250;
  }

  display() {
    stroke(0);
    fill(0);
    circle(x, y, 2);
  }

  step() {
    let random_choice = int(random(4));

    switch (random_choice) {
      case 0: {
        x += 1;
        break;
      }
      case 1: {
        x -= 1;
        break;
      }
      case 2: {
        y += 1;
        break;
      }
      case 3: {
        y -= 1;
        break;
      }
    }
  }
}

let w;

function setup() {
  createCanvas(500, 500);
  w = new Walker(width, height);
}

function draw() {
  //background(0);

  w.display();
  w.step();
}
//
3

You’ve mispelled constructor(): :wink:
constructor() {

3 Likes
4

Yes. I feel stupid now… :wink:

I also changed this: let random_choice = int(random(4));

class Walker {
  
  constructor() {
    this.x = 250;
    this.y = 250;
  }
  
  display() {
    stroke(0);
    point(this.x, this.y);
   // circle(this.x, this.y,4);
  }
  
  step() {
    let random_choice = int(random(4));
    
    switch (random_choice) {
      case 0: {
        this.x += 1;
        break;
      }
      case 1: {
        this.x -= 1;
        break;
      }
      case 2: {
        this.y += 1;
        break;
      }
      case 3: {
        this.y -= 1;
        break;
      }
    }
  }
}

let w;

function setup() {
  createCanvas(500, 500);
  w = new Walker(width, height);
}

function draw() {
  //background(0);
  
  w.display();
  w.step();
  
}
//
2 Likes
5
  • JS offers a variety of keywords to declare variables w/.
  • My fav is const b/c most of the time variables don’t need to be re-assigned.
  • B/c the variable random_choice is only accessed within switch’s parens we can simply eliminate the variable to shorten the code further:
  step() {
    // let random_choice = int(random(4)); // no need

    switch (~~random(4)) {
2 Likes
6

and I added int()

Chrisir

1 Like
7

Thank you! By the way, in your reply to @Chrisir, you code thefollowing:

  step() {
    // let random_choice = int(random(4)); // no need

    switch (~~random(4)) {

can you say what this does?

8

Using the unary bitwise operator ~ twice truncates a value by removing its fractional part.

It’s a shorter & more performant replacement for int(): :stuck_out_tongue:
https://p5js.org/reference/#/p5/int

1 Like