在 P5.js 中创建元素对象

Question

所以我正在尝试复制此代码的输出：

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>

因为我想在每个元素上添加鼠标悬停功能，所以我想创建相同元素（正方形）的对象。现在的问题是，我想创建特定数量的对象，但我无法计算该数量，直到我有用户输入并在开始时运行设置（一次）。一旦完成，我不确定我是否可以计算

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

在构造函数中创建对象和传递值时。

我打算在鼠标悬停在每个方块上时改变它们的颜色（永久地与没有鼠标悬停在其上的方块进行比较）。

到目前为止我已经到了这里。

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>

Answer 1

一旦设置了 2 个点，然后创建一个包含所有小矩形位置的网格。添加第三个值，说明鼠标是否悬停在矩形上：

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;
        }
    } 
}

在存储在网格中的位置绘制矩形，并根据 "hover" 状态设置颜色：

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);
        }
    }
}

看例子：

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>

在 P5.js 中创建元素对象

Creating Objects of Elements in P5.js

javascript

processing

p5.js