0

単純なコントラストと赤のチャンネル操作スケッチを p5.js に変換しようとしています。

元の .pde は、processing.js を使用してうまく機能します。

// Declaring a variable of type PImage
PImage img;

void setup() {
  size(564, 698);
  // Make a new instance of a PImage by loading an image file
  img = loadImage("../image.jpg");
}

void draw() {
  loadPixels();

  // We must also call loadPixels() on the PImage since we are going to read its pixels.  img.loadPixels();
  for (int x = 0; x < img.width; x++ ) {
    for (int y = 0; y < img.height; y++ ) {

      // Calculate the 1D pixel location
      int loc = x + y*img.width;

      // Get the R,G,B values from image
      float r = red (img.pixels[loc]);
      float g = green (img.pixels[loc]);
      float b = blue (img.pixels[loc]);

      // We calculate a multiplier ranging from 0.0 to 8.0 based on mouseX position.
      // That multiplier changes the RGB value of each pixel.     
      float adjustBrightness = ((float) mouseX / width) * 4.0;
      float adjustRed =  ((float) mouseY / height) * 2.0;
      r *= adjustBrightness;  // see https://processing.org/reference/multiplyassign.html
      g *= adjustBrightness;
      b *= adjustBrightness;

      r *= adjustRed;

      // The RGB values are constrained between 0 and 255 before being set as a new color.     
      r = constrain(r,0,255);
      g = constrain(g,0,255);
      b = constrain(b,0,255);

      // Make a new color and set pixel in the window
      color c = color(r,g,b);
      pixels[loc] = c;
    }
  }

  updatePixels(); 

}

ただし、p5.js に変換すると、更新されたスクリプト (以下) はエラーを返します。

Error: Needs p5.Color or pixel array as argument.

私が試したことについていくつかのコメントを残しました： var img; // 可変感度;

function preload() {
  img = loadImage("../image.jpg");
}

function setup() {
  createCanvas(564, 698);
  pixelDensity(1);
  img.loadPixels();
  loadPixels();
}

function draw() {
  loadPixels();
  for (var x = 0; x < img.width; x++) {
    for (var y = 0; y < img.height; y++ ) {
      // Calculate the 1D location from a 2D grid
      var loc = (x + y*img.width)*4;
      // Get the R,G,B values from image
      var r,g,b;
      r = red (img.pixels[loc]);
      g = green (img.pixels[loc]);
      b = blue (img.pixels[loc]);
      // Calculate an amount to change brightness based on proximity to the mouse
    //   var maxdist = 50;
    //   var d = dist(x, y, mouseX, mouseY);

      var adjustBrightness = (mouseX/width)*4;
      var adjustRed = (mouseY/height)*4;
      r *= adjustBrightness;
      g *= adjustBrightness; 
      b *= adjustBrightness;

      r *= adjustRed;
      // Constrain RGB to make sure they are within 0-255 color range
      r = constrain(r, 0, 255);
      g = constrain(g, 0, 255);
      b = constrain(b, 0, 255);
      // Make a new color and set pixel in the window
      //color c = color(r, g, b);
    //   var pixloc = (y*width + x)*4;
    c = color(r,g,b);
    pixels[loc] = c;
    //   pixels[loc] = r; //red
    //   pixels[loc+1] = 40; //green
    //   pixels[loc+2] = b; //blue
    //   pixels[loc+3] = 50; //alpha
    }
  }
  updatePixels();
}

問題は red() green() blue() 関数にあると思います。

4

2 に答える 2

0

これらの行は意味がありません:

r = red (img.pixels[loc]);
g = green (img.pixels[loc]);
b = blue (img.pixels[loc]);

配列は、pixels各色を個別のインデックスに保持します。次のようになります。

var r = img.pixels[loc];
var g = img.pixels[loc+1];
var b = img.pixels[loc+2];

詳細については、リファレンスを参照してください。

それを修正した後でも、まだ他の問題が発生します。たとえば、いつc変数を宣言しますか?

それでも動作しない場合は、使用している画像を更新したコードとともに新しい質問に投稿してください。そこから先に進みます。幸運を。

于 2016-08-17T02:41:18.427 に答える
0

物事を正しい軌道に乗せてくれた Kevin のおかげで、実際に動作する p5.js スクリプトを以下に示します。

function preload() {
  img = loadImage("../image.jpg");
}

function setup() {
  createCanvas(564, 698);
  pixelDensity(1);
  img.loadPixels();
  loadPixels();
}

function draw() {
  loadPixels();
  for (var x = 0; x < img.width; x++) {
    for (var y = 0; y < img.height; y++ ) {
      // Calculate the 1D location from a 2D grid
      var loc = (x + y*img.width)*4;

      // Get the R,G,B values from image
      var r = img.pixels[loc];
      var g = img.pixels[loc+1];
      var b = img.pixels[loc+2];

      // get mouse input on adjustment variables
      var adjustBrightness = (mouseX/width)*4;
      var adjustRed = (mouseY/height)*4;
      r *= adjustBrightness;
      g *= adjustBrightness; 
      b *= adjustBrightness;

      r *= adjustRed;
      // Constrain RGB to make sure they are within 0-255 color range
      r = constrain(r, 0, 255);
      g = constrain(g, 0, 255);
      b = constrain(b, 0, 255);

      // write back out pixel values
      pixels[loc] = r; //red
      pixels[loc+1] = g; //green
      pixels[loc+2] = b; //blue
      pixels[loc+3] = 255; //alpha
    }
  }
  updatePixels();
}

prossessing.js バージョンよりもはるかに遅く実行されます。それが根本的な違いによるものなのか、単に非効率的なコーディングによるものなのかはわかりません!

于 2016-08-18T04:57:55.233 に答える