I am working on a school project in Processing (Java Mode). We have a picture of how the game should look like.
So the task is to create a grid out of squares. Random squares should light up in red. If a red square is clicked, it should change colors to green and stay green.
What my code looks like at the moment:
Square[][] grid;
int cols = 20;
int rows = 20;
void setup() {
size(400, 400);
grid = new Square[cols][rows];
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
grid[i][j] = new Square(i*20, j*20, 20, 20);
}
}
}
void draw() {
background(0);
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
grid[i][j].display();
if (grid[i][j].x<mouseX && mouseX < grid[i][j].x + grid[i][j].w && grid[i][j].y<mouseY && mouseY < grid[i][j].y + grid[i][j].h && mousePressed) {
color col = color(0,204,0);
grid[i][j].update(col);
}
}
}
}
Class for squares:
class Square {
float x, y;
float w, h;
color c;
Square(float tempX, float tempY, float tempW, float tempH) {
x = tempX;
y = tempY;
w = tempW;
h = tempH;
c = color(0);
}
void display() {
stroke(0);
fill(c);
rect(x, y, w, h);
}
void update(color c) {
this.c = c;
}
}
So at the moment, every square you click turns green. I am not sure how to write the code, so that random squares change color to red and shuffle every 5 seconds.
Do you have any tips on how to proceed with the code or which thinking steps to take to be able to solve this task?
First, take your task:
So the task is to create a grid out of squares. Random squares should light up in red. If a red square is clicked, it should change colors to green and stay green.
and break it down:
create a grid out of squares: nicely done already !
Random squares should light up in red
If a red square is clicked
change colors to green and stay green
How do you use random numbers in Processing ?
The simplest method is using the random() method: you can pass two values and you'll get back a random number between those values.
Let's say you want to flip a coin so there's a (roughly) 50-50 change you get heads or tails. You could so something like:
if(random(0, 100) > 50){
println("head");
}else{
println("tails");
}
Could even be random(0.0, 1.0) > 0.5 for example, the idea is the same.
You could think of throwing a dice or a number of dices, etc.
Remember these are pseudo-random and in your own time can explore other pseudo random related methods such as randomGauss() and noise().
random() may be good enough for now, part 2 done :)
You're almost done with part 3:
if (grid[i][j].x<mouseX && mouseX < grid[i][j].x + grid[i][j].w && grid[i][j].y<mouseY && mouseY < grid[i][j].y + grid[i][j].h && mousePressed) {
but you need to also check if the clicked square is red.
Would nice to have some red squares to begin with. Let's assume color(204, 0, 0) is your red, you could simply add an additional check:
if(grid[i][j].c == color(204, 0, 0)){
println("red block clicked");
grid[i][j].c = color(0, 204, 0);
}
Which roughly turns your sketch into:
Square[][] grid;
int cols = 20;
int rows = 20;
final color RED = color(204, 0, 0);
final color GREEN = color(0, 204, 0);
void setup() {
size(400, 400);
grid = new Square[cols][rows];
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
grid[i][j] = new Square(i*20, j*20, 20, 20);
// roughly 50 - 50 % change a grid square will be red
if (random(0, 100) > 50) {
grid[i][j].update(RED);
}
}
}
}
void draw() {
background(0);
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
grid[i][j].display();
if (grid[i][j].x<mouseX && mouseX < grid[i][j].x + grid[i][j].w && grid[i][j].y<mouseY && mouseY < grid[i][j].y + grid[i][j].h && mousePressed) {
// if the square is red
if (grid[i][j].c == RED) {
// change colour to GREEN
grid[i][j].update(GREEN);
}
}
}
}
}
class Square {
float x, y;
float w, h;
color c;
Square(float tempX, float tempY, float tempW, float tempH) {
x = tempX;
y = tempY;
w = tempW;
h = tempH;
c = color(0);
}
void display() {
stroke(0);
fill(c);
rect(x, y, w, h);
}
void update(color c) {
this.c = c;
}
}
In terms of shuffling colours every 5 seconds I recommend:
for every 5 seconds you could use millis()
above there is an example of shuffling done in setup() though you might want to encapsulate a nested loop like that with the random condition in a void shuffle() function for example which you could easily call every 5 seconds.
note that this approach will reset green blocks to red, you might want an else in that condition to reset blocks to black (otherwise, with time, most will turn red), etc.
Have fun!
P.S. I tend to separate state data from representation. For example I would add a variable to keep track of each square state (e.g. OFF, INTERACTIVE, ACTIVATED), update a basic finite state machine, then render colours accordingly. What you have above is a tight coupling between the colour of a Square and it's state. For the homework you've got that's ok, but in the future, for more complex projects you might want to consider data flows through your program and how you represent it.
Related
I am trying to fill some particular circle areas on a square grid in Proceesing. However, I am facing some weird filling after I run my code. I used the "atan2" function to get the angle of points in the grid and apply some if conditions to limit the area. But it doesn't work. Actually, it works some way but not exactly what I want.This is the result I run the code-> enter image description here, but it should be like -> enter image description here Can someone help me to solve this, please?
(Additionally, I seized this page to detect which points are in the area I specified enter link description here.
Cell [][] cells;
int res = 10;
PVector circleCenter ;
float rad=290;
void setup() {
size(1200, 800);
cells = new Cell[width/res ][height/res];
for (int i=0; i<cells.length; i++) {
for (int j = 0; j<cells[0].length; j++) {
cells[i][j] = new Cell();
}
}
}
void draw() {
background(255);
circleCenter = new PVector(mouseX, mouseY);
display();
pushStyle();
ellipse(circleCenter.x, circleCenter.y, 20, 20);
popStyle();
//println(frameRate);
}
void display() {
for (int i=0; i<cells.length; i++) {
for (int j = 0; j<cells[0].length; j++) {
if (sq(i*res-width/2) + sq(j*res-height/2) <=sq(rad/2)) {
float angleInRad = atan2(j*res-height/2, i*res-width/2);
///
if (angleInRad<radians(-10) && angleInRad>radians(-60)) {
fill(0, 255, 0); // degrees(atan2(j*res-circleCenter.y, i*res-circleCenter.x))
}
} else {
noFill();
}
rect(i*res, j*res, res, res);
}}
class Cell {
boolean blackness=false;
Cell() {
}
}
You have not specified input data for your task. I assume we have center coordinates cx, cx, radius r, starting and ending angle sa, ea of the sector (in code -10, -60).
There is an approach to check whether vector direction lies in sector, it's robust to potential troubles with periodicity, negative values etc. At first normalize range ends, then find middle angle and half-angle
half = (ea - sa) / 2
mid = (ea + sa) / 2
coshalf = Cos(half)
Now compare that difference of angle and middle one is lower then half-angle
if Cos(angle - mid) >= coshalf then
angle lies in range sa..ea
This one is for a school assignment.
I am new to Processing software and I want to create a rainbow-filled window exactly like in the picture (at the center) below.
The program on the left is the one I have right now.
The program in the center is what I want it to look like.
On the right is the code I am using. I'll copy-paste it here.
void setup() {
size(255, 255);
}
void draw() {
noStroke();
colorMode(RGB, 255,255,255);
for (int i = 0; i <255; i++) {
for (int j = 0; j < 255; j++) {
stroke(j,i,128);
point(i, j);
}
}
}
Any help, suggestions, adjustments to the code would be greatly appreciated. Thanks in advance.
You would benefit from some pseudocode. Never underestimate the power of pseudocode.
In this image, everything you need to do is written plain as day:
Since we're working in RGB, and that the image tells you what to do with red, green and blue, you're already golden, but to make things more transparent we'll alter the code a little bit. Let's forget about the loops for now. Here's what the picture tells you to do:
R -> vertical slider, the closer to the bottom the more red you have
G -> horizontal slider, left is less and right is more
B -> vertical slider, the opposite to the red slider
Now, knowing that your values are on a [0-255] scale, dans that your image also is a 256 pixels wide square, you just have to use the index of your loops to get your RGB values:
for (int i = 0; i <255; i++) {
for (int j = 0; j < 255; j++) {
int r = j; // up == more red
int g = i; // right == more green
int b = 255 - j; // down == less blue
stroke(color(r, g, b));
point(i, j);
}
}
Also, just for kicks, as this is a static image and not an animation, you can put this code in the setup() method and it'll have the same result:
void setup() {
size(255, 255);
for (int i = 0; i <255; i++) {
for (int j = 0; j < 255; j++) {
int r = j; // up == more red
int g = i; // right == more green
int b = 255 - j; // down == less blue
stroke(color(r, g, b));
point(i, j);
}
}
}
void draw() {} // you still need this method even if it's empty
Which gives you this result:
Have fun!
My problem is wherever i click a node appears and for the second click another node appears with connected edge...so i want that When i click at any location, the node should be generated at the closest grid intersection point. I tried using loops.
and i'm trying to do that without "class"
int n_partition=10;
int length = 101;
PVector[] position = new PVector[length];
int BallNum;
void setup() {
size(600, 360);
background(255);
}
void draw() {
fill(255);
grid();
fill(0);
}
void mousePressed(){
stroke(0);
BallNum++;
position[BallNum]= new PVector(mouseX, mouseY);
circle(position[BallNum].x, position[BallNum].y, 10);
if (BallNum > 1) {
line(position[BallNum].x,position[BallNum].y,position[BallNum-
1].x,position[BallNum-1].y);
line(position[1].x,position[1].y,position[BallNum].x,position[BallNum] .y);
}
for (int i = 0; i < position[BallNum].length; ++ i) {
position[BallNum] = position[BallNum].get(i);
position[BallNum] = position[BallNum].get((i+1) % position[BallNum].length);
line(position[BallNum].x, position[BallNum].y,
position[BallNum].x, position[BallNum].y);
}
}
I EXPECT THE NODE SHOULD GO TO THE CLOSEST INTERSECTION.
You've to calculate the nearest position of the mouse to a point on the grid. For that you've to know the width (tile_width) and the height (tile_height) of cell.
The index of the cell can be calculated by the dividing the mouse position to the size of a tile and round() the result to an integral value (e.g. round(mouseX / (float)tile_width)).
Don't draw anything in int the mousePressed callback. The only thing you've to do there is to add a pint to the list:
void mousePressed(){
int tile_width = width / n_partition; // adapt this for your needs
int tile_height = height / n_partition;
int x = round(mouseX / (float)tile_width) * tile_width;
int y = round(mouseY / (float)tile_height) * tile_height;
position[BallNum]= new PVector(x, y);
BallNum++;
}
All the drawing has to be done in draw(). Draw the lines and points in separate loops:
void draw() {
background(255);
grid();
// draw the lines in a loop
strokeWeight(3);
stroke(0, 0, 255);
for (int i = 0; i < BallNum; ++ i) {
int i2 = (i+1) % BallNum;
line(position[i].x, position[i].y, position[i2].x, position[i2].y);
}
// draw balls in a loop
strokeWeight(1);
stroke(0, 0, 0);
fill (255, 0, 0);
for (int i = 0; i < BallNum; ++i) {
circle(position[i].x, position[i].y, 10);
}
}
Note, the scene is consecutively redrawn in every frame. Before the scene is drawn, the entire window has to be "cleared" by background().
See the result:
I have a class called squares and then I have a class called shapes. In this class is a 12x5 2d array of shapes. In the squares class is a method called draw that draws the square at (550, 75) . The squares have width of 25 and a height of 25. The draw method in the shapes class looks like
public void draw(Graphics g) {
for (i = 0; i < shapes.length; i++) {
for (j = 0; j < shapes[i].length; j++) {
shapes[i][j] = new Square();
shapes[i][j].draw(g);
}
}
}
This draws all the squares on top of each other. How can I draw them in a 12 by 5 format? The size of the window is 600 by 600 if that helps.
Change the draw method in the Squares class to take x and y coordinates as parameters.
You can then change your loop to:
for (i = 0; i < shapes.length; i++) {
for (j = 0; j < shapes[i].length; j++) {
shapes[i][j] = new Square();
shapes[i][j].draw(g, i * 25, j * 25);
}
}
This will mean each square is draw in to the correct position.
-- Edit --
If you can't change the draw parameters, you can add a new constructor for the Square class. This does not require its superclass to have that constructor.
int x;
int y;
public Square(int x, int y) {
this.x = x;
this.y = y;
}
Then pass in the coordinates for that Square when you create it, and modify the draw method appropriately to use these.
Alternatively, if you can't change the Squares class at all, you could translate the graphics coordinates. The square gets drawn at (550, 75), so if we translate the graphics coordinates by (-550, -75) it will appear as if we are drawing at (0,0). We can then incrementally translate for each subsequent square.
g.translate(-550, -75);
for (i = 0; i < shapes.length; i++) {
for (j = 0; j < shapes[i].length; j++) {
shapes[i][j] = new Square();
shapes[i][j].draw(g);
g.translate(0, 25); //Move down by 25
}
g.translate(25, 0); //Move across by 25
}
(Note that I haven't tested this.)
I'm following a course in programming in the Java-based environment "Processing". One assignment is to write a program that displays 3 buttons (black). When the button is clicked, that button should change to another colour (grey). We are required to use a boolean[] array. My code is as follows:
boolean[] button = new boolean[3];
void setup(){
size(300,300);
button[0] = false;
button[1] = false;
button[2] = false;
}
void draw(){
int x = (width/(button.length+1));
int y = height/2;
int ellipseSize = 50;
int radius = ellipseSize/2;
background(255);
noStroke();
fill(0);
for(int i = 1; i <= button.length; i++){
ellipse(i*x, y, ellipseSize, ellipseSize);
}
}
//shifting array values upon mouse pressing
void mousePressed(){
int x = (width/(button.length+1));
int y = height/2;
int ellipseSize = 50;
int radius = ellipseSize/2;
for(int i = 1; i <= button.length; i++){
button[i] = !button[i];
if (mouseX > i*x-radius && mouseX < i*x+radius && mouseY > y-radius && mouseY < y+radius){
if (button[i]){
fill(150);
}
}
else {
fill(0);
}
ellipse(i*x, y, ellipseSize, ellipseSize);
}
}
I get an error saying "ArrayIndexOutOfBoundsException: 3". Can someone help?
You get the error ArrayIndexOutOfBoundsException: 3 because you have tried to access to an illegal index. In Java and in most programming languages arrays start at 0.
So, in your for loop you need to change i <= button.length to i < button.length
As few people mentioned arrays in most programming languages start at index 0 and last index is at button.length - 1 so you need to change for loop or button[i] call.
But to finish your buttons you will need to understand more about processing. Your draw function is called repeatedly (depending on you fps) and you always clear the sketch with background function. Then you set fill color to black and draw three circles. If you change fill inside mouse event it might sometimes work (if you click at the same moment as circle is drawn) but it is very bad approach.
You will need to set fill according to your button array within draw function:
for(int i = 1; i <= button.length; i++){ //good boundaries for drawing but not for array
if(button[i-1]) { //for array you need correct index
fill(0);
}else{
fill(150);
}
ellipse(i*x, y, ellipseSize, ellipseSize);
}
And of course change the mouse event to just check if button was clicked and store this information inside button array for next drwing.
for(int i = 1; i <= button.length; i++){ //your old boundaries
if (mouseX > i*x-radius && mouseX < i*x+radius && mouseY > y-radius && mouseY < y+radius){
button[i-1] = !button[i-1]; //updated index
}
}
Change
i <= button.length
to
i < button.length
If the length of the array is 3 then button[2] is the last element.