Issue when rendering small rectangles

Processing Coding Questions
1

Hi, I’m trying to render noSmooth small rectangles, and I don’t know why I’m getting them non simmetrical (1st one), or not centered (2nd one). Do you know what’s the reason?

image
image910×310 72.5 KB

1 Like
2

Did you look at rectMode() command?

But maybe it’s just too small

3

Hello @ishback ,

Do some exploration…

Change the background to white and you will see the effect of:
stroke(0);

Take a look at the y spacing of the rectangles… you go from 2 to 32 to 64.
Are they equally spaced?

Look up all the references to understand the code:
https://processing.org/

:)

4

Thanks both.
I see the effect of stroke, but see how when a rectangle is rendered with stroke is simmetrical (middle rectangle) and one is without stroke, the left side is rounder than the right one (top rectangle).

Not sure why this is happening.

5

Hello,

A very simple pixel viewer that I use to zoom in on sketch.

Try different renderers, smooth() values, etc.

I even tried odd and even. No pun intended!

Some code for you to experiment with:

// Pixel Viewer
// v1.0.0
// GLV 2022-08-06

PImage img; 
boolean toggle;
int oddeven, count, choice;

void setup() 
  {
  //size(650, 600);   
  size(650, 600, P2D); 
  //size(650, 600, P3D);
  background(255);
  //smooth(4);        // Default is 2
  noSmooth();       
  //strokeWeight(1);
  }
  
void draw() 
  {
  background(255);
  fill(255, 0, 0);
  
  if(oddeven == 0)
    {
    stroke(0);
    rect(15, 20, 28, 30, 8, 8, 8, 8);
    
    noStroke();
    rect(15, 55, 28, 30, 8, 8, 8, 8);
    rect(15, 90, 28, 30);
    
    circle(30, 150, 30);
    }
  else
    {
    stroke(0);
    rect(15, 20, 29, 31, 9, 9, 9, 9);
    
    noStroke();
    rect(15, 55, 29, 31, 9, 9, 9, 9);
    rect(15, 90, 29, 31);
    
    circle(30, 150, 31);
    }
  
  img = get(mouseX-25, mouseY-25, 50, 50); // gets a rectangular section of image
  
  translate(100, 50);
  // Magnifies 20x
  int m = 10;
  stroke(128);
  for(int y = 0; y< img.height; y++)
    {
    for(int x = 0; x< img.width; x++)
      {
      int c = img.pixels[x+y*img.width];
      fill(c);
      rect(x*m, y*m, m, m);
      }
    }
  }
  
void keyPressed()
  {
  toggle = !toggle;
  
  if (toggle)
    {
    oddeven = 0; 
    println("odd");
    }
  else
    {
    oddeven = 1;
    println("even");
    }
  }

P2D and noSmooth():

image
image652×632 3.25 KB

I have experienced this before but don’t have an answer for this behavior.

:)

1 Like