Blend Mode - Poster Recreation

Processing Coding Questions
1

Hello all,

I have made a poster in adobe illustrator which I want to bring to life a little in processing.

11%20PM
Screen Shot 2019-10-02 at 1.51.11 PM.png1184×1482 60.7 KB

I want to be able to use the mouse to place circles onto the poster to sort of have a punching a hole through the black layer effect. My thinking was that I could have a white background, black text, and then a transparent black rectangle over the text… i would then have a circle at the mouse x & y location which will blend with the transparent rectangle to show the text.

  size(661,826);
  PFont a = createFont(("MonumentGrotesk-Regular"),50);
  String title = "it's yours";
  textFont(a);
  textSize(50);
  text(title,50,80);
}

void draw() {
  background(255);
  blendMode(DIFFERENCE);
  fill(0,90);
  rect(0,0,661,826);
  fill(0);
  ellipse(mouseX,mouseY,20,20);;
  //fill(255);
  //ellipse(mouseX,mouseY,20,20);
}

This is what I have so far to show my thought process however I wasnt really at all getting what i wanted to happen. Any help to send me in the right direction is appreciated.

Thank you

1 Like
2 
ArrayList<circle> cutouts;
void setup(){
  cutouts = new ArrayList<circle>();
  size(661,826);
}

void draw() {
  background(0);
  
  fill(255/2);
  ellipse(mouseX,mouseY,70,70);
  for (circle c: cutouts)
    c.show();
  
  String title = "it's yours";
  textSize(50);
  fill(0);
  text(title,50,80);
}

public class circle{
  float x, y;
  public circle(){
    x = mouseX;
    y = mouseY;
  }
  public void show(){
    fill(255);
    ellipse(x,y,70,70);
  }
}

void mouseReleased(){
  cutouts.add(new circle());
}

this creates the effect in the original reference poster, pretty well.

2 Likes
3

Thank you! with a few adjustments i was able to get it to exactly what i wanted.

I am new to processing and dont have a background in any other coding languages so i was wondering if you could explain some of the syntax in your code…

i know of arrays with [ ] but i have never seen < >, whats that mean?

i also know of making classes, however i have never seen public class, what does “public” mean in this context?

24%20PM
Screen Shot 2019-10-04 at 4.29.24 PM.jpg1206×1444 47.3 KB

41%20PM
Screen Shot 2019-10-04 at 4.29.41 PM.jpg1198×1514 108 KB

1 Like
4

An ArrayList<> is an array that has an automaticly changing size.
When you declare one it has a size of 0, increasing with each .add()

It also has a lot of additional features, like sorting, removing and more.

Internally arrayLists are actually just arrays with extra methods handing everything for you.

2 Likes
5
6

From the reference:

Keyword used to provide other classes access the fields and methods within a class. The public keyword is used before a field or method that you want to make available. In Processing, all fields and methods are public unless otherwise specified by the private keyword.

This keyword is an essential part of Java programming and is not usually used with Processing. Consult a Java language reference or tutorial for more information.

public / Reference / Processing.org

So – required in Java, does nothing (but doesn’t hurt anything) in Processing.

7

Public isn’t required in processing?
Thats new to me

8

It isn’t required in the Processing dialect, as written in .pde files and run from PDE or processing-java. This has been true since the first Processing in 2001.

If you browse through the reference, and examples, for instance on on objects and classes, you will notice that none of them use public.

If you include a .java file in a Processing sketch, it must use valid Java syntax – then public is required in that file. Also, if you use Processing as a library in a Java applications – e.g. in Eclipse – then again public is required.

2 Likes
9

PDE’s pre-processor automatically prefixes all methods & fields within “.pde” files w/ public if they don’t have an access level already.

The exceptions are classes & interfaces.

Also, the pre-processor fails to prefix methods within anonymous instantiations w/ public, unless they happen at the global section of the sketch.

2 Likes