mask() and blend() not working in processing.js

tompainter

mask() and blend() not working in processing.js

in Processing with Other Languages • 2 years ago

Hi
-
Im brand new to processing, but Ive hacked around a few other scripting languages before so things seem really nice at processing.
what I am trying to do, is make a generative logo for my company (www.bigman3d.com)
I want to define generative colour artwork 100x100, then mask that with one of the triangle shapes
then repeat for each shape, building up the design piece by piece.
-
problem is, using either the mask() or blend() the code works in the processing app, but not online
Here is the processing for HTML that doesnt mask

<html>
<head>
<title>Processing.js - Basic Example</title>
<script language="javascript" src="processing.init.js"></script>
<script language="javascript" src="processing.js"></script>
</head>
<body bgcolor="#000000">
<script type="application/processing">
/*
Generative Tangram using processing
seems there is a bug with the javascript version, cos this works nice on the default processing
*/
// Global variables
// Create a blank image for each colour and alpha, 100x100 pixels with RGB color
PImage shapeA_RGB = createImage(100,100,RGB);
PImage shapeA_ALPHA = createImage(100,100,RGB);
PImage shapeA_ARGB = createImage(100,100,RGB);
PImage shapeB_RGB = createImage(100,100,RGB);
PImage shapeB_ALPHA = createImage(100,100,RGB);
PImage shapeC_RGB = createImage(100,100,RGB);
PImage shapeC_ALPHA = createImage(100,100,RGB);
PImage shapeD_RGB = createImage(100,100,RGB);
PImage shapeD_ALPHA = createImage(100,100,RGB);
PImage shapeE_RGB = createImage(100,100,RGB);
PImage shapeE_ALPHA = createImage(100,100,RGB);
PImage shapeF_RGB = createImage(100,100,RGB);
PImage shapeF_ALPHA = createImage(100,100,RGB);
PImage shapeG_RGB = createImage(100,100,RGB);
PImage shapeG_ALPHA = createImage(100,100,RGB);
// Setup the Processing Canvas
void setup(){
size( 100, 100 );
strokeWeight( 0 );
fill(255,255,255);
frameRate( 15 );
}
// Main draw loop
void draw(){
noStroke();
strokeWeight( 0 );
// Capture shapeA (triangle at the top) RGB
background(0);
fill(random(255),random(255),random(255));
quad(0, 0, 100, 0, 100, 100, 0, 100) ;
loadPixels();
PImage shapeA_RGB = get();
// Capture shapeA (triangle at the top) ALPHA
background(0);
fill(255);
triangle(0, 0, 50, 50, 100, 0) ;
loadPixels();
PImage shapeA_ALPHA = get();
// Draw shapeB triangle2 (left)
//fill( random(255), random(255), random(255));
//triangle(0, 0, 50, 50, 0, 100) ;
// Draw shapeC triangle3 (middle)
//fill( random(255), random(255), random(255));
//triangle(50, 50, 75, 25, 75, 75) ;
// Draw shapeD rhombus on the right
//fill( random(255), random(255), random(255));
//quad(75, 25, 100, 0, 100, 50, 75, 75) ;
// Draw shapeE triangle5 (bottom right)
//fill( random(255), random(255), random(255));
//triangle(100, 50, 50, 100, 100, 100) ;
// Draw shapeF triangle6 (bottom left)
//fill( random(255), random(255), random(255));
//triangle(0, 100, 25, 75, 50, 100) ;
// Draw shapeG square near the bottom
//fill( random(255), random(255), random(255));
//quad(25, 75, 50, 50, 75, 75, 50, 100) ;
// lets draw shape A
background(0);
image(shapeA_RGB,0,0);
//image(shapeA_ALPHA,0,0);
//blend(shapeA_ALPHA,0,0,100,100,0,0,100,100,MULTIPLY);
exit();
}
void mousePressed()
{
redraw();
}
</script><canvas width="100px" height="100px"></canvas>
<pre>
</pre>
</body>
</html>

Here is the processing pde version that creates a perfectly masked triangle

/*
Generative Tangram using processing
seems there is a bug with the javascript version, cos this works nice on the default processing
*/
// Global variables
// Create a blank image for each colour and alpha, 100x100 pixels with RGB color
PImage shapeA_RGB = createImage(100,100,RGB);
PImage shapeA_ALPHA = createImage(100,100,RGB);
PImage shapeA_ARGB = createImage(100,100,RGB);
PImage shapeB_RGB = createImage(100,100,RGB);
PImage shapeB_ALPHA = createImage(100,100,RGB);
PImage shapeC_RGB = createImage(100,100,RGB);
PImage shapeC_ALPHA = createImage(100,100,RGB);
PImage shapeD_RGB = createImage(100,100,RGB);
PImage shapeD_ALPHA = createImage(100,100,RGB);
PImage shapeE_RGB = createImage(100,100,RGB);
PImage shapeE_ALPHA = createImage(100,100,RGB);
PImage shapeF_RGB = createImage(100,100,RGB);
PImage shapeF_ALPHA = createImage(100,100,RGB);
PImage shapeG_RGB = createImage(100,100,RGB);
PImage shapeG_ALPHA = createImage(100,100,RGB);
// Setup the Processing Canvas
void setup(){
size( 100, 100 );
strokeWeight( 0 );
fill(255,255,255);
frameRate( 15 );
}
// Main draw loop
void draw(){
noStroke();
strokeWeight( 0 );
// Capture shapeA (triangle at the top) RGB
background(0);
fill(random(255),random(255),random(255));
quad(0, 0, 100, 0, 100, 100, 0, 100) ;
loadPixels();
PImage shapeA_RGB = get();
// Capture shapeA (triangle at the top) ALPHA
background(0);
fill(255);
triangle(0, 0, 50, 50, 100, 0) ;
loadPixels();
PImage shapeA_ALPHA = get();
// Draw shapeB triangle2 (left)
//fill( random(255), random(255), random(255));
//triangle(0, 0, 50, 50, 0, 100) ;
// Draw shapeC triangle3 (middle)
//fill( random(255), random(255), random(255));
//triangle(50, 50, 75, 25, 75, 75) ;
// Draw shapeD rhombus on the right
//fill( random(255), random(255), random(255));
//quad(75, 25, 100, 0, 100, 50, 75, 75) ;
// Draw shapeE triangle5 (bottom right)
//fill( random(255), random(255), random(255));
//triangle(100, 50, 50, 100, 100, 100) ;
// Draw shapeF triangle6 (bottom left)
//fill( random(255), random(255), random(255));
//triangle(0, 100, 25, 75, 50, 100) ;
// Draw shapeG square near the bottom
//fill( random(255), random(255), random(255));
//quad(25, 75, 50, 50, 75, 75, 50, 100) ;
// lets draw shape A
background(0);
image(shapeA_RGB,0,0);
//image(shapeA_ALPHA,0,0);
blend(shapeA_ALPHA,0,0,100,100,0,0,100,100,MULTIPLY);
exit();
}
void mousePressed()
{
redraw();
}

Here is the difference, both side by side

Here is the associated processing.init.js file

if(window.addEventListener){window.addEventListener("load",function(){var scripts=document.getElementsByTagName("script");for(var i=0;i<scripts.length;i++){if(scripts[i].type=="application/processing"){var src=scripts[i].src,canvas=scripts[i].nextSibling;if(src&&src.indexOf("#")){canvas=document.getElementById(src.substr(src.indexOf("#")+1));}else{while(canvas&&canvas.nodeName.toUpperCase()!="CANVAS")canvas=canvas.nextSibling;}if(canvas){Processing(canvas,scripts[i].text);}}}},false);}

I used the processing.js file found from the download button on the example on this page
http://processingjs.org/learning

Ive found that by linking to a locally stored processing-1.3.0.js found on this page I just get a blank screen
http://processingjs.org/download

-
If anyone could shine any light on this It would be massively appreciated, I have exactly the same problem with the .mask() function working in the processing app but not in the .js version
-
cheers
Tom

Replies(9)

PhiLho

Re: mask() and blend() not working in processing.js

2 years ago

" Here is the processing for HTML that doesnt mask"
Indeed, I don't see a mask() call in this code. Neither in the .pde version...

tompainter

Re: mask() and blend() not working in processing.js

2 years ago

Hi sorry that was for the instance of the blend function not working (please see above)

1. blend(shapeA_ALPHA,0,0,100,100,0,0,100,100,MULTIPLY);

Ive tried 2 different ways to isolate patterns to the 'mask' shapes that I draw, I thought I could do that by either using the blend() command in multiply mode (see code in my first post), or by using the .mask() function. (see code below).
The strange thing is, they dont work with processing.js, but they work ok in the processing app itself.

<html>
<head>
<title>Processing.js - Basic Example</title>
<script language="javascript" src="processing.init.js"></script>
<script language="javascript" src="processing.js"></script>
</head>
<body bgcolor="#000000">
<script type="application/processing">
/*
Generative Tangram using processing
seems there is a bug with the javascript version, cos this works nice on the default processing
*/
// Global variables
// Create a blank image for each colour and alpha, 100x100 pixels with RGB color
PImage shapeA_RGB = createImage(100,100,RGB);
PImage shapeA_ALPHA = createImage(100,100,RGB);
PGraphics graphicalMask;
PImage shapeB_RGB = createImage(100,100,RGB);
PImage shapeB_ALPHA = createImage(100,100,RGB);
PImage shapeC_RGB = createImage(100,100,RGB);
PImage shapeC_ALPHA = createImage(100,100,RGB);
PImage shapeD_RGB = createImage(100,100,RGB);
PImage shapeD_ALPHA = createImage(100,100,RGB);
PImage shapeE_RGB = createImage(100,100,RGB);
PImage shapeE_ALPHA = createImage(100,100,RGB);
PImage shapeF_RGB = createImage(100,100,RGB);
PImage shapeF_ALPHA = createImage(100,100,RGB);
PImage shapeG_RGB = createImage(100,100,RGB);
PImage shapeG_ALPHA = createImage(100,100,RGB);
// Setup the Processing Canvas
void setup(){
size( 100, 100 );
graphicalMask = createGraphics(100, 100, P3D);
strokeWeight( 0 );
fill(255,255,255);
frameRate( 15 );
}
// Main draw loop
void draw(){
noStroke();
strokeWeight( 0 );
// Capture shapeA (triangle at the top) RGB
background(0);
fill(random(255),random(255),random(255));
quad(0, 0, 100, 0, 100, 100, 0, 100) ;
loadPixels();
PImage shapeA_RGB = get();
// Capture shapeA (triangle at the top) ALPHA
//background(0);
//fill(255);
//triangle(0, 0, 50, 50, 100, 0) ;
//loadPixels();
//PImage shapeA_ALPHA = get();
// Draw shapeA (triangle at the top) ALPHA as graphical mask
graphicalMask.beginDraw();
graphicalMask.background(0);
graphicalMask.fill(255);
graphicalMask.triangle(0, 0, 50, 50, 100, 0);
graphicalMask.endDraw();
// Draw shapeB triangle2 (left)
//fill( random(255), random(255), random(255));
//triangle(0, 0, 50, 50, 0, 100) ;
// Draw shapeC triangle3 (middle)
//fill( random(255), random(255), random(255));
//triangle(50, 50, 75, 25, 75, 75) ;
// Draw shapeD rhombus on the right
//fill( random(255), random(255), random(255));
//quad(75, 25, 100, 0, 100, 50, 75, 75) ;
// Draw shapeE triangle5 (bottom right)
//fill( random(255), random(255), random(255));
//triangle(100, 50, 50, 100, 100, 100) ;
// Draw shapeF triangle6 (bottom left)
//fill( random(255), random(255), random(255));
//triangle(0, 100, 25, 75, 50, 100) ;
// Draw shapeG square near the bottom
//fill( random(255), random(255), random(255));
//quad(25, 75, 50, 50, 75, 75, 50, 100) ;
// lets draw shape A
background(0);
shapeA_RGB.mask(graphicalMask);
image(shapeA_RGB,0,0);
exit();
}
void mousePressed()
{
redraw();
}
</script><canvas width="100px" height="100px"></canvas>
<pre>
</pre>
</body>
</html>

PhiLho

Re: mask() and blend() not working in processing.js

2 years ago

It might be a bug in Processing.js. I am not specialist of it, but at least some demos shows that mask() works: http://processingjs.org/learning/basic/alphamask
I haven't found a blend() demo.

tompainter

Re: mask() and blend() not working in processing.js

2 years ago

Hi
-
yes, these are quite simple functions
I suspect it is not a bug but something wrong with the way I am calling the processingjs, I think it might be something to do with my setup with the HTML and javascript.
-
as a test Ive been trying to rip the page you supplied
http://processingjs.org/learning/basic/alphamask
and run it locally on my machine, I havent managed that yet, which means it might be the same problem stopping mask running on my machine
-
will keep searching for the answer...
-
thanks
Tom

tompainter

Re: mask() and blend() not working in processing.js

2 years ago

Ok, what I have been trying to do, is just get the example from
http://processingjs.org/learning/basic/alphamask
working on my machine

I have downloaded the page source for the above page, and I have done a find and replace on it to replace the paths to the two images to /pic/ which is where I have saved test.jpg and mask.jpg on my machine

I dont really have a clue what Im doing with the HTML and JAVASCRIPT side of things!
its strange I can get the example half working if I omit the .mask line (I get the test.jpg unmasked)
but if I use it as is, I just get a white box

tompainter

Re: mask() and blend() not working in processing.js

2 years ago

Hi
-
I have my sketch coming along nicely in the processing app

/*
Generative Tangram using processing
seems there is a bug with the javascript version, cos this works nice on the default processing but doesnt mask with the .js version
*/
// Global variables
// Create a blank image for each colour and mask
PImage shapeA_RGB = createImage(width,height,RGB);
PImage shapeB_RGB = createImage(width,height,RGB);
PImage shapeC_RGB = createImage(width,height,RGB);
PImage shapeD_RGB = createImage(width,height,RGB);
PImage shapeE_RGB = createImage(width,height,RGB);
PImage shapeF_RGB = createImage(width,height,RGB);
PImage shapeG_RGB = createImage(width,height,RGB);
PGraphics graphicalMaskA;
PGraphics graphicalMaskB;
PGraphics graphicalMaskC;
PGraphics graphicalMaskD;
PGraphics graphicalMaskE;
PGraphics graphicalMaskF;
PGraphics graphicalMaskG;
int styleeR;
// gradient constants
int Y_AXIS = 1;
int X_AXIS = 2;
// Setup the Processing Canvas
void setup(){
size(500, 500);
graphicalMaskA = createGraphics(width, height, P3D);
graphicalMaskB = createGraphics(width, height, P3D);
graphicalMaskC = createGraphics(width, height, P3D);
graphicalMaskD = createGraphics(width, height, P3D);
graphicalMaskE = createGraphics(width, height, P3D);
graphicalMaskF = createGraphics(width, height, P3D);
graphicalMaskG = createGraphics(width, height, P3D);
strokeWeight( 0 );
fill(255,255,255);
frameRate( 15 );
}
// Main draw loop
void draw(){
noStroke();
//for each shape lets fill the screen with colours, capture the screen then save that away for masking it later
//shapeA
styleeR =int(random(4));
createGenerativePatterns(styleeR);
loadPixels();
PImage shapeA_RGB = get();
//shapeB
styleeR =int(random(4));
createGenerativePatterns(styleeR);
loadPixels();
PImage shapeB_RGB = get();
//shapeC
styleeR =int(random(4));
createGenerativePatterns(styleeR);
loadPixels();
PImage shapeC_RGB = get();
//shapeD
styleeR =int(random(4));
createGenerativePatterns(styleeR);
loadPixels();
PImage shapeD_RGB = get();
//shapeE
styleeR =int(random(4));
createGenerativePatterns(styleeR);
loadPixels();
PImage shapeE_RGB = get();
//shapeF
styleeR =int(random(4));
createGenerativePatterns(styleeR);
loadPixels();
PImage shapeF_RGB = get();
//shapeG
styleeR =int(random(4));
createGenerativePatterns(styleeR);
loadPixels();
PImage shapeG_RGB = get();
// Draw the alpha for shapeA (the triangle at the top) as graphical mask
graphicalMaskA.beginDraw();
graphicalMaskA.background(0);
graphicalMaskA.strokeWeight(0);
graphicalMaskA.fill(255);
graphicalMaskA.triangle(0, 0, width*0.5, height*0.5, width, 0);
graphicalMaskA.endDraw();
// Draw shapeB triangle2 (left)
graphicalMaskB.beginDraw();
graphicalMaskB.background(0);
graphicalMaskB.strokeWeight(0);
graphicalMaskB.fill(255);
graphicalMaskB.triangle(0, 0, width*0.5, height*0.5, 0, height) ;
graphicalMaskB.endDraw();
// Draw shapeC triangle3 (middle)
graphicalMaskC.beginDraw();
graphicalMaskC.background(0);
graphicalMaskC.strokeWeight(0);
graphicalMaskC.fill(255);
graphicalMaskC.triangle(width*0.5, height*0.5, width*0.75, height*0.25, width*0.75, height*0.75) ;
graphicalMaskC.endDraw();
// Draw shapeD rhombus on the right
graphicalMaskD.beginDraw();
graphicalMaskD.background(0);
graphicalMaskD.strokeWeight(0);
graphicalMaskD.fill(255);
graphicalMaskD.quad(width*0.75, height*0.25, width*1.0, 0.0, width*1.0, height*0.50, width*0.75, height*0.75) ;
graphicalMaskD.endDraw();
// Draw shapeE triangle5 (bottom right)
graphicalMaskE.beginDraw();
graphicalMaskE.background(0);
graphicalMaskE.strokeWeight(0);
graphicalMaskE.fill(255);
graphicalMaskE.triangle(width, height*0.50, width*0.50, height, width, height) ;
graphicalMaskE.endDraw();
// Draw shapeF triangle6 (bottom left)
graphicalMaskF.beginDraw();
graphicalMaskF.background(0);
graphicalMaskF.strokeWeight(0);
graphicalMaskF.fill(255);
graphicalMaskF.triangle(width*0, height, width*0.25, height*0.75, width*0.50, height) ;
graphicalMaskF.endDraw();
// Draw shapeG square near the bottom
graphicalMaskG.beginDraw();
graphicalMaskG.background(0);
graphicalMaskG.strokeWeight(0);
graphicalMaskG.fill(255);
graphicalMaskG.quad(width*0.25, height*0.75, width*0.50, height*0.50, width*0.75, height*0.75, width*0.50, height) ;
graphicalMaskG.endDraw();
// lets draw the shapes
background(0);
shapeA_RGB.mask(graphicalMaskA);
image(shapeA_RGB,0,0);
shapeB_RGB.mask(graphicalMaskB);
image(shapeB_RGB,0,0);
shapeC_RGB.mask(graphicalMaskC);
image(shapeC_RGB,0,0);
shapeD_RGB.mask(graphicalMaskD);
image(shapeD_RGB,0,0);
shapeE_RGB.mask(graphicalMaskE);
image(shapeE_RGB,0,0);
shapeF_RGB.mask(graphicalMaskF);
image(shapeF_RGB,0,0);
shapeG_RGB.mask(graphicalMaskG);
image(shapeG_RGB,0,0);
noLoop();
}
void createGenerativePatterns(int styleeR)
{
// Lets create an effect for us to mask
// first lets fill our BG with a random colour
noStroke();
strokeWeight( 0 );
background(0);
fill(random(255),random(255),random(255));
quad(0, 0, width, 0, width, height, 0, height) ;
//if style is 1 then lets draw a horizontal gradient
if(styleeR==1)
{
drawHorizGradient();
}
//if style is 2 then lets draw a vertical gradient
if(styleeR==2)
{
drawVertGradient();
}
//if style is 3 then lets draw polka dots
if(styleeR==3)
{
int polkaSize = int(random(width/2))+1;
int polkaSpacing = polkaSize+int(random(width/10))+1;
fill(random(255),random(255),random(255));
for(int i = 0; i <= width*1.2; i += polkaSpacing)
{
for(int j = 0; j <= height*1.2; j += polkaSpacing)
{
ellipse(i, j, polkaSize, polkaSize);
}
}
}
//if style is 4 then lets draw polka dots with a horizGradient
if(styleeR==4)
{
drawHorizGradient();
int polkaSize = int(random(width/2))+1;
int polkaSpacing = polkaSize+int(random(width/10))+1;
fill(random(255),random(255),random(255));
for(int i = 0; i <= width*1.2; i += polkaSpacing)
{
for(int j = 0; j <= height*1.2; j += polkaSpacing)
{
ellipse(i, j, polkaSize, polkaSize);
}
}
}
}
void mousePressed()
{
redraw();
}
void drawHorizGradient()
{
color c3 = color(random(255),random(255),random(255));
color c4 = color(random(255),random(255),random(255));
setGradient(0, 0, width, height, c3, c4, X_AXIS);
}
void drawVertGradient()
{
color c3 = color(random(255),random(255),random(255));
color c4 = color(random(255),random(255),random(255));
setGradient(0, 0, width, height, c3, c4, Y_AXIS);
}
void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ){
// calculate differences between color components
float deltaR = red(c2)-red(c1);
float deltaG = green(c2)-green(c1);
float deltaB = blue(c2)-blue(c1);
// choose axis
if(axis == Y_AXIS){
/*nested for loops set pixels
in a basic table structure */
// column
for (int i=x; i<=(x+w); i++){
// row
for (int j = y; j<=(y+h); j++){
color c = color(
(red(c1)+(j-y)*(deltaR/h)),
(green(c1)+(j-y)*(deltaG/h)),
(blue(c1)+(j-y)*(deltaB/h))
);
set(i, j, c);
}
}
}
else if(axis == X_AXIS){
// column
for (int i=y; i<=(y+h); i++){
// row
for (int j = x; j<=(x+w); j++){
color c = color(
(red(c1)+(j-x)*(deltaR/h)),
(green(c1)+(j-x)*(deltaG/h)),
(blue(c1)+(j-x)*(deltaB/h))
);
set(j, i, c);
}
}
}
}

problem is I havent managed to have it work well in the .js version, the masks are ignored and it runs super slow
(see the image, processing version on the left, processing.js on the right)

Im planning on only having the final version at 100x100px for the web so it should be acceptably fast
you can click the logo to generate the next one
if anyone could help me get this working on the web It would be much appreciated
-
cheers
Tom

PhiLho

Re: mask() and blend() not working in processing.js

2 years ago

Some remarks on your sketch, that might improve the speed, and even make it work in JS, who know?
- Don't use width/height to init global variables, as they are not initialized yet (this is run before setup() is called). Beside, the graphics you create are erased by get() later...
- Don't use P3D for 2D graphics.
- The masks don't change, so you can create them in setup().
- Using a arrays & loops would have saved some copy/paste, so reduces the maintenance when changing something.
- The loadPixels before generating the patterns is not useful.
- You can draw directly on the PGraphics, saving an additional copy of the pixels. Although you have to pass the current PGraphics to each sub-routine.

I post here your code with some of the above suggestions:

// Global variables
// Create a blank image for each colour and mask
PImage shapeA_RGB;
PImage shapeB_RGB;
PImage shapeC_RGB;
PImage shapeD_RGB;
PImage shapeE_RGB;
PImage shapeF_RGB;
PImage shapeG_RGB;
PGraphics graphicalMaskA;
PGraphics graphicalMaskB;
PGraphics graphicalMaskC;
PGraphics graphicalMaskD;
PGraphics graphicalMaskE;
PGraphics graphicalMaskF;
PGraphics graphicalMaskG;
int styleeR;
// gradient constants
int Y_AXIS = 1;
int X_AXIS = 2;
// Setup the Processing Canvas
void setup(){
size(500, 500);
graphicalMaskA = createGraphics(width, height, P2D);
graphicalMaskB = createGraphics(width, height, P2D);
graphicalMaskC = createGraphics(width, height, P2D);
graphicalMaskD = createGraphics(width, height, P2D);
graphicalMaskE = createGraphics(width, height, P2D);
graphicalMaskF = createGraphics(width, height, P2D);
graphicalMaskG = createGraphics(width, height, P2D);
strokeWeight( 0 );
fill(255,255,255);
drawMasks();
}
// Main draw loop
void draw(){
noStroke();
//for each shape lets fill the screen with colours, capture the screen then save that away for masking it later
//shapeA
styleeR =int(random(4));
createGenerativePatterns(styleeR);
PImage shapeA_RGB = get();
//shapeB
styleeR =int(random(4));
createGenerativePatterns(styleeR);
PImage shapeB_RGB = get();
//shapeC
styleeR =int(random(4));
createGenerativePatterns(styleeR);
PImage shapeC_RGB = get();
//shapeD
styleeR =int(random(4));
createGenerativePatterns(styleeR);
PImage shapeD_RGB = get();
//shapeE
styleeR =int(random(4));
createGenerativePatterns(styleeR);
PImage shapeE_RGB = get();
//shapeF
styleeR =int(random(4));
createGenerativePatterns(styleeR);
PImage shapeF_RGB = get();
//shapeG
styleeR =int(random(4));
createGenerativePatterns(styleeR);
PImage shapeG_RGB = get();
// lets draw the shapes
background(0);
shapeA_RGB.mask(graphicalMaskA);
image(shapeA_RGB,0,0);
shapeB_RGB.mask(graphicalMaskB);
image(shapeB_RGB,0,0);
shapeC_RGB.mask(graphicalMaskC);
image(shapeC_RGB,0,0);
shapeD_RGB.mask(graphicalMaskD);
image(shapeD_RGB,0,0);
shapeE_RGB.mask(graphicalMaskE);
image(shapeE_RGB,0,0);
shapeF_RGB.mask(graphicalMaskF);
image(shapeF_RGB,0,0);
shapeG_RGB.mask(graphicalMaskG);
image(shapeG_RGB,0,0);
noLoop();
}
void createGenerativePatterns(int styleeR)
{
// Lets create an effect for us to mask
// first lets fill our BG with a random colour
noStroke();
strokeWeight( 0 );
background(0);
fill(random(255),random(255),random(255));
quad(0, 0, width, 0, width, height, 0, height) ;
//if style is 1 then lets draw a horizontal gradient
if(styleeR==1)
{
drawHorizGradient();
}
//if style is 2 then lets draw a vertical gradient
if(styleeR==2)
{
drawVertGradient();
}
//if style is 3 then lets draw polka dots
if(styleeR==3)
{
int polkaSize = int(random(width/2))+1;
int polkaSpacing = polkaSize+int(random(width/10))+1;
fill(random(255),random(255),random(255));
for(int i = 0; i <= width*1.2; i += polkaSpacing)
{
for(int j = 0; j <= height*1.2; j += polkaSpacing)
{
ellipse(i, j, polkaSize, polkaSize);
}
}
}
//if style is 4 then lets draw polka dots with a horizGradient
if(styleeR==4)
{
drawHorizGradient();
int polkaSize = int(random(width/2))+1;
int polkaSpacing = polkaSize+int(random(width/10))+1;
fill(random(255),random(255),random(255));
for(int i = 0; i <= width*1.2; i += polkaSpacing)
{
for(int j = 0; j <= height*1.2; j += polkaSpacing)
{
ellipse(i, j, polkaSize, polkaSize);
}
}
}
}
void mousePressed()
{
redraw();
}
void drawHorizGradient()
{
color c3 = color(random(255),random(255),random(255));
color c4 = color(random(255),random(255),random(255));
setGradient(0, 0, width, height, c3, c4, X_AXIS);
}
void drawVertGradient()
{
color c3 = color(random(255),random(255),random(255));
color c4 = color(random(255),random(255),random(255));
setGradient(0, 0, width, height, c3, c4, Y_AXIS);
}
void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ){
// calculate differences between color components
float deltaR = red(c2)-red(c1);
float deltaG = green(c2)-green(c1);
float deltaB = blue(c2)-blue(c1);
// choose axis
if(axis == Y_AXIS){
/*nested for loops set pixels
in a basic table structure */
// column
for (int i=x; i<=(x+w); i++){
// row
for (int j = y; j<=(y+h); j++){
color c = color(
(red(c1)+(j-y)*(deltaR/h)),
(green(c1)+(j-y)*(deltaG/h)),
(blue(c1)+(j-y)*(deltaB/h))
);
set(i, j, c);
}
}
}
else if(axis == X_AXIS){
// column
for (int i=y; i<=(y+h); i++){
// row
for (int j = x; j<=(x+w); j++){
color c = color(
(red(c1)+(j-x)*(deltaR/h)),
(green(c1)+(j-x)*(deltaG/h)),
(blue(c1)+(j-x)*(deltaB/h))
);
set(j, i, c);
}
}
}
}
void initMask(PGraphics mask) {
mask.beginDraw();
mask.background(0);
mask.noStroke();
mask.fill(255);
}
void drawMasks() {
// Draw the alpha for shapeA (the triangle at the top) as graphical mask
initMask(graphicalMaskA);
graphicalMaskA.triangle(0, 0, width*0.5, height*0.5, width, 0);
graphicalMaskA.endDraw();
// Draw shapeB triangle2 (left)
initMask(graphicalMaskB);
graphicalMaskB.triangle(0, 0, width*0.5, height*0.5, 0, height) ;
graphicalMaskB.endDraw();
// Draw shapeC triangle3 (middle)
initMask(graphicalMaskC);
graphicalMaskC.triangle(width*0.5, height*0.5, width*0.75, height*0.25, width*0.75, height*0.75) ;
graphicalMaskC.endDraw();
// Draw shapeD rhombus on the right
initMask(graphicalMaskD);
graphicalMaskD.quad(width*0.75, height*0.25, width*1.0, 0.0, width*1.0, height*0.50, width*0.75, height*0.75) ;
graphicalMaskD.endDraw();
// Draw shapeE triangle5 (bottom right)
initMask(graphicalMaskE);
graphicalMaskE.triangle(width, height*0.50, width*0.50, height, width, height) ;
graphicalMaskE.endDraw();
// Draw shapeF triangle6 (bottom left)
initMask(graphicalMaskF);
graphicalMaskF.triangle(width*0, height, width*0.25, height*0.75, width*0.50, height) ;
graphicalMaskF.endDraw();
// Draw shapeG square near the bottom
initMask(graphicalMaskG);
graphicalMaskG.quad(width*0.25, height*0.75, width*0.50, height*0.50, width*0.75, height*0.75, width*0.50, height) ;
graphicalMaskG.endDraw();
}

tompainter

Re: mask() and blend() not working in processing.js

2 years ago

Hi Phi.ilo
Thanks alot for help making my code cleaner, I agree I could optimize it abit more with some loops.
I think I am going to wait until I get this working in .js before I develop it further
-

<html>
<head>
<title>Processing.js - Basic Example</title>
<script language="javascript" src="processing.init.js"></script>
<script language="javascript" src="processing.js"></script>
</head>
<body bgcolor="#000000">
<script type="application/processing">
// Global variables
// Create a blank image for each colour and mask
    PImage shapeA_RGB;
    PImage shapeB_RGB;
    PImage shapeC_RGB;
    PImage shapeD_RGB;
    PImage shapeE_RGB;
    PImage shapeF_RGB;
    PImage shapeG_RGB;
    PGraphics graphicalMaskA;
    PGraphics graphicalMaskB;
    PGraphics graphicalMaskC;
    PGraphics graphicalMaskD;
    PGraphics graphicalMaskE;
    PGraphics graphicalMaskF;
    PGraphics graphicalMaskG;
    int styleeR;
// gradient constants
int Y_AXIS = 1;
int X_AXIS = 2;

// Setup the Processing Canvas
void setup(){
    size(100, 100);
    graphicalMaskA = createGraphics(width, height, P2D);
    graphicalMaskB = createGraphics(width, height, P2D);
    graphicalMaskC = createGraphics(width, height, P2D);
    graphicalMaskD = createGraphics(width, height, P2D);
    graphicalMaskE = createGraphics(width, height, P2D);
    graphicalMaskF = createGraphics(width, height, P2D);
    graphicalMaskG = createGraphics(width, height, P2D);
    strokeWeight( 0 );
    fill(255,255,255);
    drawMasks();
}

// Main draw loop
void draw(){
    noStroke();
//for each shape lets fill the screen with colours, capture the screen then save that away for masking it later
//shapeA
    styleeR =int(random(4));
    createGenerativePatterns(styleeR);
    PImage shapeA_RGB = get();
//shapeB
    styleeR =int(random(4));
    createGenerativePatterns(styleeR);
    PImage shapeB_RGB = get();
//shapeC
    styleeR =int(random(4));
    createGenerativePatterns(styleeR);
    PImage shapeC_RGB = get();
//shapeD
    styleeR =int(random(4));
    createGenerativePatterns(styleeR);
    PImage shapeD_RGB = get();
//shapeE
    styleeR =int(random(4));
    createGenerativePatterns(styleeR);
    PImage shapeE_RGB = get();
//shapeF
    styleeR =int(random(4));
    createGenerativePatterns(styleeR);
    PImage shapeF_RGB = get();
//shapeG
    styleeR =int(random(4));
    createGenerativePatterns(styleeR);
    PImage shapeG_RGB = get();

// lets draw the shapes
    background(0);
    shapeA_RGB.mask(graphicalMaskA);
    image(shapeA_RGB,0,0);
    shapeB_RGB.mask(graphicalMaskB);
    image(shapeB_RGB,0,0);
    shapeC_RGB.mask(graphicalMaskC);
    image(shapeC_RGB,0,0);
    shapeD_RGB.mask(graphicalMaskD);
    image(shapeD_RGB,0,0);
    shapeE_RGB.mask(graphicalMaskE);
    image(shapeE_RGB,0,0);
    shapeF_RGB.mask(graphicalMaskF);
    image(shapeF_RGB,0,0);
    shapeG_RGB.mask(graphicalMaskG);
    image(shapeG_RGB,0,0);
noLoop();
}

void createGenerativePatterns(int styleeR)
{
// Lets create an effect for us to mask
// first lets fill our BG with a random colour
    noStroke();
    strokeWeight( 0 );
    background(0);
    fill(random(255),random(255),random(255));
    quad(0, 0, width, 0, width, height, 0, height) ;
//if style is 1 then lets draw a horizontal gradient
    if(styleeR==1)
        {
        drawHorizGradient();
        }
//if style is 2 then lets draw a vertical gradient
    if(styleeR==2)
        {
        drawVertGradient();
        }
//if style is 3 then lets draw polka dots
    if(styleeR==3)
        {
        int polkaSize = int(random(width/2))+1;
        int polkaSpacing = polkaSize+int(random(width/10))+1;
        fill(random(255),random(255),random(255));
        for(int i = 0; i <= width*1.2; i += polkaSpacing)
            {
            for(int j = 0; j <= height*1.2; j += polkaSpacing)
                {
                ellipse(i, j, polkaSize, polkaSize);
                }
            }
        }
//if style is 4 then lets draw polka dots with a horizGradient
    if(styleeR==4)
        {
        drawHorizGradient();
        int polkaSize = int(random(width/2))+1;
        int polkaSpacing = polkaSize+int(random(width/10))+1;
        fill(random(255),random(255),random(255));
        for(int i = 0; i <= width*1.2; i += polkaSpacing)
            {
            for(int j = 0; j <= height*1.2; j += polkaSpacing)
                {
                ellipse(i, j, polkaSize, polkaSize);
                }
            }
        }
}

void mousePressed()
    {
    redraw();
    }

void drawHorizGradient()
    {
        color c3 = color(random(255),random(255),random(255));
        color c4 = color(random(255),random(255),random(255));
       setGradient(0, 0, width, height, c3, c4, X_AXIS);
    }

void drawVertGradient()
    {
        color c3 = color(random(255),random(255),random(255));
        color c4 = color(random(255),random(255),random(255));
       setGradient(0, 0, width, height, c3, c4, Y_AXIS);
    }

void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ){
// calculate differences between color components
float deltaR = red(c2)-red(c1);
float deltaG = green(c2)-green(c1);
float deltaB = blue(c2)-blue(c1);
// choose axis
if(axis == Y_AXIS){
    /*nested for loops set pixels
     in a basic table structure */
    // column
    for (int i=x; i<=(x+w); i++){
      // row
      for (int j = y; j<=(y+h); j++){
        color c = color(
        (red(c1)+(j-y)*(deltaR/h)),
        (green(c1)+(j-y)*(deltaG/h)),
        (blue(c1)+(j-y)*(deltaB/h))
          );
        set(i, j, c);
      }
    }
}
else if(axis == X_AXIS){
    // column
    for (int i=y; i<=(y+h); i++){
      // row
      for (int j = x; j<=(x+w); j++){
        color c = color(
        (red(c1)+(j-x)*(deltaR/h)),
        (green(c1)+(j-x)*(deltaG/h)),
        (blue(c1)+(j-x)*(deltaB/h))
          );
        set(j, i, c);
      }
    }
}
}

void initMask(PGraphics mask) {
    mask.beginDraw();
    mask.background(0);
    mask.noStroke();
    mask.fill(255);
}

void drawMasks() {
// Draw the alpha for shapeA (the triangle at the top) as graphical mask
    initMask(graphicalMaskA);
    graphicalMaskA.triangle(0, 0, width*0.5, height*0.5, width, 0);
    graphicalMaskA.endDraw();
// Draw shapeB triangle2 (left)
    initMask(graphicalMaskB);
    graphicalMaskB.triangle(0, 0, width*0.5, height*0.5, 0, height) ;
    graphicalMaskB.endDraw();
// Draw shapeC triangle3 (middle)
    initMask(graphicalMaskC);
    graphicalMaskC.triangle(width*0.5, height*0.5, width*0.75, height*0.25, width*0.75, height*0.75) ;
    graphicalMaskC.endDraw();
// Draw shapeD rhombus on the right
    initMask(graphicalMaskD);
    graphicalMaskD.quad(width*0.75, height*0.25, width*1.0, 0.0, width*1.0, height*0.50, width*0.75, height*0.75) ;
    graphicalMaskD.endDraw();
// Draw shapeE triangle5 (bottom right)
    initMask(graphicalMaskE);
    graphicalMaskE.triangle(width, height*0.50, width*0.50, height, width, height) ;
    graphicalMaskE.endDraw();
// Draw shapeF triangle6 (bottom left)
    initMask(graphicalMaskF);
    graphicalMaskF.triangle(width*0, height, width*0.25, height*0.75, width*0.50, height) ;
    graphicalMaskF.endDraw();
// Draw shapeG square near the bottom
    initMask(graphicalMaskG);
    graphicalMaskG.quad(width*0.25, height*0.75, width*0.50, height*0.50, width*0.75, height*0.75, width*0.50, height) ;
    graphicalMaskG.endDraw();
}

</script><canvas width="100px" height="100px"></canvas>

<pre>
</pre>

</body>
</html>

this is the code now, that doesnt work on my machine, the page just looks blank in the firefox, and works but without masks in Chrome, but works perfectly in the core processing app. (I scaled it down to 100x100px for performance)
-
If anyone has any clues to why this doesnt work on my machine Id love to hear them.
-
cheers
T

dhodgin

Re: mask() and blend() not working in processing.js

1 years ago

there are some bugs between Processing and Processing.js with PGraphic objects and transparent pixels.

Try experimenting with JAVA2D mode in createGraphics instead of P2D both in processing and processing.js modes.

I've worked with mask() and blend() in combination with PGraphic objects to generate images in Processing and it works. In Processing.js typically blend() is very slow but its known and we are trying to optimize it.

Top Reply