Translate, Scale, or Random is causing a display hiccup

Processing Coding Questions
1

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!
:nerd_face:

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
Screen Shot 2022-09-26 at 8.57.43 PM1622×1220 111 KB

Screen Shot 2022-09-26 at 8.59.09 PM
Screen Shot 2022-09-26 at 8.59.09 PM1630×1218 123 KB

2

Hello @debxyz ,

An SVG is just text and you can share that.

SVG text < Click to open 
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 12.0.1, SVG Export Plug-In  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
	<!ENTITY ns_svg "http://www.w3.org/2000/svg">
	<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
<svg  version="1.0" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 width="281" height="285" viewBox="-0.826 -0.359 281 285" enable-background="new -0.826 -0.359 281 285" xml:space="preserve">
<defs>
</defs>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#010101" stroke="#010101" stroke-width="9.6086" d="M113.433,30.168
	c0,13.984-10.961,25.318-24.484,25.316C75.426,55.479,64.46,44.14,64.46,30.155S75.422,4.836,88.944,4.839
	C102.467,4.846,113.433,16.184,113.433,30.168z"/>
<g>
	<path fill="#DCD1C9" d="M39.651,46.68c-44.969,43.663-50.07,140.646-1.164,192.438c51.409,54.444,145.329,53.947,195.813,3.567
		c51.877-51.769,54.604-131.891,8.549-188.207C192.479-7.108,104.535-16.322,39.651,46.68z"/>
	<g>
		<path fill="none" d="M39.651,46.68c-44.969,43.663-50.07,140.646-1.164,192.438c51.409,54.444,145.329,53.947,195.813,3.567
			c51.877-51.769,54.604-131.891,8.549-188.207C192.479-7.108,104.535-16.322,39.651,46.68z"/>
		<path fill="#010101" d="M36.934,43.962C6.838,73.562-3.205,119.66,0.862,160.518c2.165,21.755,8.708,43.123,20.062,61.861
			c11.465,18.922,28.43,34.059,47.793,44.567c38.533,20.912,87.19,22.636,127.435,5.596c42.95-18.185,73.317-58.809,81.129-104.54
			c8.081-47.314-9.347-95.687-43.426-128.983C201.161,7.076,154.53-6.69,109.856,3.103C82.15,9.177,57.217,24.448,36.934,43.962
			c-3.578,3.442,1.864,8.871,5.436,5.436c35.482-34.137,84.699-50.869,132.869-36.563c46.25,13.736,81.641,54.486,92.779,100.845
			c11.391,47.407-5.127,98.258-41.2,130.783c-33.292,30.017-82.76,38.231-125.342,27.153c-22.003-5.724-42.288-17.146-58.358-33.236
			c-15.779-15.8-25.755-36.354-31.091-57.858c-10.125-40.805-3.8-90.13,23.262-123.42c2.202-2.709,4.594-5.257,7.082-7.704
			C45.907,45.918,40.469,40.485,36.934,43.962z"/>
	</g>
</g>
<path opacity="0.22" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#010101" stroke-width="4.2158" d="
	M253.34,71.086c0,0-21.447,73.052-144.24,113.348"/>
<path opacity="0.22" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#010101" stroke-width="4.2158" d="
	M50.023,37.374c0,0,16.015,107.296,184.966,205.785"/>
<g>
	<path fill="#010101" d="M174.355,101.981c-43.021-7.701-111.662,3.068-137.524,26.602c-39.524,35.657,16.247,121.859,56.42,133.004
		c52.411,14.541,116.388,7.237,143.871-45.502c32.469-64.455-4.94-99.36-60.651-114.104"/>
	<g>
		<path fill="none" d="M174.355,101.981c-43.021-7.701-111.662,3.068-137.524,26.602c-39.524,35.657,16.247,121.859,56.42,133.004
			c52.411,14.541,116.388,7.237,143.871-45.502c32.469-64.455-4.94-99.36-60.651-114.104"/>
		<path fill="#010101" d="M175.788,99.106c-22.491-3.917-45.875-2.992-68.383,0.283c-21.383,3.111-43.581,8.509-62.346,19.588
			c-14.892,8.792-24.576,21.822-25.77,39.378c-1.249,18.36,5.922,36.67,14.672,52.43c9.148,16.477,21.649,31.662,36.767,42.994
			c15.058,11.288,33.858,14.645,52.219,16.477c42.724,4.263,88.239-8.147,113.104-45.316c15.824-23.655,24.019-56.618,9.717-82.75
			c-13.166-24.056-41.782-36.14-66.927-42.883c-3.38-0.906-9.645,4.035-4.738,5.351c19.54,5.24,39.436,13.162,54.013,27.673
			c13.713,13.652,18.818,31.942,16.123,50.89c-3.305,23.229-15.872,46.106-34.214,60.756
			c-17.037,13.607-38.688,19.634-60.147,21.017c-11.116,0.716-22.279-0.017-33.288-1.619c-9.442-1.374-19.371-3.145-28.102-7.137
			c-16.275-7.442-29.36-22.438-39.418-36.794c-10.987-15.681-19.566-34.055-21.424-53.286c-0.806-8.338,0.27-16.99,3.752-24.637
			c3.572-7.842,10.018-13.394,17.18-17.892c17.482-10.98,39.337-15.744,59.494-18.676c21.364-3.108,43.522-3.81,64.854-0.096
			C176.822,105.536,181.239,100.055,175.788,99.106L175.788,99.106z"/>
	</g>
</g>
<g>
	<path fill="#ED1B6A" d="M250.235,163.193c-5.812-31.253-35.123-50.524-72.66-60.612h-2.145
		c-43.628-7.931-113.24,3.161-139.468,27.398c-10.321,9.456-14.197,22.372-13.625,36.523l4.348,3.13
		c8.622,7.931,17.963-3.604,22.99-9.373c6.469-7.93,9.343-12.977,19.403-15.86c9.341-3.606,18.684-2.884,28.019-4.326
		c8.624-1.442,15.096-5.046,23.713-5.768c7.906-0.721,15.093-5.768,22.996-2.884c3.597,0.721,6.468,2.884,10.058,3.605
		c4.317,0,8.623-1.442,12.938-0.721c5.03,1.442,6.466,5.768,11.495,7.21c5.749,1.441,7.902,1.441,12.934,5.048
		c4.314,2.163,7.907,5.045,12.217,7.208c5.747,2.883,10.058,1.443,15.087,2.883c6.472,2.164,7.182,10.095,15.092,10.814
		c4.312,0,12.214-1.439,15.808-3.603L250.235,163.193z"/>
</g>
<g>
	<path fill="#ED1B6A" d="M98.567,263.236c50.975,14.76,109.2,2.759,136.183-45.144c0.402-0.735,0.743-1.448,1.124-2.178
		l-2.929-2.908c0-0.634-0.696-2.543-1.388-3.178c-11.829-13.353-41.738,21.617-55.656,19.074c-5.565-1.271-5.565-5.725-12.519-3.817
		c-4.176,0.639-7.652,3.817-11.826,4.453c-5.562,1.907-5.562-0.636-10.437-0.636c-3.475-0.636-7.651,1.271-11.128,1.907
		c-11.132,1.907-18.086-1.271-27.134-5.086c-6.953-3.178-15.303-5.086-22.255-8.268c-5.566-2.542-31.306-16.53-34.782-4.45
		c0,0-1.272,1.979-2.911,4.764C56.87,238.188,72.218,255.607,98.567,263.236z"/>
</g>
<g>
	<path fill="#FFFFFF" d="M88.249,157.79c6.698,2.19,16.259-6.914,17.8-13.337c1.535-8.641-2.75-23.457-11.903-26.308
		c-10.047-3.29-28.312,4.297-30.956,14.044c-3.752,13.073,11.67,23.428,22.827,25.609"/>
</g>
<g>
	<path fill="#FFFFFF" d="M90.08,235.423c0.705-2.8,4.232-10.5,9.167-12.601c7.054-2.8,16.222,2.101,19.042,8.399
		c4.938,8.401,0,18.898-8.463,19.601c-10.579,1.399-17.631-4.2-20.451-12.601"/>
</g>
<g>
	<path fill="#FFFFFF" d="M79.232,236.037c9.167-3.502,3.55-27.247-8.463-22.401c-17.366,7-2.998,25.726,8.288,22.226"/>
</g>
<g>
	<path fill="#FFFFFF" d="M126.639,252.798c-10.073-22.721,15.564-39.986,31.131-24.539c7.322,7.271,9.04,23.288-1.948,27.832
		C149.414,258.816,132.13,258.25,126.639,252.798"/>
</g>
<g>
	<path fill="#FFFFFF" d="M50.407,213.636c0-7.001,9.875-9.801,11.99-1.401c2.116,11.199-12.696,6.827-11.903,1.314"/>
</g>
<g>
	<path fill="#FFFFFF" d="M194.573,241.075c5.755-10.238-17.841-27.873-25.184-14.225c-10.609,19.727,17.177,26.05,24.887,14.197"/>
</g>
<g>
	<path fill="#FFFFFF" d="M196.846,228.575c-0.241-1.773,0.016-7.014,2.379-9.352c3.42-3.218,9.84-2.478,12.921,0.511
		c4.787,3.723,4.364,10.9-0.356,13.23c-5.777,3.211-11.137,1.593-14.702-2.614"/>
</g>
<g>
	<path fill="#FFFFFF" d="M216.494,212.062c0-7.002,9.875-9.803,11.989-1.401c2.116,11.2-12.695,6.824-11.903,1.313"/>
</g>
<g>
	<path fill="#FFFFFF" d="M59.668,149.918c0.314,2.627-0.19,10.368-3.735,13.762c-5.132,4.677-14.6,3.434-19.084-1.06
		c-6.985-5.614-6.186-16.212,0.844-19.543c8.613-4.61,16.496-2.085,21.666,4.21"/>
</g>
<g>
	<path fill="#FFFFFF" d="M184.648,158.552c-6.402,2.938-16.947-5.027-19.219-11.233c-2.516-8.407,0.036-23.615,8.801-27.482
		c9.604-4.405,28.62,1.061,32.369,10.445c5.229,12.562-8.9,24.596-19.734,28.025"/>
</g>
<g>
	<path fill="#FFFFFF" d="M207.767,150.477c-0.341,2.864,0.208,11.304,4.072,15.005c5.597,5.096,15.921,3.741,20.806-1.158
		c7.618-6.12,6.745-17.673-0.918-21.306c-9.391-5.028-17.984-2.273-23.621,4.589"/>
</g>
<g>
	<circle fill="#010101" cx="36.818" cy="77.957" r="19.355"/>
</g>
<g>
	<circle fill="#010101" cx="237.251" cy="76.863" r="22.024"/>
</g>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="36.677" cy="76.608" r="16.548"/>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="237.924" cy="76.074" r="19.217"/>
<path opacity="0.22" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#010101" stroke-width="2.4" d="M187.23,11.758
	c-13.361,38.694-59.96,40.978-115.854,73.392"/>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#F7F8F8" cx="62.383" cy="43.059" r="5.072"/>
<polygon fill="#9F9F9F" points="65.342,42.071 63.369,42.071 63.369,40.1 61.396,40.1 61.396,42.071 59.425,42.071 59.425,44.046 
	61.396,44.046 61.396,46.018 63.369,46.018 63.369,44.046 65.342,44.046 "/>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#F7F8F8" cx="68.255" cy="56.778" r="5.072"/>
<polygon fill="#9F9F9F" points="71.213,55.79 69.24,55.79 69.24,53.819 67.268,53.819 67.268,55.79 65.296,55.79 65.296,57.765 
	67.268,57.765 67.268,59.736 69.24,59.736 69.24,57.765 71.213,57.765 "/>
<ellipse transform="matrix(0.8929 -0.4502 0.4502 0.8929 -53.4242 36.5359)" fill-rule="evenodd" clip-rule="evenodd" fill="#F7F8F8" cx="50.106" cy="130.595" rx="5.072" ry="3.111"/>
<polygon fill="#9F9F9F" points="52.476,128.724 50.714,129.611 50.169,128.532 48.407,129.42 48.951,130.5 47.192,131.386 
	47.736,132.468 49.496,131.58 50.041,132.661 51.803,131.774 51.259,130.691 53.02,129.803 "/>
<ellipse fill-rule="evenodd" clip-rule="evenodd" fill="#F7F8F8" cx="170.956" cy="251.875" rx="5.072" ry="3.644"/>
<polygon fill="#9F9F9F" points="173.912,251.166 171.94,251.166 171.94,249.75 169.969,249.75 169.969,251.166 167.996,251.166 
	167.996,252.583 169.969,252.583 169.969,254 171.94,254 171.94,252.583 173.912,252.583 "/>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#F7F8F8" cx="248.846" cy="109.625" r="5.071"/>
<polygon fill="#9F9F9F" points="251.805,108.637 249.831,108.637 249.831,106.666 247.858,106.666 247.858,108.637 245.887,108.637 
	245.887,110.612 247.858,110.612 247.858,112.584 249.831,112.584 249.831,110.612 251.805,110.612 "/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#E54097" d="M107.625,29.171c0,10.696-8.384,19.365-18.727,19.363
	c-10.343-0.003-18.73-8.676-18.73-19.373S78.553,9.796,88.896,9.799C99.238,9.803,107.625,18.475,107.625,29.171z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#AD208E" d="M99.555,29.17c0,5.887-4.771,10.657-10.656,10.655
	c-5.885,0-10.657-4.776-10.66-10.66c0-5.888,4.771-10.658,10.656-10.657C94.781,18.51,99.555,23.283,99.555,29.17z"/>
<g>
	<path fill="#F490AF" d="M88.895,7.848c-11.386-0.002-20.613,9.54-20.613,21.314c0,11.772,9.23,21.32,20.617,21.323
		c11.385,0.003,20.612-9.539,20.612-21.312C109.511,17.4,100.278,7.853,88.895,7.848L88.895,7.848z M88.9,47.361
		c-9.646-0.002-17.494-8.166-17.494-18.199c0-4.88,1.832-9.462,5.158-12.901c3.299-3.412,7.678-5.29,12.33-5.289
		c9.646,0.004,17.493,8.169,17.493,18.2c0,4.88-1.832,9.462-5.158,12.901C97.93,45.485,93.551,47.362,88.9,47.361L88.9,47.361z"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#F490AF" d="M103.231,19.386c0,3.882-3.143,7.027-7.024,7.026
	c-3.887,0-7.03-3.149-7.033-7.03c0-3.882,3.146-7.027,7.027-7.026C100.085,12.358,103.231,15.505,103.231,19.386z"/>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="100.37" cy="26.965" r="3.905"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M101.996,34.82c0,1.424-1.154,2.577-2.581,2.577
	c-1.423,0-2.575-1.156-2.575-2.579c0-1.424,1.152-2.576,2.575-2.575C100.838,32.243,101.996,33.397,101.996,34.82z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#E54097" d="M134.252,19.146c0,5.71-4.476,10.339-9.998,10.337
	s-10-4.632-10-10.343c0-5.711,4.476-10.339,9.998-10.338C129.774,8.805,134.252,13.435,134.252,19.146z"/>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#AD208E" cx="124.253" cy="19.143" r="5.69"/>
<g>
	<path fill="#F490AF" d="M124.252,7.761c-6.079-0.001-11.005,5.093-11.005,11.38c0,6.285,4.927,11.382,11.007,11.384
		c6.079,0.001,11.005-5.093,11.005-11.379S130.329,7.764,124.252,7.761L124.252,7.761z M124.254,28.857
		c-5.149-0.001-9.339-4.36-9.339-9.716c0-2.606,0.978-5.052,2.754-6.889c1.761-1.821,4.099-2.824,6.583-2.823
		c5.149,0.002,9.339,4.361,9.339,9.717c0,2.605-0.978,5.051-2.754,6.888C129.076,27.855,126.738,28.858,124.254,28.857
		L124.254,28.857z"/>
</g>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#F490AF" cx="128.154" cy="13.92" r="3.753"/>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="130.378" cy="17.967" r="2.085"/>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="129.87" cy="22.161" r="1.376"/>
</svg>

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
image629×519 26.7 KB

The SVG is from one of the Processing examples.

:)

3 Likes
3

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

4

Including SVG file code here:

Click for SVG <?xml version="1.0" encoding="utf-8"?>

.st0{fill:#CCCCCC;}

:nerd_face:

5

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?

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();
      }
    }
  }
}
6

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

translate( sz/2, 0 );
scale( -1, 1 );
translate( -sz/2, 0 );

and see if that fixes it.

7

Hello @scudly
Thank you for the suggestion!
So I tried using

And…
It didn’t work… :upside_down_face:

I will keep experimenting.
:nerd_face:

8

Sorry, I did that a bit off the cuff. Try this code instead:

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:

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();
    }
  }
}
1 Like
9

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?

10

And THANK YOU @scudly !!!

Both of these versions totally work!! :joy:
:nerd_face:

11

Yes, you’re correct.

1 Like