Grid of rectangle objects in p5.js
Question
I am trying to create a path finding maze where we can add a source , a destination and walls on a grid of rectangular objects.The source , destination and walls can we added by clicking on a rectangular object.I wrote the following code in p5.js.
var rows = 20;
var cols = 20;
var source =0;
var destination =0;
var grid = new Array(cols);
function setup() {
createCanvas(400, 400);
for(var i=0;i<cols ; i++)
{
grid[i] = new Array(rows);
}
for(var j=0;j<cols;j++)
{
for(var k=0;k<rows;k++)
{
grid[j][k] = new node();
}
}
}
function draw()
{
for(var j=0;j<cols;j++)
{
for(var k=0;k<rows;k++)
{
grid[j][k].display(j*20,k*20);
}
}
}
function mouseClicked()
{
for(var j=0;j<cols;j++)
{
for(var k=0;k<rows;k++)
{
if((mouseX > (j)*20 && mouseX< (j+1) *20 )&& (mouseY > (k)*20 && mouseY< (k+1) *20 ))
{
grid[j][k].clicked();
}
}
}
}
class node
{constructor()
{this.value =255 ;}
display(x,y){
rect(x,y,20,20);
fill(this.value);
}
clicked() {
if(source == 1 ){
this.value = color(242, 39, 39);
source = 0;
}
else if(destination ==1){
this.value =color(254,200 ,150);
destination = 0;
}
else{if (this.value === 0) {
this.value = 255;
} else {
this.value = 0;
} }}}
function sourceee(){
if (source=== 0) {
source = 1;
} else {
source = 0;
}
}
function destinations(){
if (destination=== 0) {
destination = 1;
} else {
destination = 0;
}
}
This code first creates a 1d array which i named as cols. Then I use a loop to add an array inside an array as rows. So each col will have number of rows. Now each array is assigned with an object of class node. so i,j combination uniquely identifies a particular object.Next in the draw() i am calling the display function for each object in my grid by supplying j,k values using loops.The display function takes the x,y position as arguments and gives me an square by using rect() function. I am supplying the arguments as multiplied by 20 of my unique row and col which identifies my object. The height and width are both 20,20 so that it create an square of size 20*20.The mouseclicked() function should colour the object which i click upon.Now the error here it colours the object below it instead.I can't use the hack of doing -1 to my k value because then it would never work on the first line of my grid.
I tried all the different ways from my understanding the problem has something to do with the arrangement of object in the grid the object [1][0] seems to be arranged before [0][0] but i don't know what exactly is the error in the code.
supporting HTML code:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<style>
body {
padding: 0;
margin: 0;
}
#src{
top:500px;
left:10px;
position:absolute;
}
#des{
top:500px;
left:100px;
position: absolute;
}
#gri{
top:500px;
left:200px;
position: absolute;
}
</style>
<script src="../p5.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
<main>
</main>
<button type="button" id= "src" onclick="sourceee()">Source</button>
<button type="button" id= "des" onclick="destinations()">Destination</button>
</body>
<script>
</script>
</html>
1 answers
solution1
0 ACCPTED 2020-10-17 15:36:17
The issue that causes the grid that is clicked to not be colored is in the display function
display(x,y){
rect(x,y,20,20);
fill(this.value);
}
Notice that fill is called after rect which causes the grid rectangle to be filled according to the previous node.
To get the clicked grid rectangle to be filled switch the order of the calls like this:
display(x,y){
fill(this.value);
rect(x,y,20,20);
}
The code could be rewritten so that the node object contains its own fill value and coordinates. This would make the connection between the color and position of the grid node more obvious.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.