Есть ли способ получить и установить значения цвета пикселей в объекте createGraphics ()? - PullRequest
Новая
       7

Есть ли способ получить и установить значения цвета пикселей в объекте createGraphics ()?

1 голос
/ 10 марта 2020

Итак, я знаю, как вы можете использовать loadPixels () и updatePixels (), чтобы изменять отдельные пиксели основного холста, как если бы это было растровое изображение. Есть ли подобная техника для доступа к пикселям объекта createGraphics ()? Или мне нужно записать его на холст, а затем манипулировать этим?

Или я должен каким-то образом использовать объект DrawingContext?

1 Ответ

1 голос
/ 10 марта 2020

Если вы хотите манипулировать пикселями, используйте createImage ()

Если вы хотите легко рисовать с использованием графических функций, используйте createGraphics () и loadPixels() / чтение pixels[] должно работать: 

var buffer;

function setup() {
  createCanvas(400, 400);
  
  buffer = createGraphics(10,10);
  buffer.ellipse(5,5,5);
  buffer.loadPixels();
  console.log(buffer.pixels);
}

function draw() {
  background(220);
  image(buffer,0,0,400,400);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

Конечно, вы также можете писать пиксели в PGraphics, если хотите. PImage немного легче, если вам не нужны функции рисования и нужны пиксели.

Вот пример: 

var buffer;
  
function draw() {
  background(220);
  image(buffer,0,0,400,400);
}

function setup() {
  createCanvas(400, 400);
  buffer = createGraphics(10,10);
  buffer.ellipse(5,5,5);
  buffer.loadPixels();
  // print pixels (list of bytes in order (e.g. [r0,g0,b0,a0,r1,g1,b1,a1,...])
  console.log(buffer.pixels);
  
  var gradientW = 3;
  var gradientH = 3;
  for(var y = 0; y < gradientH; y++){
    for(var x = 0; x < gradientH; x++){
      // calculate 1D index from x,y
      let pixelIndex = x + (y * buffer.width);
      // note that as opposed to Processing Java, p5.Image is RGBA (has 4 colour channels, hence the 4 bellow)
      // and the pixels[] array is equal to width * height * 4 (colour cannels)
      // therefore the index is also * 4
      let rIndex = pixelIndex * 4;
      
      console.log('x',x,'y',y,'pixelIndex',pixelIndex,'red index',rIndex);
      // access and assign red
      buffer.pixels[rIndex]     = round(map(x,0,3,0,255));
      // access and assign green
      buffer.pixels[rIndex + 1] = round(map(y,0,3,0,255));
      // access and assign blue
      buffer.pixels[rIndex + 2] = 255 - buffer.pixels[rIndex] + buffer.pixels[rIndex + 1] 
      // access and assign alpha
      buffer.pixels[rIndex + 3] = 255;
      
    }
  }
  
  buffer.updatePixels();
}

function draw() {
  background(220);
  image(buffer,0,0,width,height);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
...