Shapes as a Mask

Programming Questions

Cody Silf..

in Programming Questions • 2 months ago

Hey Folks -

SUPER new to the processing scene, so I'm sorry if this is a bit of a 'noob' question.

I'm in the very early stages of a collaborative project with another individual and we're trying to dive into processing to see if it can help us create an interactive / data responsive piece down the line. At the moment we're just figuring out the language and the pieces - and we're already stuck.

Basically - we know how to mask using alpha colors; but is it possible to make a shape a mask based on it's color? So, perhaps a rectangle placed in a workspace would reveal an image?

Currently we've got a very SIMPLE set up that draws a rectangle grid and randomly assigns each rectangle as black or white / transparent.

I'd like to be able to take this grid and only show an image in the spaces created by black rectangles. Is something like this possible? Is blend() the better option to explore?

Just wondering if someone could point me in the right direction. ;)

Current code:

PImage img;
float y = 1;
float x = 1;
float r = random(1, 30);
void setup() {
size(640, 480);
img = loadImage("test.jpg");
imageMode(CENTER);
frameRate(30);
background(0);
image(img, width/2, height/2);
}
void draw() {
r = random(1, 55);
x = x + 16;
if (x > 640) {
y = y + 6;
x = 1;
x = x + 16;}
noStroke();
if (r > 30) {
fill(0);
} else {
fill(255, 255, 255, 40);
}
rect(x, y, 15, 5);
}

Any advice?

Replies(4)

Chrisir

Re: Shapes as a Mask

2 months ago

hello,

Shape / mask / triangle I don't know

But here comes a grid that can display 2 images

The idea is that 2 images are loaded.
In the grid g1 there is a 2D array of letters (all the cells) and when a letter is 1, the cell shows image 1, otherwise image 2.
The portion of the image is cut out with the command "get".
The grid is a class, object oriented programming.
See bold part.

You can change this with mouse in each cell: click a cell.

My code is very bad btw. Just a very rough draft.

Greetings, Chrisir

If you need an answer, please send me a personal message since this forum doesn't notify.

PImage img1;
PImage img2;
//float y = 1;
//float x = 1;
//float r = random(1, 30);
Grid g1;
void setup() {
size(640, 480);
img1 = loadImage("test.jpg");
img2 = loadImage("test2.jpg");
imageMode(CENTER);
// frameRate(30);
background(0);
// image(img1, width/2, height/2);
// image(img2, width/2, height/2);
img1.resize(width, height);
img2.resize(width, height);
g1 = new Grid ();
}
void draw() {
background(0);
g1.display();
// r = random(1, 55);
// x = x + 16;
// if (x > 640) {
// y = y + 6;
// x = 1;
// x = x + 16;
// }
//
// noStroke();
// if (r > 30) {
// fill(0);
// }
// else {
// fill(255, 255, 255, 40);
// }
// rect(x, y, 15, 5);
}
void mousePressed() {
// g1.letters[ mouseX ]
// check all cells
g1.check();
}
// =========================================================
class Grid {
int cSize;
int nRows, nCols;
char[][] letters;
Grid() {
// Constructor
cSize = 20;
nRows = width/cSize;
nCols = height/cSize;
letters = new char[nRows][nCols];
initLetters();
textAlign(CENTER, CENTER);
}
void initLetters()
{
for (int i = 0; i < nRows; i++)
{
for (int j = 0; j < nCols; j++)
{
if (random(100)>50)
letters[i][j]='1';
else
letters[i][j]='2';
}
}
}
void display() {
for (int i = 0; i < nRows; i++)
{
for (int j = 0; j < nCols; j++)
{
stroke(0);
fill(255);
if (letters[i][j]=='1')
image(img1.get(i*cSize, j*cSize, cSize, cSize), i*cSize, j*cSize);
else
image(img2.get(i*cSize, j*cSize, cSize, cSize), i*cSize, j*cSize);
//rect(i*cSize, j*cSize, cSize, cSize);
fill(0);
}
}
}
void check() {
for (int i = 0; i < nRows; i++) {
for (int j = 0; j < nCols; j++) {
rollover(i, j);
// pressed(i, j);
// grid[i][j].display();
}
}
}
// void overcell() {
// if (rollover()) {
// over = true;
// }
// else {
// over = false;
// }
// }
boolean rollover(int i, int j) {
if (mouseX >= i*cSize && mouseX <= i*cSize + cSize &&
mouseY >= j*cSize && mouseY <= j*cSize + cSize) {
if (letters[i][j]=='1')
letters[i][j]='2';
}
else {
//
}
return false;
} // method
//
} // class
///

PhiLho

Re: Shapes as a Mask

2 months ago

You can draw the rects on a PGraphics and use the resulting image as a mask.
But since these are simple rectangles, you can as well read the two PImages, and use get() to... get the rectangles from either image, then image() them side-by-side on the sketch area.

dimkir

Re: Shapes as a Mask

2 months ago

I made this example class called ImageGrid.

https://github.com/dimkir/processingForumSnippets/tree/master/imageCells

https://github.com/dimkir/processingForumSnippets/blob/master/imageCells/ImageGrid.pde

Basically you can load image to this class and then access it's "cells" on demand and draw whatever you want. You can get effect like this:

you can display cells at random

Or you can access the grid via mouse positions mouseX and mouseY:

To access image by cell all you have to do is to call imgGrid.getCell(row, col) method

                 
                  

                 
                 
                     
                  if 
                  ( 
                  modes
                  .
                  isCurrentMode
                  (
                  RANDOM_PIXEL
                  ) 
                  ){
                 
                 
                           
                  // get random row and column 
                 
                 
                           
                  int 
                  randRow 
                  = 
                  int
                  ( 
                  random
                  (
                  C_ROW_COUNT
                  ) 
                  );
                 
                 
                           
                  int 
                  randCol 
                  = 
                  int
                  ( 
                  random
                  (
                  C_COL_COUNT
                  ) 
                  );
                 
                 
                           
                  imgCell 
                  = 
                  imgGrid
                  .
                  getCell
                  (
                  randRow
                  , 
                  randCol
                  );         
                 
                 
                  

                 
                 
                     
                  }
                 
                 
                     
                  else 
                  if 
                  ( 
                  modes
                  .
                  isCurrentMode
                  (
                  PIXEL_UNDER_MOUSE
                  ) 
                  ){
                 
                 
                           
                  imgCell 
                  = 
                  imgGrid
                  .
                  getCellAtPoint
                  (
                  mouseX
                  , 
                  mouseY
                  );
                 
                 
                           
                 
                 
                     
                  }

And then you can display the cell (at it's " original" coordinates with processing image() method:

image ( imgCell . getImage (), imgCell . getX (), imgCell . getY ());

or if you want to display it at random position:

image ( imgCell . getImage (), random(width) , random(height) );

dimkir

Re: Shapes as a Mask

2 months ago

You can also try to create shape in Inkscape and then use the points of this shape as mask:

and then on screen you can get something like this:

You can ask the Grid for the cells which contain points of the cat (in setup()):

               
                // here we actually ask ImageGrid to return cells, into which 
               
               
                   
                // the points are falling
               
               
                   
                PVector
                [] 
                catPoints 
                = 
                getPointsFromShape
                (
                shpCatPath
                );
               
               
                   
                cellCollection 
                = 
                imgGrid
                .
                getCellsFromPoints
                (
                catPoints
                );

and later in "draw()" you can draw this collection:

cellCollection . drawRandomCell ();

See updated version of the sketch on github https://github.com/dimkir/processingForumSnippets/tree/master/imageCells

Top Reply

Shapes as a Mask

Replies(4)

Re: Shapes as a Mask

Re: Shapes as a Mask

Re: Shapes as a Mask

Re: Shapes as a Mask

Statistics

Tags

Actions

Related Posts