p5.js checkers/chessboard 使用嵌套循环绘制
p5.js checkers/chessboard draw with nested loop
我想打印一个 chess/checkers 板,在教程的帮助下得到了这段代码。我了解除此行之外发生的所有事情:rect(i * squareSize,j * squareSize,squareSize, squareSize);
我不明白的是为什么要将 i 乘以变量 squareSize。
我的第一直觉是 if/else 语句中填充函数下方的矩形,而不是 else 下方的矩形。
任何人都可以向我解释我遗漏了什么以及为什么我的方法不起作用并且需要乘以 squareSize 吗?
我在下面添加了我的工作代码片段。
const WIDTH = 400;
const HEIGHT = 400;
const ROWS = 10;
const COLS = 10;
var squareSize = WIDTH/10;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
drawBoard();
}
function drawBoard(){
for(var i = 0; i < ROWS; i++)
{
for(var j = 0; j < COLS; j++)
{
if((i+j) % 2 == 0)
{
fill(0);
}
else
{
fill(255);
}
rect(i * squareSize,j * squareSize,squareSize, squareSize);
}
}
noLoop();
}
html, body {
margin: 0;
padding: 0;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
why my method does not work
我有点困惑:您的代码似乎工作正常。它有什么问题?
The thing I do not get is why you multiply i by the variable squareSize.
当你遇到这样的问题时,你能做的最好的事情之一就是拿出一些方格纸并画出几个例子。
假设您有一张 1000x1000 的纸,您想在上面画一个 10x20(10 列 x 20 行)的网格。
- 每个正方形的宽度是多少?每个正方形的宽度为 100,因为 1000/10 = 100。
- 第 0 列、第 1 列、第 2 列等的 x 值是多少?
- 第 0 列的 x 值为 0,因为它位于最左边。
- 第 1 列的 x 值为 100,因为它距离最左边一列(100 宽)。
- 第 2 列的 x 值为 200,因为它距离最左边两列。
- 每个正方形的高度是多少?每个正方形的宽度为 50,因为 1000/20 = 50。
- 第 0 行、第 1 行、第 2 行等的 y 值是多少?
- 第 0 行的 y 值为 0,因为它是最上边。
- 第 1 行的 y 值为 50,因为它距最上边缘仅一行(50 宽)。
- 第 2 行的 y 值为 100,因为它距最上边缘两行。
请注意,对于每列和每行的 x 和 y 值,我们将列或行索引(您的 i
和 j
变量)乘以列的大小和行(您的 squareSize
变量)。
如果还是不清楚,试着举几个例子。
我想打印一个 chess/checkers 板,在教程的帮助下得到了这段代码。我了解除此行之外发生的所有事情:rect(i * squareSize,j * squareSize,squareSize, squareSize);
我不明白的是为什么要将 i 乘以变量 squareSize。
我的第一直觉是 if/else 语句中填充函数下方的矩形,而不是 else 下方的矩形。
任何人都可以向我解释我遗漏了什么以及为什么我的方法不起作用并且需要乘以 squareSize 吗?
我在下面添加了我的工作代码片段。
const WIDTH = 400;
const HEIGHT = 400;
const ROWS = 10;
const COLS = 10;
var squareSize = WIDTH/10;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
drawBoard();
}
function drawBoard(){
for(var i = 0; i < ROWS; i++)
{
for(var j = 0; j < COLS; j++)
{
if((i+j) % 2 == 0)
{
fill(0);
}
else
{
fill(255);
}
rect(i * squareSize,j * squareSize,squareSize, squareSize);
}
}
noLoop();
}
html, body {
margin: 0;
padding: 0;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
why my method does not work
我有点困惑:您的代码似乎工作正常。它有什么问题?
The thing I do not get is why you multiply i by the variable squareSize.
当你遇到这样的问题时,你能做的最好的事情之一就是拿出一些方格纸并画出几个例子。
假设您有一张 1000x1000 的纸,您想在上面画一个 10x20(10 列 x 20 行)的网格。
- 每个正方形的宽度是多少?每个正方形的宽度为 100,因为 1000/10 = 100。
- 第 0 列、第 1 列、第 2 列等的 x 值是多少?
- 第 0 列的 x 值为 0,因为它位于最左边。
- 第 1 列的 x 值为 100,因为它距离最左边一列(100 宽)。
- 第 2 列的 x 值为 200,因为它距离最左边两列。
- 每个正方形的高度是多少?每个正方形的宽度为 50,因为 1000/20 = 50。
- 第 0 行、第 1 行、第 2 行等的 y 值是多少?
- 第 0 行的 y 值为 0,因为它是最上边。
- 第 1 行的 y 值为 50,因为它距最上边缘仅一行(50 宽)。
- 第 2 行的 y 值为 100,因为它距最上边缘两行。
请注意,对于每列和每行的 x 和 y 值,我们将列或行索引(您的 i
和 j
变量)乘以列的大小和行(您的 squareSize
变量)。
如果还是不清楚,试着举几个例子。