# Translate, Scale, or Random is causing a display hiccup **URL:** \ **Category:** Coding Questions\ **Created:** [September 27, 2022, 1:42am UTC](https://discourse.processing.org/t/translate-scale-or-random-is-causing-a-display-hiccup/38988 "2022-09-27T01:42:50Z")\ **Posts on this page:** 11\ **Page:** 1

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\ **Post date:** [September 27, 2022, 1:42am UTC](https://discourse.processing.org/t/translate-scale-or-random-is-causing-a-display-hiccup/38988/1 "2022-09-27T01:42:50Z")

Hello!! This is probably a simple oversight but I’m trying to flip the orientation of random blocks in a grid. I have put the random number generator in all possible locations – above setup, in setup, in draw, in nested for-loop… Current code shows where I believe it should be. However, some of the spots in the grid appear blank – an unintended result. The entire grid should be filled – no white spaces. I assume this is due to the random function somehow. But perhaps since translate(), and scale() are also in this block of code, they may somehow be the culprit(s)? The blank spaces are in different spots each run. First screen shot shows what happens with this code. Second screen shot shows when random function is moved out of nested for-loop, but still in draw(). I don’t know how to connect the SVG file so forum members can run the code, so am hoping the screen shots and accompanying code are enough info…(?) Thank you in advance for any insights! 🤓 ```auto PShape block; PShape t; PShape b; int sz = 200; int num; void setup() { size(800, 600); block = loadShape("blockblock.svg"); t = block.getChild("TOP"); b = block.getChild("BOTTOM"); noLoop(); //frameRate(1); } void draw() { background(255); noStroke(); //int num = int(random(10)); //println(num); for (float x = 0; x <= width; x+=sz) { for (float y = 0; y <= height; y+=sz) { num = int(random(10)); println(num); if (num <= 5) { shape(block, x, y, sz, sz); b.disableStyle(); fill(color (random(255), random(255), random(255))); shape(b, x, y, sz, sz); t.disableStyle(); fill(color (random(255), random(255), random(255))); shape(t, x, y, sz, sz); } else { pushMatrix(); translate(width, 0); scale(-1, 1); shape(block, x, y, sz, sz); b.disableStyle(); fill(color (random(255), random(255), random(255))); shape(b, x, y, sz, sz); t.disableStyle(); fill(color (random(255), random(255), random(255))); shape(t, x, y, sz, sz); popMatrix(); } } } } ``` ![Screen Shot 2022-09-26 at 8.57.43 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/5/65d235cf33ad217803e252a8cb50ce38a14e2233.png) ![Screen Shot 2022-09-26 at 8.59.09 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/a/8a02cfefe844e3b6463c5eebd3a06f10be463f68.png) ---

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\ **Post date:** [September 27, 2022, 2:12am UTC](https://discourse.processing.org/t/translate-scale-or-random-is-causing-a-display-hiccup/38988/2 "2022-09-27T02:12:48Z")

Hello @debxyz , > [@debxyz](#): > > I don’t know how to connect the SVG file so forum members can run the code An SVG is just text and you can share that. > **SVG text \< Click to open** > > ```auto > > > > > > ]> > > > ``` I used a combination of _Hide Details_ and _Preformatted Text_ in above example. I pasted the _SVG text_ from above into a _text file_ and renamed extension to _svg_ and voila! ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/8/4865560cd9cf76dec5a7fdd829308cc6c92b8b4c.png) The SVG is from one of the Processing examples. `:)` ---

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\ **Post date:** [September 27, 2022, 3:04am UTC](https://discourse.processing.org/t/translate-scale-or-random-is-causing-a-display-hiccup/38988/3 "2022-09-27T03:04:01Z")

Woah! Very good to know!! I’ll convert and upload the text tomorrow. Thank you @glv ! 🤓 ---

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\ **Post date:** [September 27, 2022, 3:29pm UTC](https://discourse.processing.org/t/translate-scale-or-random-is-causing-a-display-hiccup/38988/4 "2022-09-27T15:29:09Z")

Including SVG file code here: > **Click for SVG** > > \ > > .st0{fill:#CCCCCC;} 🤓 ---

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\ **Post date:** [September 27, 2022, 3:50pm UTC](https://discourse.processing.org/t/translate-scale-or-random-is-causing-a-display-hiccup/38988/5 "2022-09-27T15:50:05Z")

I have also tried a version without using an SVG file, and the same thing happens–blank areas in the grid… **I also noticed,** the random function is being called more than twice the number of grid cells. In this simplified example with **only 4 grid cells** , random is output to the console **9 times** instead of 4 times. I don’t understand why this is happening. And is this the source of the blank areas? ```auto int sz = 200; int num; void setup() { size(400, 400); noLoop(); //frameRate(1); } void draw() { background(255); noStroke(); //int num = int(random(10)); //println(num); for (int x = 0; x <= width; x+=sz) { for (int y = 0; y <= height; y+=sz) { num = int(random(10)); println(num); if (num <= 5) { fill(color (random(255), random(255), random(255))); triangle(x, y, x, y+sz, x+sz, y+sz); } else { pushMatrix(); translate(sz, 0); //translate(width, 0); scale(-1.0, 1.0); fill(color (random(255), random(255), random(255))); triangle(x, y, x, y+sz, x+sz, y+sz); popMatrix(); } } } } ``` ---

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\ **Post date:** [September 27, 2022, 4:41pm UTC](https://discourse.processing.org/t/translate-scale-or-random-is-causing-a-display-hiccup/38988/6 "2022-09-27T16:41:49Z")

It looks like you are using `scale(-1,1)` to flip your blocks, but consider where the origin of the block is when you do that. If the origin is in the upper left corner, then instead of your block drawing to the right of the origin, the flipped block is now drawing to the left and, presumably, on top of the previously drawn block in that space. Try replacing your `scale()` call with ```auto translate( sz/2, 0 ); scale( -1, 1 ); translate( -sz/2, 0 ); ``` and see if that fixes it. ---

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\ **Post date:** [September 27, 2022, 5:13pm UTC](https://discourse.processing.org/t/translate-scale-or-random-is-causing-a-display-hiccup/38988/7 "2022-09-27T17:13:46Z")

Hello @scudly Thank you for the suggestion! So I tried using > [@scudly](#): > > ```auto > translate( sz/2, 0 ); > scale( -1, 1 ); > translate( -sz/2, 0 ); > > ``` And… It didn’t work… 🙃 I will keep experimenting. 🤓 ---

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\ **Post date:** [September 27, 2022, 5:42pm UTC](https://discourse.processing.org/t/translate-scale-or-random-is-causing-a-display-hiccup/38988/8 "2022-09-27T17:42:19Z")

Sorry, I did that a bit off the cuff. Try this code instead: ```auto int sz = 200; int num; void setup() { size(400, 400); noLoop(); //frameRate(1); } void draw() { background(255); noStroke(); for (int x = 0; x <= width; x+=sz) { for (int y = 0; y <= height; y+=sz) { num = int(random(10)); println(num); pushMatrix(); translate( x, y ); if( num > 5 ) { translate(sz/2,0); scale(-1, 1); translate(-sz/2,0); } fill(color (random(255), random(255), random(255))); triangle(0, 0, 0, sz, sz, sz); popMatrix(); } } } ``` Although this would be more compact: ```auto int sz = 40; int num; void setup() { size(400, 400); noLoop(); //frameRate(1); } void draw() { background(255); noStroke(); for (int x = 0; x <= width; x+=sz) { for (int y = 0; y <= height; y+=sz) { pushMatrix(); translate( x, y ); fill(random(255), random(255), random(255)); rect( 0, 0, sz, sz ); fill(random(255), random(255), random(255)); triangle(0, 0, 0, sz, sz, random(10)<5 ? 0 : sz); popMatrix(); } } } ``` ---

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\ **Post date:** [September 27, 2022, 6:06pm UTC](https://discourse.processing.org/t/translate-scale-or-random-is-causing-a-display-hiccup/38988/9 "2022-09-27T18:06:25Z")

> [@scudly](#): > > `random(10)<5 ? 0 : sz);` My first time encountering this syntax, so want to confirm I am reading this correctly: Is it: **if random number is less than 5, y = 0, else equal to sz**? ---

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\ **Post date:** [September 27, 2022, 6:11pm UTC](https://discourse.processing.org/t/translate-scale-or-random-is-causing-a-display-hiccup/38988/10 "2022-09-27T18:11:57Z")

And THANK YOU @scudly !!! Both of these versions totally work!! 😂 🤓 ---

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\ **Post date:** [September 27, 2022, 6:35pm UTC](https://discourse.processing.org/t/translate-scale-or-random-is-causing-a-display-hiccup/38988/11 "2022-09-27T18:35:47Z")

Yes, you’re correct.