3

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?

elpoto
  • 105
  • 1
  • 8
Dtnand
  • 449
  • 3
  • 14
  • ah yes, are you still having this problem? I'm fairly certain I know what your issue is but I'll more more info like where are you running the js and where is this picture. it almost certainly is a file path issue where you're not loading the image at all but it fails silently – ZekeDroid Jan 30 '14 at 03:41

3 Answers3

1

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

Charlie Wallace
  • 1,810
  • 1
  • 15
  • 17
Asher
  • 92
  • 1
  • 8
  • Just so it's mentioned, you don't need to apologize for posting an answer to an old question. Updates are needed some times, and answers are welcome whether the question is 5 hours old, or 5 years old – Zoe Feb 08 '19 at 16:54
0

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

elpoto
  • 105
  • 1
  • 8
0

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

So it should be fill(b);

I hope this solves your problem.

user41805
  • 523
  • 1
  • 9
  • 21