Making rectangles behave like pixels after exporting

Processing Coding Questions
1

I don’t exactly know what should I title this but basically, I have the main simple function of a pixelart program here:

ArrayList<Sq> fill;
boolean f = true;

void setup() {
  size(1000, 600);
  fill = new ArrayList<Sq>();
}

void draw() {
  background(255, 255);
  noStroke();
  if (fill.size() > 600) f = false;
  if (f == true) {
    for (int y=0; y<height; y = y + 20) {
      for (int x=0; x<width; x = x + 20) {
        fill.add(new Sq(x, y));
      }
    }
  }
  println(fill.size());
  for (int i = fill.size()-1; i >= 0; i--) {
    Sq p = fill.get(i);
    p.display();
  }
}

void keyReleased() {
  if (key == 's') {
    PImage Save = get(0, 0, 1000, 600);
    Save.save("save.png");
  }
}

//------------------------------------------------------------------------------------------

class Sq {
  float f1 = 0;
  float f2 = 255;
  float f3 = 255;
  int x;
  int y;

  Sq(int x1, int y1) {
    x = x1;
    y = y1;
  }

  void display() {
    fill(f1, f2, f3);
    rect(x, y, 20, 20);

    if ( mousePressed && mouseX > x && mouseY > y && mouseX < x + 20 && mouseY < y + 20 ) {
      f1 = 100;
      f2 = 100;
      f3 = 100;
    }
  }
}

(squares dont show cause of noStroke() but press your mouse and drag to draw).

If I press ‘s’ it exports the sketch as a png file. But with the size of the window as resolution. Which means every single square in this program is 400 pixels each. How can I make it so every single square is one single pixel in the exported file.

I tried adding Save.resize(50,30); but the export is pretty blurry.

I have an idea how I can do this but I don’t know how to execute it. My idea is getting the color values of each square like p.f1; , p.f2; , p.f3; and then fill the pixel that is at the location of the square (if we think each square is a pixels) of the Save PImage. But I don’t know how exactly I could do that, any help would be appreciated.

I hope I explained it well my english is not very good :smiley: .

1 Like
2

Any reason, why you aren’t making the rectangles pixel size to begin with. I may be not fully grasping what you are trying to do.

3

Hello,

This is just an initial exploration… I edited your code to understand it and ended up plotting “pixels” in upper left.

The Arraylist is now only saving pixels that are drawn and not all of the grid points.

Code 
ArrayList<Sq> fill;

void setup()   
  {
  size(1000, 600);
  fill = new ArrayList<Sq>();
  }

void draw() 
  {
  background(0);
  noStroke();
    for (int y=0; y<height; y = y + 20) 
      {
      for (int x=0; x<width; x = x + 20) 
        {
       Sq p = new Sq(x, y);
       p.display();
       if(p.flag == true)
         {
         fill.add(new Sq(x, y));
         }   
       }
    }
  
  println(fill.size());
  for (int i = fill.size()-1; i >= 0; i--) 
    {
    Sq p = fill.get(i);
    p.display();
    }
  
  push();
  fill(255);
  rect(0, 0, width/20, height/20);
  
  for (int i = fill.size()-1; i >= 0; i--) 
    {
    Sq p2 = fill.get(i);
        
    println(p2.x/20, p2.y/20);

    stroke(0);
    strokeWeight(1);
    point(p2.x/20, p2.y/20); 
    }  
  pop();
  }

void keyReleased()
  {
  if (key == 's') 
    {
    PImage Save = get(0, 0, width, height);
    Save.save("save.png");
    }
  }

//------------------------------------------------------------------------------------------

class Sq 
  {
  float f1 = 0;
  float f2 = 255;
  float f3 = 255;
  int x;
  int y;
  boolean flag = false;

  Sq(int x1, int y1) 
    {
    x = x1;
    y = y1;
    }

  void display() 
    {
    fill(f1, f2, f3);
    rect(x, y, 20, 20);
    if ( mousePressed && mouseX > x && mouseY > y && mouseX < x + 20 && mouseY < y + 20 ) 
      {
      f1 = 100;
      f2 = 100;
      f3 = 100;
      flag = true;
      }
    }
  }

Consider PGraphics to save the “pixel” version to an image.

:)

image

2 Likes
4

It would be incredibly hard to draw something if they were all one pixel.

1 Like
5

Thank you so much! This is quite exactly what I wanted. And I think with PGraphics, I can save drawings with transparent background if Im not mistaken. I’ll try some stuff out.
Edit: Also got color working. Pretty cool.
Another edit: I tried set() instead of point and i looks like it works a bit better. point() was giving some off color pixels here and there.
Edit edit edit: The off color pixels were something else but I’ll use set anyways. I couldnt figure out the PGraphics stuff tho.