Turn grid on and off

Programming Questions

sheva29

in Programming Questions • 1 year ago

Hello,

So I am working on this drawing tool for 8 bit games. It is a school assignment. And I pretty much have it figured out. I just wanted to add a last feature which is turning off the grid that is is used to draw the pixels before you save it, but I have not accomplished it. I figured it out on the void setup but since I have everything on the void draw it does not seem to work. Any suggestions are more than welcome, here is the code for the program and at the end is my temporary solution that when incorporated did not work:

int xPos;
int yPos;
int wRect;
int hRect;
PFont myFontPixelizer;
PFont myFontPixelizer2;
int fontPosX = 30;
int fontPosY = 30;
color pixelColor;
boolean unload = false;
int saveP = 1;
PImage myImage;
PImage myImage1;
PImage temp;
PImage a;
void setup() {
size(650, 650);
myImage = loadImage("colorpalette.jpeg");
myImage1 = loadImage("mario.png");
a = loadImage("grid.png");
frame.setTitle("|| Pixelizer v1.3 ||");
frame.setLocationRelativeTo(null);
smooth();
pixelColor= myImage.get(mouseX, mouseY);
myFontPixelizer= loadFont("GB18030Bitmap-48.vlw");
// gridOn = false;
myFontPixelizer2= loadFont("GB18030Bitmap-14.vlw");
smooth();
background(255);
if(!unload){
image(a,200,200);
}
if( key =='g'){
unload=true;
}
}
void draw() {
//Title---------------------------------->
image(myImage, 30, 310);
image(myImage1, 30, 90);
textFont(myFontPixelizer);
text("Pixelizer", 30, 70);
fill(pixelColor);
//Define my variables and functions
// mousePixel();
instructions();
noStroke();
//Get color------------------------------->
if (keyPressed && key == 'c') {
// if (key == 'c') {
pixelColor = myImage.get(mouseX - 30, mouseY - 310);
}
//Grid------------------------------------>
for (int i = 0; i <= 400 ; i= i+20) {
for (int j = 0; j <= 400 ; j= j+20) {
rect(200+i, 200+j, 20, 20);
noStroke();
}
}
}
void keyTyped() {
if ( key == 's') {
PImage temp = get(200, 200, 420, 420);
temp.save("image"+saveP+".png");
saveP++;
}
}
void instructions() {
noFill();
textFont(myFontPixelizer2);
text(" Use the Grid to draw Mario press 's' to save \n press 'c' on the color palette to get color \n mouse click on the center of \n each square to draw a pixel", 200, 100);
}
void mousePressed() {
for (int i = 200; i < 620 ; i+=20) {
for (int j = 200; j < 620; j+=20) {
if (mouseX > i && mouseX <= i+20) {
if (mouseY > j && mouseY <= j+20) {
fill(pixelColor);
rect(i, j, 20, 20);
}
}
}
}
}

temporary solution:

boolean grid = true;
void setup() {
background(230);
size(500, 500);
ellipseMode(CORNER);
}
void draw() {
background(127);
if (grid) {
for (int i = 0; i < 240 ; i+=30) {
for (int j = 0; j < 240; j+=30) {
rect(i, j, 30, 30);
}
}
}
println(grid);
}
void keyPressed() {
if (key == 'g' && grid == true) {
grid = false;
}
else if ((key == 'g') && grid == false) {
grid = true;
}
}

Replies(7)

PhiLho

Re: Turn grid on and off

1 year ago

What "did not work"? Since you don't show the "incorporated" result, we cannot see what you did wrong.

Some notes:
- In the original code, you don't have a background call at the start of draw(), so nothing (except perhaps images? we don 't have them, so we cannot try your code) erase the grid if you omit to draw it.
- Again, in the original code, you have noStroke() in the loop. It should be outside of the loop, and before it. You can also draw the grid with line()...
- In the attempt, you can simplify the keyPressed() function:
void keyPressed() {
if (key == 'g') {
grid = !grid; // ! is the NOT operator, ie. returns the opposite value
}
}

sheva29

Re: Turn grid on and off

1 year ago

Thank you very much for replying Philho.

First thing, I'm gonna include the code for the thing that I want to achieve, which is turning on and off the grid. Don't worry about the images for my purpose they are not relevant.

Secondly, I think drawing the grid with lines might be the way to go. I'm just having problems trying to turning it on and off in the void draw. That is where my concepts get confused. I incorporated the simplifications you suggested and did the grid with lines.

So I have two grids.

One with noStroke which is the one for the pixels and I have the one with lines to use as a guide so here is one question. One is on top of the other.

Is it possible to achieve this in the void draw? I kind of have the feeling that it is possible one element is just invisible hence the one with line overlaps and is visible. So I can see the grid and draw in it( fill it with colored squares). but can't turn it off and on.

The other question that I have is, if I have a noStroke(); in my void mousePressed(){ for the rectangles that fill the invisible grid, Why when I run the program it draws them with a stroke. I am pretty sure it is because of the stroke in the lined-grid.

I kind of feel I'm in the right track(maybe not) but it is a matter of concepts and the syntax of processing that I need to tweak a little bit.

check out the code.

boolean grid = true;
void setup() {
size(650, 650);
smooth();
background(255);
void draw() {
noStroke();
//invisible Grid for Pixels------------------------------------>
for (int i = 0; i <= 400 ; i= i+20) {
for (int j = 0; j <= 400 ; j= j+20) {
rect(200+i, 200+j, 20, 20);
}
}
//Grid------------------------------------>
if ( grid) {
line(200, 200, 200, 620);
for ( int k = 200 ; k <= 620; k = k+20) {
line(xPos+k, 200, xPos+k, 620);
line(xPos+200, yPos+k, 620, yPos+k);
stroke(1);
}
}
if (key == 'g') {
grid = !grid;
}
}
//Pixels that fill the grid------------------------------------>
void mousePressed() {
for (int i = 200; i < 620 ; i+=20) {
for (int j = 200; j < 620; j+=20) {
if (mouseX > i && mouseX <= i+20) {
if (mouseY > j && mouseY <= j+20) {
fill(pixelColor);
rect(i, j, 20, 20);
noStroke();
}
}
}
}
}

Here is all the code if you are curious, sorry it does not have the images

int xPos;
int yPos;
int wRect;
int hRect;
PFont myFontPixelizer;
PFont myFontPixelizer2;
int fontPosX = 30;
int fontPosY = 30;
color pixelColor;
boolean grid = true;
int saveP = 1;
PImage myImage;
PImage myImage1;
PImage temp;
//PImage a;
void setup() {
size(650, 650);
myImage = loadImage("colorpalette.jpeg");
myImage1 = loadImage("mario.png");
// a = loadImage("grid.png");
frame.setTitle("|| Pixelizer v1.3 ||");
frame.setLocationRelativeTo(null);
pixelColor= myImage.get(mouseX, mouseY);
myFontPixelizer= loadFont("GB18030Bitmap-48.vlw");
// gridOn = false;
myFontPixelizer2= loadFont("GB18030Bitmap-14.vlw");
smooth();
background(255);
// if(!unload){
// image(a,200,200);
//
// }
// if( key =='g'){
// unload=!unload;
// }
}
void draw() {
//Title---------------------------------->
image(myImage, 30, 310);
image(myImage1, 30, 90);
textFont(myFontPixelizer);
text("Pixelizer", 30, 70);
fill(pixelColor);
//Define my variables and functions
// mousePixel();
instructions();
noStroke();
//Get color------------------------------->
if (keyPressed && key == 'c') {
// if (key == 'c') {
pixelColor = myImage.get(mouseX - 30, mouseY - 310);
}
//invisible Grid for Pixels------------------------------------>
for (int i = 0; i <= 400 ; i= i+20) {
for (int j = 0; j <= 400 ; j= j+20) {
rect(200+i, 200+j, 20, 20);
}
}
//Grid------------------------------------>
if ( grid) {
line(200, 200, 200, 620);
for ( int k = 200 ; k <= 620; k = k+20) {
line(xPos+k, 200, xPos+k, 620);
line(xPos+200, yPos+k, 620, yPos+k);
stroke(0);
}
}
if (key == 'g') {
grid = !grid;
}
}
void keyTyped() {
if ( key == 's') {
PImage temp = get(200, 200, 420, 420);
temp.save("image"+saveP+".png");
saveP++;
}
}
void instructions() {
noFill();
textFont(myFontPixelizer2);
text(" Use the Grid to draw Mario press 's' to save \n press 'c' on the color palette to get color \n mouse click on the center of \n each square to draw a pixel", 200, 100);
}
void mousePressed() {
for (int i = 200; i < 620 ; i+=20) {
for (int j = 200; j < 620; j+=20) {
if (mouseX > i && mouseX <= i+20) {
if (mouseY > j && mouseY <= j+20) {
fill(pixelColor);
rect(i, j, 20, 20);
noStroke();
}
}
}
}
}

PhiLho

Re: Turn grid on and off

1 year ago

Actually, I was confused, seeing noStroke() as noFill()...
If you draw contiguous rectangles (or lines) with noStroke, you won't see them (or as a big rectangle if they are filled).
Likewise, the stroke() call should not be in the loop: these functions set a state that is kept until it is changed again.
The complete code has a stroke(0), so you won't see lines.

You haven't added a background() call in draw().
And the test if (key == 'g') { should be in keyTyped() (or keyPressed()).

sheva29

Re: Turn grid on and off

1 year ago

I didn't include the background in the draw because every time I draw a rectangle it errases it. I guess it overwrites the background on top of what I have drawn with the mouse.

I included the (key == 'g') in the key pressed, but it still does not work.

PhiLho

Re: Turn grid on and off

1 year ago

I haven't seen you were drawing with the mouse.
Such method of drawing with accumulation of shapes on screen works only in simple demo sketches, but isn't usable for more ambitious sketch like your.
Either you do all your drawings in a separate PGraphics and draw the result on screen with the accessories (the grid, among others), or you memorize each drawing action in a structure (eg. an ArrayList) and redraw each on each frame.
But as long as you retain all your drawing actions on the main screen, you won't be able to hide the grid.

Note: looking at the code in mousePressed(), the same remark applies: operations like fill() and noStroke() must be done before calling shape functions like rect(), and there is no need to repeat them if they don't change in the loop, so put them before the loop.

sheva29

Re: Turn grid on and off

1 year ago

I have never used Pgraphics.

So, if I want to achieve the grid and having the squares filled with color? Do I have to put the grid as well as the mouse function in arraylist. I have used arrays but not array lists, could you please provide an example if possible?

sheva29

Re: Turn grid on and off

1 year ago

So following the logic of my project I took the time to read about ArrayLists. And this is what I came up with. Let me know what you think:

ArrayList Pixelizer;
void setup(){
size(650,650);
Pixelizer = new ArrayList();
smooth();
}
void draw(){
Pixelizer.add(new pixelizer());
background(255);
for (int k = 0; k < Pixelizer.size(); k++){
pixelizer p = (pixelizer) Pixelizer.get(k);
p.colors();
p.fakeGrid();
p.filler();
p.images();
}
}

And this is the code for the ArrayList:

class pixelizer {
int xPos;
int yPos;
int wRect;
int hRect;
color pixelColor;
PImage myImage;
pixelizer() {
myImage = loadImage("colorpalette.jpeg");
pixelColor= myImage.get(mouseX, mouseY);
}
void images(){
image(myImage, 30, 310);
}
void colors() {
if (keyPressed && key == 'c') {
pixelColor = myImage.get(mouseX - 30, mouseY - 310);
}
}
void fakeGrid() {
//Grid------------------------------------>
for (int i = 0; i <= 400 ; i= i+20) {
for (int j = 0; j <= 400 ; j= j+20) {
rect(200+i, 200+j, 20, 20);
}
}
}
void filler() {
if (mousePressed) {
for (int i = 200; i < 620 ; i+=20) {
for (int j = 200; j < 620; j+=20) {
if (mouseX > i && mouseX <= i+20) {
if (mouseY > j && mouseY <= j+20) {
fill(pixelColor);
rect(i, j, 20, 20);
}
}
}
}
}
}
}

Top Reply