CODEWITHSUNDEEP
javascripthtmlcanvasprocessingprocessing.js
Dtnand
Dtnand

Reputation: 459

fill with an image in processing.js

I'm working with some canvas and processing.js but i cant figure out how to fill an arc/ellipse etc with an image.

Using JavaScript usually i do something like this:

ctx.save();
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2, true);
ctx.closePath();
ctx.clip();
ctx.drawImage(thumbImg, 0, 0, 400, 400);

ctx.beginPath();
ctx.arc(x, y, size, Math.PI * 2, true);
ctx.clip();
ctx.closePath();
ctx.restore();

and the game is done, but how can i do it with processing.js?

I've tried those options but seems that I'm doing something wrong:

b = loadImage("nicola.png");
fill(b)
background(b);
ellipse(x, y, size, size);

any idea?

Upvotes: 3

Views: 1088

Answers (3)

Asher
Asher

Reputation: 102

I believe that what you are trying to get at is called image masking an example of masking

Description:

Masks part of an image from displaying by loading another image and using it as an alpha channel. This mask image should only contain grayscale data, but only the blue color channel is used. The mask image needs to be the same size as the image to which it is applied.

In addition to using a mask image, an integer array containing the alpha channel data can be specified directly. This method is useful for creating dynamically generated alpha masks. This array must be of the same length as the target image's pixels array and should contain only grayscale data of values between 0-255.

Example:

var g2;
var setup = function(){
  createCanvas(200,200);
  background(0, 0, 0, 0);
  smooth();

  fill(255, 255, 255);
  ellipse(100, 100, 200, 200);

  var g1 = get(0, 0, 200, 200);
  background(0, 0, 0, 0);
  noStroke();
  for(let i = 0; i < 360; i++){
    fill(sin(radians(i))*255, i, 200);
    rect(0, i, 200, 1);
  }
  g2 = get(0, 0, 200, 200);
  g2.mask(g1);
}

var draw = function(){
    background(255, 255, 255);
    image(g2, 0, 0);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

an image of what the above code returns:
an image created by the code

Upvotes: 1

user41805
user41805

Reputation: 533

A semicolon ';' is missing after fill(b)

So it should be fill(b);

I hope this solves your problem.

Upvotes: 0

elpoto
elpoto

Reputation: 105

You can either use img.mask(maskImg) to apply an (pixel based) alpha mask or use img.blend(…) as described here for example.

Upvotes: 0

Related Questions