当前位置： 文江博客话题详情

使用我的像素艺术程序时的怪异视觉错误

发布于 2025-01-27 17:08:37 字数 3846 浏览 1 评论 0原文

正如标题所述，我的像素艺术程序不断发生一个奇怪的视觉错误。当我使用pushmatrix（） scale> scale> scale（）和popmatrix（） popmatrix（）时。我无法真正描述这个错误，所以我得到了它的屏幕截图（该错误是像素之间的奇怪的白线）。

“

代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Pixel Art Drawer & Importer</title>
</head>

<body>
  <canvas id="mycanvas"></canvas>

  <input type="text" id="color1" value="100" maxlength="3">
  <input type="text" id="color2" value="100" maxlength="3">
  <input type="text" id="color3" value="100" maxlength="3">
  <p>You can import the pixel art textures into a game or program with this <a href="https://www.khanacademy.org/computer-programming/example-pixel-art/5355812004872192">code</a>.</p>
  <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>
  <script>
    var sketchProc = function(processingInstance) {
      with(processingInstance) {
        size(400, 400);
        frameRate(30);
        // HOW TO USE
        // Pick a grid size with the grid variable below
        // Change the color variable below to whatever
        // There is no eraser, becaue I couldn't figure out how to make it work.

        var gridSize = 16;

        var pixels = [];
        var alreadyExists;
        var color1 = document.getElementById('color1');
        var color2 = document.getElementById('color2');
        var color3 = document.getElementById('color3');

        background(255, 255, 255);
        for (var i = 0; i < gridSize; i++) {
          stroke(0, 0, 0);
          line(400 / gridSize * i, 0, 400 / gridSize * i, 400);
          line(0, 400 / gridSize * i, 400, 400 / gridSize * i);
        }

        var update = function() {
          background(255, 255, 255);
          for (var i = 0; i < gridSize; i++) {
            stroke(0, 0, 0);
            line(400 / gridSize * i, 0, 400 / gridSize * i, 400);
            line(0, 400 / gridSize * i, 400, 400 / gridSize * i);
          }
          for (var i = 0; i < pixels.length; i++) {
            noStroke();
            pushMatrix();
            scale(0.5);
            fill(pixels[i][2][0], pixels[i][2][1], pixels[i][2][2]);
            rect(pixels[i][0] * (400 / gridSize), pixels[i][1] * (400 / gridSize), 400 / gridSize, 400 / gridSize);
            popMatrix();
          }
          document.getElementById("output").innerHTML = pixels;
        };

        var mousePressed = mouseDragged = function() {
          alreadyExists = false;
          closestPixel = [ceil(mouseX / (400 / gridSize)) - 1, ceil(mouseY / (400 / gridSize)) - 1, [color1.value, color2.value, color3.value]];

          for (var i = 0; i < pixels.length; i++) {
            if (samePixels(pixels[i], closestPixel)) {
              alreadyExists = true;
              pixels[i][2] = [color1.value, color2.value, color3.value];

              break;
            }
          }

          if (!alreadyExists) {
            pixels.push(closestPixel);
          }
          update();
        };

        var samePixels = function(p1, p2) {
          var samePosition = p1[0] === p2[0] && p1[1] === p2[1];

          if (!samePosition) {
            return false;
          }

          return true;
        };

      }
    };

    var canvas = document.getElementById("mycanvas");
    // Pass the function sketchProc (defined in myCode.js) to Processing's constructor.
    var processingInstance = new Processing(canvas, sketchProc);
  </script>
  <p id="output" style="color:red">This is where the output will appear.</p>
</body>

</html>
原文

As the title states, a strange visual bug keeps happening with my pixel art program. When I scale down using pushMatrix(), scale() and popMatrix(). I can't really describe the bug, so I got a screenshot of it (the bug is the strange white lines in between pixels).

Visual bug

Code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Pixel Art Drawer & Importer</title>
</head>

<body>
  <canvas id="mycanvas"></canvas>

  <input type="text" id="color1" value="100" maxlength="3">
  <input type="text" id="color2" value="100" maxlength="3">
  <input type="text" id="color3" value="100" maxlength="3">
  <p>You can import the pixel art textures into a game or program with this <a href="https://www.khanacademy.org/computer-programming/example-pixel-art/5355812004872192">code</a>.</p>
  <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>
  <script>
    var sketchProc = function(processingInstance) {
      with(processingInstance) {
        size(400, 400);
        frameRate(30);
        // HOW TO USE
        // Pick a grid size with the grid variable below
        // Change the color variable below to whatever
        // There is no eraser, becaue I couldn't figure out how to make it work.

        var gridSize = 16;

        var pixels = [];
        var alreadyExists;
        var color1 = document.getElementById('color1');
        var color2 = document.getElementById('color2');
        var color3 = document.getElementById('color3');

        background(255, 255, 255);
        for (var i = 0; i < gridSize; i++) {
          stroke(0, 0, 0);
          line(400 / gridSize * i, 0, 400 / gridSize * i, 400);
          line(0, 400 / gridSize * i, 400, 400 / gridSize * i);
        }

        var update = function() {
          background(255, 255, 255);
          for (var i = 0; i < gridSize; i++) {
            stroke(0, 0, 0);
            line(400 / gridSize * i, 0, 400 / gridSize * i, 400);
            line(0, 400 / gridSize * i, 400, 400 / gridSize * i);
          }
          for (var i = 0; i < pixels.length; i++) {
            noStroke();
            pushMatrix();
            scale(0.5);
            fill(pixels[i][2][0], pixels[i][2][1], pixels[i][2][2]);
            rect(pixels[i][0] * (400 / gridSize), pixels[i][1] * (400 / gridSize), 400 / gridSize, 400 / gridSize);
            popMatrix();
          }
          document.getElementById("output").innerHTML = pixels;
        };

        var mousePressed = mouseDragged = function() {
          alreadyExists = false;
          closestPixel = [ceil(mouseX / (400 / gridSize)) - 1, ceil(mouseY / (400 / gridSize)) - 1, [color1.value, color2.value, color3.value]];

          for (var i = 0; i < pixels.length; i++) {
            if (samePixels(pixels[i], closestPixel)) {
              alreadyExists = true;
              pixels[i][2] = [color1.value, color2.value, color3.value];

              break;
            }
          }

          if (!alreadyExists) {
            pixels.push(closestPixel);
          }
          update();
        };

        var samePixels = function(p1, p2) {
          var samePosition = p1[0] === p2[0] && p1[1] === p2[1];

          if (!samePosition) {
            return false;
          }

          return true;
        };

      }
    };

    var canvas = document.getElementById("mycanvas");
    // Pass the function sketchProc (defined in myCode.js) to Processing's constructor.
    var processingInstance = new Processing(canvas, sketchProc);
  </script>
  <p id="output" style="color:red">This is where the output will appear.</p>
</body>

</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

吹泡泡o 2025-02-03 17:08:37

看起来像该程序的情况做您告诉它要做的事情，而不是您希望它要做:)

pushmatrix（） / scale（） / popmatrix（）< / code>您使用的部分适用于如何渲染每个“像素”块（包括您注意到的中风），但不会影响任何鼠标光标逻辑。

一个选项是仅仅是rect（） x，y值和大小的一半：

例如，

for (var i = 0; i < pixels.length; i++) {
            noStroke();
            // pushMatrix();
            // scale(0.5);
            fill(pixels[i][2][0], pixels[i][2][1], pixels[i][2][2]);
            rect(pixels[i][0] * (400 / gridSize) / 2, pixels[i][1] * (400 / gridSize) / 2, 400 / gridSize / 2, 400 / gridSize / 2);
            // popMatrix();
          }

请注意以上只是 loop的相关 in update> update> update（）< /code>：希望这个想法能清楚地说明。

您还可以在整个代码中考虑此量表，包括在鼠标Intedation中（可以受到约束）：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Pixel Art Drawer & Importer</title>
</head>

<body>
  <canvas id="mycanvas"></canvas>

  <input type="text" id="color1" value="100" maxlength="3">
  <input type="text" id="color2" value="100" maxlength="3">
  <input type="text" id="color3" value="100" maxlength="3">
  <p>You can import the pixel art textures into a game or program with this <a href="https://www.khanacademy.org/computer-programming/example-pixel-art/5355812004872192">code</a>.</p>
  <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>
  <script>
    var sketchProc = function(processingInstance) {
      with(processingInstance) {
        size(400, 400);
        var scaleFactor = 0.5;
        var gridWidth   = width * scaleFactor;
        var gridHeight  = height * scaleFactor;
        frameRate(30);
        // HOW TO USE
        // Pick a grid size with the grid variable below
        // Change the color variable below to whatever
        // There is no eraser, becaue I couldn't figure out how to make it work.

        var gridSize = 16;

        var pixels = [];
        var alreadyExists;
        var color1 = document.getElementById('color1');
        var color2 = document.getElementById('color2');
        var color3 = document.getElementById('color3');

        var update = function() {
          background(255, 255, 255);
          for (var i = 0; i < gridSize; i++) {
            stroke(0, 0, 0);
            line(gridWidth / gridSize * i, 0, gridWidth / gridSize * i, gridWidth);
            line(0, gridHeight / gridSize * i, gridHeight, gridHeight / gridSize * i);
          }
          for (var i = 0; i < pixels.length; i++) {
            noStroke();
            // pushMatrix();
            // scale(0.5);
            fill(pixels[i][2][0], pixels[i][2][1], pixels[i][2][2]);
            rect(pixels[i][0] * (gridWidth / gridSize), 
                 pixels[i][1] * (gridHeight / gridSize) , 
                 gridWidth / gridSize , gridHeight / gridSize);
            // popMatrix();
          }
          document.getElementById("output").innerHTML = pixels;
        };

        var mousePressed = mouseDragged = function() {
          mouseX = constrain(mouseX, 0, gridWidth);
          mouseY = constrain(mouseY, 0, gridHeight);
          alreadyExists = false;
          closestPixel = [ceil(mouseX / (gridWidth / gridSize)) - 1, 
                          ceil(mouseY / (gridHeight / gridSize)) - 1, 
                          [color1.value, color2.value, color3.value]];

          for (var i = 0; i < pixels.length; i++) {
            if (samePixels(pixels[i], closestPixel)) {
              alreadyExists = true;
              pixels[i][2] = [color1.value, color2.value, color3.value];

              break;
            }
          }

          if (!alreadyExists) {
            pixels.push(closestPixel);
          }
          update();
        };

        var samePixels = function(p1, p2) {
          var samePosition = p1[0] === p2[0] && p1[1] === p2[1];

          if (!samePosition) {
            return false;
          }

          return true;
        };

      }
    };

    var canvas = document.getElementById("mycanvas");
    // Pass the function sketchProc (defined in myCode.js) to Processing's constructor.
    var processingInstance = new Processing(canvas, sketchProc);
  </script>
  <p id="output" style="color:red">This is where the output will appear.</p>
</body>

</html>

Looks like a case of the program doing what you tell it to do, not you want it to do :)

The pushMatrix() / scale() / popMatrix() part you're using applies to how each "pixel" block is rendered (including the stroke which is what you're noticing), but doesn't affect any of the mouse cursor logic.

One option would be to simply half the rect() x, y values and size:

e.g.

for (var i = 0; i < pixels.length; i++) {
            noStroke();
            // pushMatrix();
            // scale(0.5);
            fill(pixels[i][2][0], pixels[i][2][1], pixels[i][2][2]);
            rect(pixels[i][0] * (400 / gridSize) / 2, pixels[i][1] * (400 / gridSize) / 2, 400 / gridSize / 2, 400 / gridSize / 2);
            // popMatrix();
          }

Note the above is just the relevant for loop in update(): hopefully the idea is clearly illustrated.

You can also take this scale into account throughout the code, including in the mouse interation (which can be constrained):

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Pixel Art Drawer & Importer</title>
</head>

<body>
  <canvas id="mycanvas"></canvas>

  <input type="text" id="color1" value="100" maxlength="3">
  <input type="text" id="color2" value="100" maxlength="3">
  <input type="text" id="color3" value="100" maxlength="3">
  <p>You can import the pixel art textures into a game or program with this <a href="https://www.khanacademy.org/computer-programming/example-pixel-art/5355812004872192">code</a>.</p>
  <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>
  <script>
    var sketchProc = function(processingInstance) {
      with(processingInstance) {
        size(400, 400);
        var scaleFactor = 0.5;
        var gridWidth   = width * scaleFactor;
        var gridHeight  = height * scaleFactor;
        frameRate(30);
        // HOW TO USE
        // Pick a grid size with the grid variable below
        // Change the color variable below to whatever
        // There is no eraser, becaue I couldn't figure out how to make it work.

        var gridSize = 16;

        var pixels = [];
        var alreadyExists;
        var color1 = document.getElementById('color1');
        var color2 = document.getElementById('color2');
        var color3 = document.getElementById('color3');

        var update = function() {
          background(255, 255, 255);
          for (var i = 0; i < gridSize; i++) {
            stroke(0, 0, 0);
            line(gridWidth / gridSize * i, 0, gridWidth / gridSize * i, gridWidth);
            line(0, gridHeight / gridSize * i, gridHeight, gridHeight / gridSize * i);
          }
          for (var i = 0; i < pixels.length; i++) {
            noStroke();
            // pushMatrix();
            // scale(0.5);
            fill(pixels[i][2][0], pixels[i][2][1], pixels[i][2][2]);
            rect(pixels[i][0] * (gridWidth / gridSize), 
                 pixels[i][1] * (gridHeight / gridSize) , 
                 gridWidth / gridSize , gridHeight / gridSize);
            // popMatrix();
          }
          document.getElementById("output").innerHTML = pixels;
        };

        var mousePressed = mouseDragged = function() {
          mouseX = constrain(mouseX, 0, gridWidth);
          mouseY = constrain(mouseY, 0, gridHeight);
          alreadyExists = false;
          closestPixel = [ceil(mouseX / (gridWidth / gridSize)) - 1, 
                          ceil(mouseY / (gridHeight / gridSize)) - 1, 
                          [color1.value, color2.value, color3.value]];

          for (var i = 0; i < pixels.length; i++) {
            if (samePixels(pixels[i], closestPixel)) {
              alreadyExists = true;
              pixels[i][2] = [color1.value, color2.value, color3.value];

              break;
            }
          }

          if (!alreadyExists) {
            pixels.push(closestPixel);
          }
          update();
        };

        var samePixels = function(p1, p2) {
          var samePosition = p1[0] === p2[0] && p1[1] === p2[1];

          if (!samePosition) {
            return false;
          }

          return true;
        };

      }
    };

    var canvas = document.getElementById("mycanvas");
    // Pass the function sketchProc (defined in myCode.js) to Processing's constructor.
    var processingInstance = new Processing(canvas, sketchProc);
  </script>
  <p id="output" style="color:red">This is where the output will appear.</p>
</body>

</html>
回复 原文
~没有更多了~

关于作者

π浅易

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

达拉崩吧

文章 0 评论 0

PANGOO

文章 0 评论 0

kkgtx

文章 0 评论 0

WordPress小学生

文章 0 评论 0

酷炫老祖宗

文章 0 评论 0

硪扪都還晓

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文