How to create a mask from Polygons (processing)? - processing

I am trying to create from a custom shape a mask for an image.
In processing I came up with this:
Image img;
PImage img2;
PGraphics mGraphic;
void setup(){
img = loadImage("mask.jpg");
img2 = loadImage("test.jpg");
mGraphic = createGraphics(1024,1024, JAVA2D);
size(img.width, img.height);
}
void draw(){
background(255);
mGraphic.beginDraw();
mGraphic.background(0);
mGraphic.ellipse(mouseX, mouseY, 400, 400);
mGraphic.endDraw();
img2.mask(mGraphic);
image(img2,0,0);
}
Above code will create a ellipse that will be the mask of the image.
I would like to achieve the same with a custom shape generated by Polygons:
import java.awt.Polygon;
PImage img;
PImage img2;
PGraphics mGraphic;
CustomShape myShape = new CustomShape();
void setup(){
img = loadImage("mask.jpg");
img2 = loadImage("test.jpg");
mGraphic = createGraphics(1024,1024, JAVA2D);
myShape.addPoint(25, 25);
myShape.addPoint(275, 25);
myShape.addPoint(275, 75);
myShape.addPoint(175, 75);
myShape.addPoint(175, 275);
myShape.addPoint(125, 275);
myShape.addPoint(125, 75);
myShape.addPoint(25, 75);
smooth();
// img2.filter(INVERT);
size(img.width, img.height);
}
void draw(){
background(255);
stroke(0);
myShape.display();
img2.mask(myShape);
image(img2,0,0);
}
class CustomShape extends Polygon {
void display() {
stroke(0);
fill(0);
beginShape();
for (int i=0; i<npoints; i++) {
vertex(xpoints[i], ypoints[i]);
}
endShape(CLOSE);
}
}
Unfortunately, this code will give me an error: The method mask(int[]) in the type PImage is not applicable for the arguments (Masking_image_1.CustomShape)
Is this even possible to get the same result as my first code, but then with the use of a custom shape? And how can I solve that?
If there are any questions left, please let me know. Above code will work inside Processing.

Well, your error says it all: the mask() function does not know what to do with a CustomShape parameter. The parameter needs to be a PImage or a mask array. More info can be found in the reference.
To use your custom shape, what you want to do is draw that custom shape to a PGraphics (which is a subclass of PImage), and then use that PGraphics as the mask. You'd do that using the createGraphics() function. Again, more info can be found in the reference.

Related

Processing P3D not rendering properly

I tried to make a simple 3d spinning cube in processing.
int size = 100;
float angle = 0;
void setup() {
size(500, 500, P3D);
}
void draw() {
lights();
translate(width/2, height/2, 0);
rotateY(angle);
rotateX(angle);
background(0);
box(size);
angle+=0.05;
}
When i run it, i got a nice spinning cube but there is some problem in rendering.
Found a similar thread with no answer:-
Processing P3D Animation leaving artifacts behind
Image Depicting the problem
Although I could not found the reason for this weird effect. But here is a quick hack which worked out for me.
Instead of using the background function to fill the background, simply draw a filled rectangle every frame.
int size = 100;
float angle = 0;
void setup() {
size(500, 500, P3D);
}
void draw() {
//black
fill(0);
//rectangle to fill the canvas
rect(0,0,width,height);
lights();
fill(255);
translate(width/2, height/2, 0);
rotateY(angle);
rotateX(angle);
box(size);
angle+=0.05;
}

How to print an image in processing

I am trying to print an image off the internet in processing.
I have tried looking at the processing website and found some code I thought should work:
import spaceInvadersEnemy.pdf.*;
void setup(){
size(800, 600);
}
void draw(){
size(600, 600);
beginRecord(PDF, "spaceInvadersEnemy.pdf"); // Start writing to PDF
background(255);
stroke(0, 20);
strokeWeight(20);
line(200, 0, 400, height); // Draw line to screen and to PDF
endRecord();
}
But I always got an error on the line with:
import spaceInvadersEnemy.pdf.*;
The error says "No library found for spaceInvadersEnemy.pdf"
I know that I need to include the file somewhere but I don't know where.
I am trying to just simply print an image of a space invaders enemy can someone please help me.
I found the solution by going to the processing website and looking at the load image function it is right here: LoadImage() syntax page
If you have this problem you need to create a PImage then load it with the file name like this: spaceInvadersEnemy = loadImage("spaceInvadersEnemy.png"); you render it by using the image function: image(PImage, xPosition, yPosition, width, height); The width and height are not needed though. Your code should look something like this:
void setup() {
size(800, 600);
spaceInvadersEnemy = loadImage("spaceInvadersEnemy.png");
}
void draw() {
background(0);
image(spaceInvadersEnemy, x, y, 50, 50);
}

Processing Making PImage with PGraphics

I'm trying a simple masking of an image with a circle shape on top of it.
I don't understand why it is not working. The image gets printed correctly, but not a sing of a mask. This is my code:
PImage lion;
PGraphics mask;
void setup() {
size(720, 380);
lion = loadImage("lion.jpg");
mask = createGraphics(720, 380);
mask.beginDraw();
mask.ellipse(0, 0, 150, 150);
mask.fill(0, 0, 0);
mask.endDraw();
mask.mask(lion);
}
void draw() {
image(lion, 0, 0);
}
The lion image is just random image from google.
You have to apply the mask to the lion image and not to apply the lion image as a mask to the mask.
The first 2 parameters of the ellipse() are the x and y center coordinates of the ellipse.
Fill the entire mask with a black background and then draw a white ellipse to center of the mask:
void setup() {
size(720, 380);
lion = loadImage("lion.jpg");
int w = lion.width;
int h = lion.height;
mask = createGraphics(w, h);
mask.beginDraw();
mask.background(0);
mask.fill(255);
mask.ellipse(w/2, h/2, w, h);
mask.endDraw();
lion.mask(mask);
}
void draw() {
background(0);
image(lion, 0, 0);
}

How to fill the color inside the curve?

I want to create a picture that has some closed areas using function curve(...), but I do not know how to fill the color inside.
Is there any way to fill inside the head and body?
void setup(){
size(800,800);
}
void draw(){
background(170,243,255);
fish();
}
void fish(){
translate(width/2, height/2);//mouseX, mouseY
//eye
fill(231,255,188);
stroke(0);
ellipse(-100,-100,50,45);
fill(0);
ellipse(-100,-100,30,28);
//head
noFill();
strokeWeight(2);
stroke(157,88,255);
curve(-400,-100,-200,-200,50,-150,150,50);
curve(-100,-400,-200,-200,-150,50,0,100);
curve(-300,50,-150,50,50,-150,50,-300);
//body
curve(-200,-350,50,-150,250,250,600,300);
curve(-200,-200,-150,50,250,250,500,250);
}
You could use the curveVertex() function.
This doesn't do exactly what you want, but you can play around with it until it does:
//body
fill(255, 0, 0);
beginShape();
curveVertex(-200, -350);
curveVertex(50, -150);
curveVertex(250, 250);
curveVertex(-150, 50);
curveVertex(-200, -200);
endShape();
Note that you can have multiple blocks like this to fill in different pieces with the same color.

OutOfMemory when manipulating images

This produces an OutOfMemory exception after running for a few seconds. Any ideas?
PGraphics img;
void setup() {
size(500, 500);
img = createGraphics(width, height, JAVA2D);
// this is here just for the testcase because else I get a
// NullPointerException too (probably a harmless Processing bug)
img.beginDraw(); img.endDraw();
}
void draw() {
PGraphics tmpImg = createGraphics(img.width, img.height, JAVA2D);
tmpImg.beginDraw();
tmpImg.image(img, 0, 0);
tmpImg.endDraw();
tmpImg.dispose();
}
Mat's right, you're not supposed to instantiate a new PGraphics each frame.
You could simply do something like this:
PGraphics img;
void setup() {
size(500, 500);
img = createGraphics(width, height, JAVA2D);
// this is here just for the testcase because else I get a
// NullPointerException too (probably a harmless Processing bug)
img.beginDraw(); img.endDraw();
}
void draw() {
image(img, 0, 0);
}
because PGraphics extends PImage.
Typically you'd use the basic PImage API, but if you'd need to draw shapes onto a bitmap or fake 'layers', you could use PGraphics in conjunction with PImage, but just don't allocate a new PGraphics 30 to 60 times a second.

Resources