Drawing inside a shape

Processing Project Guidance
1

I want to paint inside a shape.
let me explain :

I want to write a big word on the screen, for example: BEST
and I want to paint only in the parts of the letters

(imagine that I paint on all the size of screen, than I erase all the around, and it only left the word BEST)

I hope I managed to explain myself

1 Like
2

maybe mask() command?

see Reference / Processing.org

For complex work with the outline of letters

see How to 'deform' a text generated with theGeomerative library?

3

Thanks, I will search for that command, as I am not familiar with it

1 Like
4

Hello @yalaniv,

Here is a simple example of masking the sketch window:

PGraphics pg2;

PImage img1;

void setup()
  {
  size(200, 200);
  
  img1 = createImage(width, height, RGB);
   
  pg2 = createGraphics(width, height);  
  pg2.beginDraw();
  pg2.textSize(196);
  pg2.textAlign(CENTER, CENTER);
  pg2.fill(255);                
  pg2.text("A", width/2, height/2-30);
  pg2.endDraw();   
  }

void draw() 
  {
  //background(255, 0, 0); // Try it with and without this!
  
  noStroke();
  fill(0, 255, 0);
  circle(mouseX, mouseY, 10);
  
  // Mask the sketch window with PImage pg2
 
  img1 = copy();
 
  background(0);
  img1.mask(pg2);
  image(img1, 0, 0);
  }

image

References:

:)

2 Likes
5

Thanks, that’s a great start.

Now, let me take it even further :slight_smile:

I want the background to be white, and so the letter,

So It would be a surprise what is written …

1 Like
6

Go for it!

There are resources (building blocks) are here to get you started:

:)

1 Like
7

Will surely go for it :slight_smile:
Thank for you guidance

2 Likes
8

I like the window mask example in java. I tried to convert it to p5.js and did not get the same result. Do you have any suggestions on how I could fix this:


let pg2;
let img1;

function setup() {
  createCanvas(600, 600);
  img1 = createImage(width, height);
  pg2 = createGraphics(width, height);
  pg2.fill(255);
  pg2.circle(300,300,450);
}

function draw() {
 // background(255, 0, 0); // Try it with and without this!
  noStroke();
  fill(0, 255, 0);
  circle(mouseX, mouseY, 10);
  // Mask the sketch window with PImage pg2
  img1.copy(pg2, 0,0,width,height,0,0,width,height);
  background(0);
  img1.mask(pg2);
  image(img1, 0, 0);
}
9

Hello @svan,

Take a look:

let pg1;
let pg2;

function setup() 
  {
  createCanvas(600, 600);
  pg1 = createGraphics(width, height);
  pg2 = createGraphics(width, height);
  pg2.fill(255);
  pg2.circle(300, 300, 300);
  }

function draw() 
  {
  noStroke();
  fill(0, 255, 0);
  circle(mouseX, mouseY, 10);
   
  circle(random(width), random(height), random(10, 20));  
  
  // Mask the sketch window with PImage pg2
  pg1 = get();
  background(0);
  pg1.mask(pg2);
  image(pg1, 0, 0);
  }

image

Reference:
https://p5js.org/reference/#/p5.Image/get

:)

1 Like
10

Big help. Thank you.

1 Like
11

hola, soy David y me gusta la tecnologĂ­a aunque no se mucho la vdd pero me gusta todo eso de los algoritmos y cĂłdigos y asi