如何在使用 updatePixels() 时在 Processing3 中的图像顶部绘制网格

Question

我正在尝试在图像上绘制网格，而“与朋友和敌人共舞”算法是运行并更新像素。然而，我的网格在消失前只显示了一瞬间。我猜这是由于像素更新，但是网格没有更新像素。如何使用其余像素更新网格？

import java.util.Arrays;

int activeFollowers, totalFollowers;

Follower[] followers;
int[] blurFilter;
boolean saveNextFrame;
PImage img;
int x = 0; // Gaan dit gebruik vir die vertikale lyne
int y = 0; // Gaan dit gebruik vir die horisontale lyne
int spacing = 50; // Gaan dit gebruik om die grid groter en kleiner te maak


void setup() {
  size(1280, 720);
  frameRate(60);
  activeFollowers = 2000;
  totalFollowers = 10000;
  initUI();
  initFollowers(totalFollowers);
  activeSlider.val = activeFollowers/(float)followers.length;
  background(0);
  

  loadPixels();

  blurFilter = new int[width*height];

  saveNextFrame = false;
  noSmooth();
  
}

final static int wf = 4;
final static int hf = 3;
void draw() {
  //VERANDER BACKGROUND KAART
  //**********************************************************************************************************************************************
  //**********************************************************************************************************************************************
  //**********************************************************************************************************************************************
  //**********************************************************************************************************************************************
  //**********************************************************************************************************************************************
  PImage img = loadImage("map3.jpg");
  img.resize(1280, 720);
  image(img,0,0);
  int fullImage = img.width * img.height;
  //**********************************************************************************************************************************************
  //**********************************************************************************************************************************************
  //**********************************************************************************************************************************************
  //**********************************************************************************************************************************************
  //**********************************************************************************************************************************************
  
  
  loadPixels();
  int maxCount = 0;
  swarm(followers, activeFollowers);
  if (!blurToggle.set) {
    Arrays.fill(blurFilter, 0);
  }

  // We want to set the brightness according to Follower density per pixel
  // and we can have thousands of Followers overlapping in one pixel.
  // Using FPM, we first we add 0x100 per Follower to every pixel
  for (int i = 0; i < activeFollowers; i++) {
    Follower f = followers[i];
    int x = (int)f.x;
    int y = (int)f.y;
    if (x >= 0 && x < width && y >= 0 && y < height) {
      int c = blurFilter[x + width*y] + 0x100;
      blurFilter[x + width*y] = c;

      //also keep count maximum value of the blurField, to normalise later on.
      if (c > maxCount) {
        maxCount = c;
      }
    }
  }
  

  // Linear scaling of brightness doensn't work - we want to be able to distinguish from 1 to 100000 Followers
  float mv = 1/sqrt(sqrt(maxCount));
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
      int v = blurFilter[x + y*width];
      if (v > 0) {
        v = (int)(0xFF*sqrt(sqrt(v))*mv);
        pixels[x + y*width] = 0xFF000000 + v*0x10101;
      }
    }
  }
  
  for (int i = 0; i < fullImage; i++) {
    pixels[i] = pixels[i];
}

  updatePixels();
  
  //Make the GRID
  stroke(255); 
  strokeWeight(1); 
  
  while(x < width){
    line(x, 0, x, height);
    x = x + spacing;
  }
  
  while(y < height){
    line(0, y, width, y);
    y = y + spacing;
  }

  // By blurring over time, both the path and the density of the Followers
  // is easier to distinguish
  if (blurToggle.set) {
    blur(blurFilter, pixels, width, height);
    fade(pixels, blurFilter, 15, 4);
    //arrayCopy(pixels, blurFilter);
  }
  Arrays.fill(pixels, 0xFF000000);

  drawUI();
  
}

Answer 1

看起来您从未重置用于在网格线上循环的 x 和 y 变量。

所以在第一次通过后，x 总是大于 width 并且 y 总是大于 height 所以你的循环不会运行.

  x = 0;
  while(x < width){
    line(x, 0, x, height);
    x = x + spacing;
  }
  
  y = 0;
  while(y < height){
    line(0, y, width, y);
    y = y + spacing;
  }

如何在使用 updatePixels() 时在 Processing3 中的图像顶部绘制网格

How to draw a grid on top of an image in Processing3 while using updatePixels()

java

processing