使用 mousedragged 在 p5.js 上绘图

Question

下面是我的 p5.js 草图中的代码。每当我拖动鼠标时，我希望草图根据鼠标拖动来绘制线条。

let N = 64;
let SCALE = 10;
let arr = [];

function Index (N,i,j) {
  return i + j * N;
}

function Render () {
  for (let i = 0; i < N; i++) {
    for (let j = 0; j < N; j++) {
      let d = arr[Index(N,i,j)];
      fill(d);
      noStroke();
      square(i*SCALE,j*SCALE,SCALE);
    }
  }
}

function mouseDragged () {
  arr[Index(N,mouseX/SCALE,mouseY/SCALE)] += 100;
}

function setup() {
  createCanvas(N*SCALE, N*SCALE);
  for (let i = 0; i < N; i++) {
    for (let j = 0; j < N; j++) {
      arr.push(0);
    }
  }
}

function draw() {
  background(0);
  Render(N);
}

以下是我想要的图像：

但是我得到的结果是：

Answer 1

在 JavaScript（与其他语言相反）中，除法将产生

Number

类型，除非明确限制为整数除法，否则该类型可以是浮点数。

您可以更改：

  arr[Index(N,mouseX/SCALE,mouseY/SCALE)] += 100;

到

  arr[Index(N,floor(mouseX/SCALE),floor(mouseY/SCALE))] += 100;

演示：

let N = 64;
let SCALE = 10;
let arr = new Array(N * N).fill(0);

function Index (N,i,j) {
  return i + j * N;
}

function Render () {
  for (let i = 0; i < N; i++) {
    for (let j = 0; j < N; j++) {
      let d = arr[Index(N,i,j)];
      fill(d);
      noStroke();
      square(i*SCALE,j*SCALE,SCALE);
    }
  }
}

function mouseDragged () {
  arr[Index(N,floor(mouseX/SCALE),floor(mouseY/SCALE))] += 100;
}

function setup() {
  createCanvas(N*SCALE, N*SCALE);
}

function draw() {
  background(0);
  Render(N);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>