# Random walker on certain part of the canvas

**URL:** <https://discourse.processing.org/t/random-walker-on-certain-part-of-the-canvas/41696>\
**Category:** Coding Questions\
**Created:** [April 12, 2023, 7:45am UTC](https://discourse.processing.org/t/random-walker-on-certain-part-of-the-canvas/41696 "2023-04-12T07:45:08Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [April 12, 2023, 7:45am UTC](https://discourse.processing.org/t/random-walker-on-certain-part-of-the-canvas/41696/1 "2023-04-12T07:45:08Z")

</div>

Hi!

I’m playing around with a Random Walker code. How can I make the Walker to be displayed only at the bottom half of the screen with the following code? And also not disapearing from the canvas ?  
Thanks in advance for your help!

```auto
let grid;
let cols, rows;
let x;
let y;
let spacing = 10;

function make2DArray (cols, rows) {
let arr = new Array(cols);
  for (let i =0; i<arr.length; i++){
    arr[i] = new Array (rows);
    
  }
return arr;
}

function setup() {
  createCanvas(400, 400);
  cols = floor(width/spacing);
  rows = floor (height/spacing);
  x = cols/2;
  y = rows/2;
  background (0);
  grid = make2DArray(cols,rows);
}

function draw() {
stroke (255,100);
 strokeWeight (spacing * 0.5); 
  point(x * spacing, y*spacing);
  const r = floor (random(4));
  switch (r){
    case 0: x = x+1;
      break;
    case 1 : x = x -1;
      break;
    case 2 : y = y+1;
      break;
    case 3 : y = y-1;
      break;    
                       
  }
  
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 12, 2023, 2:30pm UTC](https://discourse.processing.org/t/random-walker-on-certain-part-of-the-canvas/41696/2 "2023-04-12T14:30:51Z")

</div>

What about an if-clause ? Before you change x or y, check if the new position would be allowed (stays inside the lower half of the screen).

---

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [April 12, 2023, 4:57pm UTC](https://discourse.processing.org/t/random-walker-on-certain-part-of-the-canvas/41696/3 "2023-04-12T16:57:38Z")

</div>

You’re right. But I don’t get why I can’t “translate” it only to the bottom of the canvas. Is it because it’s a 2D array?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 12, 2023, 5:18pm UTC](https://discourse.processing.org/t/random-walker-on-certain-part-of-the-canvas/41696/4 "2023-04-12T17:18:35Z")

</div>

> [@Alesk1969](#):
>
> `y = rows/2;`

Try this please

put ` /4` here

---

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [April 12, 2023, 5:23pm UTC](https://discourse.processing.org/t/random-walker-on-certain-part-of-the-canvas/41696/5 "2023-04-12T17:23:26Z")

</div>

Thank you for your reply but unfortunately that does not work. I think I had tried that before. I also tried `rows = floor ((height/2)/spacing);`. That doesn’t work either.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 12, 2023, 7:04pm UTC](https://discourse.processing.org/t/random-walker-on-certain-part-of-the-canvas/41696/6 "2023-04-12T19:04:57Z")

</div>

> [@Chrisir](#):
>
> Try this please
> 
> /4 here

This was wrong. My bad.

I meant ` y = (rows/4.0)*3.0;`

* * *

**Full Sketch**

```auto
let grid;
let cols, rows;
let x;
let y;
let spacing = 10;

function make2DArray (cols, rows) {
let arr = new Array(cols);
  for (let i =0; i<arr.length; i++){
    arr[i] = new Array (rows);
    
  }
return arr;
}

function setup() {
  createCanvas(400, 400);
  cols = floor(width/spacing);
  rows = floor (height/spacing);
  x = cols/2;
  y = (rows/4.0)*3.0;
  background (0);
  grid = make2DArray(cols,rows);
}

function draw() {
stroke (255,100);
 strokeWeight (spacing * 0.5); 
  point(x * spacing, y*spacing);
  const r = floor (random(4));
  switch (r){
    case 0: x = x+1;
      break;
    case 1 : x = x -1;
      break;
    case 2 : if((y+1)*spacing<width) y = y+1;
      break;
    case 3 : if((y-1)*spacing>width/2.0) y = y-1;
      break;    
                       
  }
  
}

```

---

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [April 12, 2023, 9:11pm UTC](https://discourse.processing.org/t/random-walker-on-certain-part-of-the-canvas/41696/7 "2023-04-12T21:11:08Z")

</div>

> [@Chrisir](#):
>
> y = (rows/4.0)\*3.0;

Thanks for your help and your time, but I still get the same result. The “walker” goes around the full canvas ☹

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 12, 2023, 9:14pm UTC](https://discourse.processing.org/t/random-walker-on-certain-part-of-the-canvas/41696/8 "2023-04-12T21:14:20Z")

</div>

> [@Chrisir](#):
>
> ```
> y = (rows/4.0)*3.0;
> 
> ```

This y is only the starting point for y.

You need to implement the _if-clauses_ we mentioned.

_Did you run my code?_

I made 2 (of 4) if-clauses.

---

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [April 12, 2023, 9:26pm UTC](https://discourse.processing.org/t/random-walker-on-certain-part-of-the-canvas/41696/9 "2023-04-12T21:26:20Z")

</div>

Oh no I didn’t, I’m sorry! You’re right it works! Thank you very much!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 12, 2023, 9:26pm UTC](https://discourse.processing.org/t/random-walker-on-certain-part-of-the-canvas/41696/10 "2023-04-12T21:26:56Z")

</div>

😉

please add the 2 missing if-clauses