# Need help w/ infinite world w/ random numbers

**URL:** <https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086>\
**Category:** Coding Questions\
**Created:** [May 25, 2022, 5:44pm UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086 "2022-05-25T17:44:55Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Voleia](https://avatars.discourse-cdn.com/v4/letter/v/b77776/32.png) [@Voleia](https://discourse.processing.org/u/Voleia)\
**Post date:** [May 25, 2022, 5:44pm UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/1 "2022-05-25T17:44:55Z")

</div>

Hello. So, I am trying to make a program that generates an infinite world where each block has a 50% chance of being either blue or red. The program I have works fine when I move side to side, but when I move up and down the blocks are completely randomized each time (rather than just shifting over). Is there any way I can make it work, or even use a better system? I am a total newbie.

```auto
let relCenX=300;
let relCenY=300;
let wKey=false;
let sKey=false;
let aKey=false;
let dKey=false;

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

function draw() {
	background(100);
	noStroke();
	fill(0);
	rectMode(CORNER);
	rect(0,0,600,600)
	
	if (aKey) {
		relCenX=relCenX-1;
	}
	if (dKey) {
		relCenX=relCenX+1;
	}
	if (sKey) {
		relCenY=relCenY+1;
	}
	if (wKey) {
		relCenY=relCenY-1
	}
	
	let blockBeingCheckedX=round(relCenX/50);
	let blockBeingCheckedY=round(relCenY/50);
	
	for (let i = 0; i < 11; i = i + 1) {
		for (let e = 0; e < 11; e = e + 1) {
			randomSeed((blockBeingCheckedX*184012.32413*blockBeingCheckedY))
			let e2=round(random(1,2))
			if (e2 == 1) {
				fill(255,0,0);
			} else {
				fill(0,0,255);
			}
			rect(50+(50*e)-((((relCenX+25)/50)-floor((relCenX+25)/50))*50),50+(50*i)-((((relCenY+25)/50)-floor((relCenY+25)/50))*50),50,50)
			blockBeingCheckedX=blockBeingCheckedX+1;
		}
		blockBeingCheckedY=blockBeingCheckedY+1;
	}
}

function keyPressed() {
	if (key=='a') {
		aKey=true;
	}
	if (key=='w') {
		wKey=true;
	}
	if (key=='d') {
		dKey=true;
	}
	if (key=='s') {
		sKey=true;
	}
}

function keyReleased() {
	if (key=='a') {
		aKey=false;
	}
	if (key=='w') {
		wKey=false;
	}
	if (key=='d') {
		dKey=false;
	}
	if (key=='s') {
		sKey=false;
	}
}

```

---

<div class="post-metadata">

**Author:** ![The\_Traveler](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/the_traveler/32/16252_2.png) [@The\_Traveler](https://discourse.processing.org/u/The_Traveler)\
**Post date:** [May 25, 2022, 6:39pm UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/2 "2022-05-25T18:39:25Z")

</div>

It doesn’t run for me. I simply get a blank screen under p5.js. You are missing some variable declarations.

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [May 25, 2022, 7:02pm UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/3 "2022-05-25T19:02:46Z")

</div>

Hi @Voleia,

We cannot execute your code, since it is incomplete, leaving some of the variables undefined. That includes `aKey`, `dKey`, `sKey`, and `wKey`.

---

<div class="post-metadata">

**Author:** ![Voleia](https://avatars.discourse-cdn.com/v4/letter/v/b77776/32.png) [@Voleia](https://discourse.processing.org/u/Voleia)\
**Post date:** [May 25, 2022, 9:34pm UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/4 "2022-05-25T21:34:33Z")

</div>

I added the variable declarations

---

<div class="post-metadata">

**Author:** ![Voleia](https://avatars.discourse-cdn.com/v4/letter/v/b77776/32.png) [@Voleia](https://discourse.processing.org/u/Voleia)\
**Post date:** [May 25, 2022, 9:35pm UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/5 "2022-05-25T21:35:04Z")

</div>

try it now, i added the whole thing

---

<div class="post-metadata">

**Author:** ![The\_Traveler](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/the_traveler/32/16252_2.png) [@The\_Traveler](https://discourse.processing.org/u/The_Traveler)\
**Post date:** [May 25, 2022, 10:00pm UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/6 "2022-05-25T22:00:44Z")

</div>

Nope. No response from pressing keys. Javagar points out the problem in his post. 👍

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [May 25, 2022, 10:19pm UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/7 "2022-05-25T22:19:15Z")

</div>

Your code still leaves `aKey`, `dKey`, `sKey`, and `wKey` undefined.

Perhaps you intended to define those variables here:

```auto
let w=false;
let s=false;
let a=false;
let d=false;

```

---

<div class="post-metadata">

**Author:** ![Voleia](https://avatars.discourse-cdn.com/v4/letter/v/b77776/32.png) [@Voleia](https://discourse.processing.org/u/Voleia)\
**Post date:** [May 26, 2022, 1:15am UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/8 "2022-05-26T01:15:14Z")

</div>

Right, I did that by accident due to changing something. I’ll fix tat in the post, but its not what was causing the problem for me.

---

<div class="post-metadata">

**Author:** ![Voleia](https://avatars.discourse-cdn.com/v4/letter/v/b77776/32.png) [@Voleia](https://discourse.processing.org/u/Voleia)\
**Post date:** [May 26, 2022, 1:16am UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/9 "2022-05-26T01:16:18Z")

</div>

Thanks. I fixed it in the post, but its not what was causing the problem: just an editing error.

---

<div class="post-metadata">

**Author:** ![The\_Traveler](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/the_traveler/32/16252_2.png) [@The\_Traveler](https://discourse.processing.org/u/The_Traveler)\
**Post date:** [May 26, 2022, 2:19am UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/10 "2022-05-26T02:19:46Z")

</div>

Offhand, it looks like your rect() function is generating the same code for blocks w,s as it does for a,d. You may need another rect() function that takes into account up and down movement from w,s key presses.

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [May 26, 2022, 4:18am UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/11 "2022-05-26T04:18:21Z")

</div>

Inside the nested loop, you are using randomization to recompute the color of each block. You can do that once at the outset instead in the `setup` function, and store the block colors in an `Array`. Then, whenever drawing the world, access the `Array` to get the color of each block.

---

<div class="post-metadata">

**Author:** ![Voleia](https://avatars.discourse-cdn.com/v4/letter/v/b77776/32.png) [@Voleia](https://discourse.processing.org/u/Voleia)\
**Post date:** [May 26, 2022, 10:45am UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/12 "2022-05-26T10:45:51Z")

</div>

Thanks, I’ll try that

---

<div class="post-metadata">

**Author:** ![Voleia](https://avatars.discourse-cdn.com/v4/letter/v/b77776/32.png) [@Voleia](https://discourse.processing.org/u/Voleia)\
**Post date:** [May 26, 2022, 10:47am UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/13 "2022-05-26T10:47:13Z")

</div>

Javagar, I need a few million total blocks, which is too much for an array

---

<div class="post-metadata">

**Author:** ![RichardDL](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@RichardDL](https://discourse.processing.org/u/RichardDL)\
**Post date:** [May 26, 2022, 11:45am UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/14 "2022-05-26T11:45:57Z")

</div>

Hi @Voleia, I tried your sketch, then wanted the edges scrolling more smoothly, so I changed lines 31,32 to

```auto
  for (let i = -1; i < 12; i++) {
    for (let e = -1; e < 12; e++) {

```

and you need to know that i = i + 1; can be simplified to i += 1; (many operators do the same) and then there’s i++;

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [May 26, 2022, 12:02pm UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/15 "2022-05-26T12:02:59Z")

</div>

Please explain how this statement is designed to get us to the necessary place in the random sequence to handle up and down movements through the world:

```
randomSeed((blockBeingCheckedX*184012.32413*blockBeingCheckedY))

```

Alternatively, it might be worthwhile to consider using two-dimensions of Perlin noise space to define the colors of the blocks. See [`noise()`](https://p5js.org/reference/#/p5/noise).

_EDIT:_

Try out the demo code below. Note that the viewer’s position moves toward the lower right. You can modify the code to use the keys, instead, to control the viewer’s position.

```auto
function setup() {
  createCanvas(110, 110);
  frameRate(2);
}

function draw() {
  for (let x = 0; x <= 10; x++) {
    for (let y = 0; y <= 10; y++) {
      if (noise(x + frameCount, y + frameCount) < 0.5) {
        fill(0);
      } else {
        fill(255);
      }
      rect(x * 10, y * 10, 10, 10);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Voleia](https://avatars.discourse-cdn.com/v4/letter/v/b77776/32.png) [@Voleia](https://discourse.processing.org/u/Voleia)\
**Post date:** [May 26, 2022, 1:16pm UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/16 "2022-05-26T13:16:17Z")

</div>

Thanks! That works for what I need

---

<div class="post-metadata">

**Author:** ![Voleia](https://avatars.discourse-cdn.com/v4/letter/v/b77776/32.png) [@Voleia](https://discourse.processing.org/u/Voleia)\
**Post date:** [May 26, 2022, 4:16pm UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/17 "2022-05-26T16:16:49Z")

</div>

Hey, I have another question. Do you know how to make the noise bigger? Like, make each “blob” of noise twice as big or something like that

---

<div class="post-metadata">

**Author:** ![The\_Traveler](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/the_traveler/32/16252_2.png) [@The\_Traveler](https://discourse.processing.org/u/The_Traveler)\
**Post date:** [May 26, 2022, 4:56pm UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/18 "2022-05-26T16:56:32Z")

</div>

> **[Reference](https://processing.org/reference/noise_.html)**
>
> Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more natural, harmonic succession of numbers than that of the standard random() …

> **[Reference](https://processing.org/reference/noiseDetail_.html)**
>
> Adjusts the character and level of detail produced by the Perlin noise function. Similar to harmonics in physics, noise is computed over several octaves. Lower octaves contribute more to the output si…

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [May 26, 2022, 5:05pm UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086/19 "2022-05-26T17:05:22Z")

</div>

> [@Voleia](#):
>
> … make each “blob” of noise twice as big or something like that …

Is a “blob” of noise simply a block, or is it a cluster of adjacent blocks with the same color?

_EDIT:_

Assuming that a “blob” of noise is a cluster of adjacent blocks with the same color, you can try this:

```auto
function setup() {
  createCanvas(410, 410);
  frameRate(2);
}

function draw() {
  for (let x = 0; x <= 40; x++) {
    for (let y = 0; y <= 40; y++) {
      fill(blockColorMapper(x, y, frameCount, frameCount));
      rect(x * 10, y * 10, 10, 10);
    }
  }
}

function blockColorMapper(x0, y0, xShift, yShift) {
  // x0 -> original x coordinate of block
  // y0 -> original y coordinate of block
  // xShift -> how much to shift x coordinate of block
  // yShift -> how much to shift y coordinate of block
  let blobFactor = 5; // higher values -> bigger blobs of color
      if (noise((x0 + xShift) / blobFactor, (y0 + yShift) / blobFactor) < 0.5) {
        return "red";
      } else {
        return "blue";
      }
}

```

Note the `blobFactor` variable. Here’s an image with a `blobFactor` of `5`:

 ![block_world](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/7/174f06f5e3b0675fe636dd8008edcbbb9f94285c.png)

Also see @The_Traveler’s suggested links.