We are about to switch to a new forum software. Until then we have removed the registration on this forum.
I have an experimental sktech that I've made. It "draws" a mask like a painting program. The effect is like uncovering an image underneath the one you are looking at.
This effect works fine in Java mode. However, it doesn't work in JavaScript mode and I'm not sure why.
Here's my code so far (you'll need to supply images to use, but otherwise this should work):
/* @pjs preload="leaves.jpg, moonwalk.jpg";
*/
/*
*
*
*/
PGraphics maskPattern;
PGraphics savedimg;
PImage img1;
PImage img2;
int displayImageX;
int displayImageY;
float scaleFactor;
float centerScaledAdjustedXpos;
float centerScaledAdjustedYpos;
void setup() {
img1 = loadImage("moonwalk.jpg");
size(800, 800, JAVA2D);
//640,260
maskPattern = createGraphics(img1.width, img1.height);
savedimg = createGraphics(img1.width, img1.height);
img2 = loadImage("leaves.jpg");
scaleFactor=1;
displayImageX = width/2;
displayImageY = height/2;
centerScaledAdjustedXpos=0;
centerScaledAdjustedYpos=0;
}
void draw() {
pushMatrix();
scale(scaleFactor);
background(0);
imageMode(CENTER);
image(img2, displayImageX/scaleFactor, displayImageY/scaleFactor);
if (mousePressed == true) {
maskPaint();
}
img1.mask(maskPattern);
image(img1, displayImageX/scaleFactor, displayImageY/scaleFactor);
popMatrix();
}
void maskPaint() {
centerScaledAdjustedXpos = ((mouseX-displayImageX)/scaleFactor+(maskPattern.width/2));
centerScaledAdjustedYpos = ((mouseY-displayImageY)/scaleFactor+(maskPattern.height/2));
maskPattern.beginDraw();
maskPattern.stroke(255);
maskPattern.fill(255);
maskPattern.ellipse(centerScaledAdjustedXpos, centerScaledAdjustedYpos, 50, 50);
maskPattern.endDraw();
println(centerScaledAdjustedXpos + ", " + centerScaledAdjustedYpos);
}
void imageOpen(File selection) {
PGraphics tempMaskPattern;
PImage tempImg;
if (selection == null) {
println("Window was closed or the user hit cancel.");
}
else {
tempMaskPattern = createGraphics(maskPattern.width, maskPattern.height);
tempMaskPattern = maskPattern;
println("User selected " + selection.getAbsolutePath());
img1 = loadImage(selection.getAbsolutePath());
maskPattern = createGraphics(img1.width, img1.height);
println(tempMaskPattern.width + ", " + tempMaskPattern.height);
println(maskPattern.width + ", " + maskPattern.height);
savedimg = createGraphics(img1.width, img1.height);
}
}
void keyPressed() {
if (key == '1')
{
selectInput("Select a file to process:", "imageOpen");
}
if (key == 's')
{
savedimg.beginDraw();
savedimg.image(img2, 0, 0);
img1.mask(maskPattern);
savedimg.image(img1, 0, 0);
savedimg.endDraw();
savedimg.save("final_image.jpg");
println("Saved ");
}
if (key == ' ') {
maskPattern.clear();
}
if (key == '-') {
println("minus ");
scaleFactor=scaleFactor-.01;
}
if (key == '=') {
println(img1.width/2);
scaleFactor=scaleFactor+.01;
}
}
So that's it. Any way I can get this drawing functionality to work in the browser like it does in the Java app?
EDIT: not having an easy time with this code commenting.
Comments
See this post for code commenting: http://forum.processing.org/two/discussion/32/how-to-format-text-and-code-on-the-new-forum#Item_7
im not sure what it is you are trying to do because i can't decypher the code but i have an example that might help you, because I remember having issues figuring out how to draw a pgraphics to the main but all you need to do to convert from pgraphics to a pimage is .get() i believe. In any case check it out see if it helps: http://www.openprocessing.org/sketch/98115
here is a fiddle of your code + images http://jsfiddle.net/Darbicus/6M8q3/ idk what its supposed to do yet i can't get it to work in java lol
I'm pretty sure its just the image locations being against the cross origin sharing policy
Just wanted to say thanks a bunch. I needed PGraphics in order to build my masks, but they weren't showing up in JS. Converting it to a PImage, then using that to mask was exactly what I needed to do. .get() was exactly what I needed.