1

so i am trying to replicate output of this code:

function setup() {
    createCanvas(400, 400);
}

var pts = [];
var bts = [];
function mousePressed()
{
    if (pts.length == 2) {
        pts = [];
    }
    pts.push([mouseX, mouseY])
    loop()
}

function draw() {  
    background(220);

    if (pts.length == 2) {
        // rectangle points
        let rpts = [ [pts[1][0], pts[0][1]], [pts[0][0], pts[1][1]]]
        // draw rectangle
        for (var i=0; i < rpts.length; ++i) {
            line(rpts[i][0], rpts[i][1], rpts[(i+1) % rpts.length][0], rpts[(i+1) % rpts.length][1]);
            
        }
        
        text(rpts[1],255,255);
        text(rpts[1][0],255,355);
    }

    else if (pts.length > 0) {
        // draw a rubber line from last point to the mouse
        line(pts[pts.length-1][0], pts[pts.length-1][1], mouseX,mouseY); 
    }
        
    let c = color(255, 204, 0);
    fill(c);
    if (pts.length==2) { 
        let x0 = min(pts[0][0], pts[1][0]);
        let x1 = max(pts[0][0], pts[1][0]);
        let y0 = min(pts[0][1], pts[1][1]);
        let y1 = max(pts[0][1], pts[1][1])  
        for (var x = x0; x < x1; x += 5) {
            for (var y = y0; y < y1; y +=5) {
                square(x, y, 4);
            }
        }
        noLoop()
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

because i want to add a functionality of mouseover on every element, i am thinking to create objects of same element(square). Now the problem is that, i want to create a specific number of Objects and i cannot compute that number until i have user input and setup runs in the start(once). and once that is done, i am not sure i can do the math of

for (var x = x0; x < x1; x += 5) {
    for (var y = y0; y < y1; y +=5) {
        square(x, y, 4);

while creating objects and passing values in constructor.

I intent to change color of each square when mouse is over them (permanently for comparison with the squares whom have not had the mouse over them).

So far i have gotten here.

var pts = [];
var bts = [];
let squarex = [];

function setup() {
    createCanvas(400, 400);
    for (let s = 0;s<=5 ;s++) // i want, s<=x1*y1 (they are defined below).
    {
        squarex[s] = new square1();
    }
}

function mousePressed()
{
    if (pts.length == 2) {
        pts = [];
    }        
    pts.push([mouseX, mouseY])
}

function draw() {  
    background(220);

    if (pts.length == 2) {
        // rectangle points
        let rpts = [ [pts[1][0], pts[0][1]], [pts[0][0], pts[1][1]]]
        // draw rectangle
        for (var i=0; i < rpts.length; ++i) {
            line(rpts[i][0], rpts[i][1], rpts[(i+1) % rpts.length][0], rpts[(i+1) % rpts.length][1]);              
        }                    
    }

    else if (pts.length > 0) {
        // draw a rubber line from last point to the mouse
        line(pts[pts.length-1][0], pts[pts.length-1][1], mouseX,mouseY); 
    }
    if(pts.length==2)
    {
        for (let s=0;s<=squarex.length;s++)
        {
        squarex[s].create();
        }
    noLoop();
    }
}

class square1 {

create()
    {
    let y = random(height);
    let x = random(width);

    square(x, y, 10);

    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
Rabbid76
  • 202,892
  • 27
  • 131
  • 174
SilentHG
  • 109
  • 1
  • 12
  • 1
    Add a color property to the square class and reference it in the loop where you draw it. Before you draw it, compare the mouse coords to the square's position and reset the color as required. If you don't want it to change again add a flag - `colorAlreadyChanged` or whatever. – JDunken Nov 25 '19 at 15:45

1 Answers1

1

Once 2 points have been set, then create a grid with positions of all the small rectangles. Add a 3rd value, which states if the mouse hovered the rectangle:

var pts = [];
var grid = []
function mousePressed()
{
    if (pts.length == 2) {
        pts = [];
    }
    pts.push([mouseX, mouseY])

    if (pts.length==2) { 
        grid = []
        let x0 = min(pts[0][0], pts[1][0]);
        let x1 = max(pts[0][0], pts[1][0]);
        let y0 = min(pts[0][1], pts[1][1]);
        let y1 = max(pts[0][1], pts[1][1])  
        for (let y = y0; y < y1; y +=5) {
            let row = []
            for (let x = x0; x < x1; x += 5) {    
                row.push( [x, y, false] );
            }
            grid.push(row);
        }
    }
}

Change the state of the if the mouse hovers the rectangle:

function mouseMoved()
{
    if (pts.length==2) {
        let x0 = grid[0][0][0];
        let y0 = grid[0][0][1];
        let row = Math.trunc((mouseY-y0) / 5);
        let col = Math.trunc((mouseX-x0) / 5);
        if (row < grid.length && col < grid[row].length) {
            grid[row][col][2] = true;
        }
    } 
}

Draw the rectangles at the positions stored in the grid and set the color dependent on the "hover" state:

let c1 = color(255, 204, 0);
let c2 = color(0, 0, 255);
if (pts.length==2) { 
    for (var row = 0; row < grid.length; ++row ) {
        for (var col = 0; col < grid[row].length; ++col ) {
            fill(grid[row][col][2] ? c2 : c1);
            square(grid[row][col][0], grid[row][col][1], 4);
        }
    }
}

See the example:

function setup() {
    createCanvas(400, 400);
}

var pts = [];
var grid = []
function mousePressed()
{
    if (pts.length == 2) {
        pts = [];
    }
    pts.push([mouseX, mouseY])

    if (pts.length==2) { 
        grid = []
        let x0 = min(pts[0][0], pts[1][0]);
        let x1 = max(pts[0][0], pts[1][0]);
        let y0 = min(pts[0][1], pts[1][1]);
        let y1 = max(pts[0][1], pts[1][1])  
        for (let y = y0; y < y1; y +=5) {
            let row = []
            for (let x = x0; x < x1; x += 5) {    
                row.push( [x, y, false] );
            }
            grid.push(row);
        }
    }
}

function mouseMoved()
{
    if (pts.length==2) {
        let x0 = grid[0][0][0];
        let y0 = grid[0][0][1];
        let row = Math.trunc((mouseY-y0) / 5);
        let col = Math.trunc((mouseX-x0) / 5);
        if (row < grid.length && col < grid[row].length) {
            grid[row][col][2] = true;
        }
    } 
}

function draw() {  
    background(220);

    // setup r ectangle points
    let rpts;
    if (pts.length == 2) {
        rpts = [pts[0], [pts[1][0], pts[0][1]], pts[1], [pts[0][0], pts[1][1]]];
    }
    else if (pts.length > 0) {
        rpts = [pts[0], [mouseX, pts[0][1]], [mouseX, mouseY], [pts[0][0], mouseY]];
    }
    // draw rectangles
    if (rpts) {
        for (var i=0; i < rpts.length; ++i) {
            line(rpts[i][0], rpts[i][1], rpts[(i+1) % rpts.length][0], rpts[(i+1) % rpts.length][1]);
        }
    }
      
    let c1 = color(255, 204, 0);
    let c2 = color(0, 0, 255);
    if (pts.length==2) { 
        for (var row = 0; row < grid.length; ++row ) {
            for (var col = 0; col < grid[row].length; ++col ) {
                fill(grid[row][col][2] ? c2 : c1);
                square(grid[row][col][0], grid[row][col][1], 4);
            }
        }
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
Rabbid76
  • 202,892
  • 27
  • 131
  • 174