I am using processing to make some gauge meters. My usual method is to draw a lot of primitives, but now that I'm trying to move to use the Raspberry Pi, I've noticed that my previous techniques are too intensive for it and the FPS drop makes it unusable.

So I'm trying a new technique. To simply draw an overlay to stamp over a primitive that represents the meter, to reduce the math required. This presents a problem, however, as I can't appear to figure out how to 'draw' transparency into a PGraphics thing. I want transparency where black is, essentially. How do I achieve this? I want the ring of black in the square gauge to be transparent and to show whatever I have behind it, in this case, the white pie graph. I will then draw text on top of this, and it should be a pretty clean way to draw gauges.

Thank you for the help!

PGraphics gaugeoverlay;

void setup() {
  size(500, 500);
  gaugeoverlay = createGraphics(200, 200); gaugeoverlay.beginDraw();
  gaugeoverlay.background(0);
  gaugeoverlay.endDraw();

  drawgauge();
}

void draw() {
  fill(255);
  noStroke();
  arc(100, 100, 170, 170, 0, PI+QUARTER_PI, PIE);

  image(gaugeoverlay, 0, 0);
}

void drawgauge() {
  gaugeoverlay.beginDraw();
  gaugeoverlay.fill(100);
  gaugeoverlay.noStroke();
  gaugeoverlay.rect(10, 10, 180, 180, 10);
  gaugeoverlay.fill(0);
  gaugeoverlay.ellipse(100, 100, 170, 170);
  gaugeoverlay.fill(100);
  gaugeoverlay.ellipse(100, 100, 150, 150);
  gaugeoverlay.endDraw();
}

How can i do?

import controlP5.*;

ControlP5 cp5;
import peasy.*;

ArrayList<Sphere>s;

PGraphics canvas;

PGraphics brightPass;
PGraphics horizontalBlurPass;
PGraphics verticalBlurPass;

PShader bloomFilter;
PShader blurFilter;
PeasyCam cam;
float angle = 0;

final int surfaceWidth = 250;
final int surfaceHeight = 250;

float luminanceFilter = 0.02;
float blurSize = 100;
float sigma = 200;

void setup()
{
  cam = new PeasyCam(this, 1400);
  size(1000, 1000, P3D);

  s = new ArrayList<Sphere>();

  canvas = createGraphics(width, height, P3D);

  brightPass = createGraphics(width, height, P2D);
  brightPass.noSmooth();

  horizontalBlurPass = createGraphics(width, height, P2D);
  horizontalBlurPass.noSmooth(); 

  verticalBlurPass = createGraphics(width, height, P2D);
  verticalBlurPass.noSmooth(); 

  bloomFilter = loadShader("bloomFrag.glsl");
  blurFilter = loadShader("blurFrag.glsl");
}

void draw()
{
  background(0);
  bloomFilter.set("brightPassThreshold", luminanceFilter);
  angle += 0.05;

  for(Sphere s: s){
  blurFilter.set("blurSize", s.p);
  }

  blurFilter.set("sigma", sigma); 

  canvas.beginDraw();
  render(canvas);
  canvas.endDraw();

  // bright pass
  brightPass.beginDraw();
  brightPass.shader(bloomFilter);
  brightPass.image(canvas, 0, 0);
  brightPass.endDraw();

  // blur horizontal pass
  horizontalBlurPass.beginDraw();
  blurFilter.set("horizontalPass", 1);
  horizontalBlurPass.shader(blurFilter);
  horizontalBlurPass.image(brightPass, 0, 0);
  horizontalBlurPass.endDraw();

  // blur vertical pass
  verticalBlurPass.beginDraw();
  blurFilter.set("horizontalPass", 0);
  verticalBlurPass.shader(blurFilter);
  verticalBlurPass.image(horizontalBlurPass, 0, 0);
  verticalBlurPass.endDraw();


  cam.beginHUD();
  blendMode(BLEND);
  blendMode(SCREEN);
  image(brightPass, 0, 0);
  image(verticalBlurPass, 0, 0);

  cam.endHUD();

println(frameRate);
}

void render(PGraphics pg)
{
  cam.getState().apply(pg);

  pg.background(0, 50);

  canvas.pushMatrix();
  canvas.translate(width/2, height/2);
  for(Sphere s: s){
  s.display();

  }
  canvas.popMatrix();


}

void mousePressed() {
  s.add(new Sphere(random(-width/2, width/2), random(-height/2, height/2), random(1000)));
}


class Sphere {

  float p;
  float w;
  float h;

  Sphere(float _w, float _h, float _p) {
  p = _p;
  w = _w;
  h = _h;
  }

  void display() {
    canvas.pushMatrix();
    canvas.translate(w, h);
    noFill();
    canvas.sphere(100);

    canvas.popMatrix();
  }
}

var blendModes = ['BLEND', 'ADD', 'DARKEST', 'ADD', 'DIFFERENCE ', 'EXCLUSION', 'MULTIPLY', 'SCREEN', 'REPLACE', 'OVERLAY', 'HARD_LIGHT', 'SOFT_LIGHT', 'DODGE', 'BURN']; //https://p5js.org/reference/#/p5/blendMode

var randBlendmode = blendModes[Math.floor(Math.random() * blendModes.length)]; console.log(randBlendmode);

blendMode(randBlendmode);

Test: https://codepen.io/mskogly/pen/ZojbYe?editors=0111 (the blendmode line is commented out)

The reason I need the P2D is that Spout requires it in order to feed the program into TouchDesigner for projection mapping. The visual nature of the game is important to me, so I really would like to figure out how to get the openGL renderers treating blendModes like the default.

I explored using hint() - but couldn't get any working with GL code I found on java sites.

any suggestions would be crazy appreciated.

Image produced through blendMode with default renderer

Image Produced through P2D renderer (Had to swap out a background layer in draw with a frame sized rectangle to get it to work at all)

I have a 3D printer using a DLP projector. The projector illumination falls off around the edges of the build area. I am creating an image that will map the amount of falloff across the entire image and I want to apply this image as a correction filter to a series of images (the layer slices). This way, the resin 'sees' an even illumination across the the entire slice and my accuracy and curing is even.

One thing that I will need to account for is any black pixels in the target image need to stay black. I think creating a mask is needed to do this.

As for the parts of the image that do get affected, it would seem that I would need to somehow compare each pixel in the two images and then apply an inverse adjustment from the filter image to the target image.

Is there a function like Shaders or PImage::mask() that will do this?

Here is code:

PImage light, screen, bg, lightImage, mask;
PGraphics pg, lightMask;
int up, down, right, left;
float x, y, speed = 1;
color randomColor;
float camX=0, camY=0;
float  Ox1, Ox2, Oy1, Oy2;
int globalMX, globalMY;
void setup() {
  size(480, 270, P3D);
  frameRate(60);
  background(0);
  bg = loadImage("https://" + "ichef.bbci.co.uk/images/ic/480xn/p01lckx1.jpg");
  lightImage = loadImage("https://" + "i.stack.imgur.com/NaD6F.png");
  bg.resize(width, height);
  light = bg.copy();
  lightMask = createGraphics(width, height);
  randomColor = color(random(256), random(256), random(256));
  bullets = new ArrayList<Bullet>();
  reloadLights();
  x = width/2;
  y = height/2;
}
void draw() {  
  background(0);
  x += (right - left) * speed;
  y += (down - up) * speed;
  Ox1=camX-width+x;
  Ox2=camX+x;
  Oy1=camY-y;
  Oy2=camY+height-y;
  ortho(Ox1, Ox2, Oy1, Oy2);
  println(x + "  " + y);
  imageMode(CORNER);
  image(bg, 0, 0);
  pushMatrix();
  translate(x,y);
  screen = get(0, 0, width, height);
  popMatrix(); 
  fill(0, 125);
  noStroke();
  rectMode(CENTER);
  rect(x, y, width, height);
  screen.mask(lightMask);
  image(screen, 0,0);
  fill(255, 255, 0);
  textAlign(LEFT, TOP);
  textSize(39);
  text(int(frameRate) + " FPS", 5, 5);
  ellipse(globalMX,globalMY,20,20);
  //popMatrix();
}
void reloadLights() {
  pg = lightMask;
  pg.beginDraw();
  pg.background(0);
  pg.blendMode(ADD);
  for (int i = bullets.size()-1; i >= 0; i--) {
    Bullet bullet = bullets.get(i);
    drawLight(bullet.x, bullet.y, bullet.r);
  }
  //mask = pg;
  pg.endDraw();
}
void drawLight(int xL, int yL, int rL) {
 // pushMatrix();
 // translate(x,y);
  pg.imageMode(CENTER);
  pg.image(lightImage, xL,yL, rL, rL);
  //popMatrix();
}
 
void mousePressed() {
  bullets.add( new Bullet(globalMX, globalMY, 50));
  reloadLights();
}
ArrayList<Bullet> bullets;
class Bullet {
  int x, y, r;
  public Bullet(int x_, int y_, int r_) {
    x = x_;
    y = y_;
    r = r_;
  }
}
void keyPressed() {
  if (key == 'a' || key == 'A') {
    left = 1;
  }
  if (key == 'd' || key == 'D') {
    right = 1;
  }
  if (key == 'w' || key == 'W') {
    up = 1;
  }
  if (key == 's' || key == 'S') {
    down = 1;
  }
}
void keyReleased() {
  if (key == 'a' || key == 'A') {
    left = 0;
  }
  if (key == 'd' || key == 'D') {
    right = 0;
  }
  if (key == 'w' || key=='W') {
    up = 0;
  }
  if (key == 's' || key == 'S') {
    down = 0;
  }
}
void mouseMoved() {
  globalMX=mouseX;
  globalMY=mouseY;
}

1. background and shapes
2. radial gradient
3. text

Here is the3 codepen: https://codepen.io/giorgiomartini/pen/GvQVxy?editors=0010

I want the gradient to be blended with the multiply mode, because the effect im trying to get is like a vignette:

But somehow when i add the multiply mode.. all i get is a dark circle...

On line 43, the mouseClicked function is called.. which executes the drawing of the shapes, then the gradient and at the end of that function the text is added.

At line 64/65 its the commented multiply blend mode.. uncomment and click on the screen to see how its not working properly.

On line 163.. there is the radial gradient function

Can anyone please tell me why the blending is not working?

My question is: How can I set a random video to be played next?

I managed to get the videos playing, but I can't set another random video to follow. My intention is to have a sequence of videos (maybe 10 or more) that will play in a shuffled order. I have looked around this and some other forums but couldn't find a specific answer. Hope you guys can help me out. Thanks!

ps. if something doesn't make sense in my code please tell me :)

import processing.video.*;
import processing.sound.*;

AudioIn input;
Amplitude analyzer;
int scale=4;

Movie mov1, mov2;
Capture cam;

int n = 5; //total number of videos

float vidN = random(1, n+1);
int x = int (vidN);

float vidN2 = random(1, n+1);
int x2 = int (vidN2);

void setup() {
  //frameRate (30);
  size(1280, 720);
  colorMode (HSB);
  //fullScreen();
  //background(0);

  mov1 = new Movie(this, nf(x, 2)+".mp4");
  mov1.loop();
  mov1.volume(100);

  mov2 = new Movie(this, nf(x2, 2)+".mp4");
  mov2.loop();
  mov2.volume(00);

  cam = new Capture(this, width, height);
  cam.start();  

  blendMode(DIFFERENCE);

  imageMode(CENTER);

  //Create an Audio input and grab the 1st channel
  input = new AudioIn(this, 0);

  // start the Audio Input
  input.start();

  // create a new Amplitude analyzer
  analyzer = new Amplitude(this);

  // Patch the input to an volume analyzer
  analyzer.input(input);
}

void movieEvent(Movie m) {
  if (m == mov1) {
    mov1.read();
  } else if (m == mov2) {
    mov2.read();
  }
}

void draw() {    
  float vol = analyzer.analyze();

  noStroke ();

  tint (255, 80);
  if (cam.available()) {
    cam.read();
    image(cam, width/2, height/2, width, height); // Draw the webcam cam onto the screen

    vol = vol*scale;

    tint (255, 100-vol*100);
    image(mov1, width/2, height/2, width, height);

    tint (255, 100-vol*100);
    image(mov2, width/2, height/2, width, height);
  }
}  

Shouldn't the continuous adding of a semi-transparent background eventually hide them completely? I can still see them. http://p5js.sketchpad.cc/mk5JJ0a7kM

function setup() {
    colorMode(HSB);
    createCanvas(400, 200);
}

function draw() {
    background(220, 80, 90, 0.1);
    ellipse(mouseX, mouseY, 100, 100);
}

I came up with two approaches. #1 is ugly, and #2 is pretty much what I want.

1: Fixed size array that fades away (ugly-ish snake)

http://p5js.sketchpad.cc/dfR9NE1B1t

const numberOfCircles = 25;
const a = Array(numberOfCircles).fill().map((n, i) => i / numberOfCircles);
const circleArray = [];

function setup() {
    colorMode(HSB);
    createCanvas(400, 200);
}

function draw() {
    background(220, 80, 90);
    insertRemove(createVector(mouseX, mouseY));
    circleArray.forEach((c, i) => {
        fill(0, 0, 100, a[i]);
        stroke(0, 0, 0, a[i]);
        ellipse(c.x, c.y, 100, 100);
    });
}

function insertRemove(coords) {
    circleArray.push(coords);
    if (circleArray.length > numberOfCircles) {
        circleArray.shift();
    }
}

2: Dynamic size array, with circles fading, and deleting themselves (this is the result I was expecting from example #0):

http://p5js.sketchpad.cc/ltcDULJ91O

const ballArray = [];

function setup() {
    colorMode(HSB);
    createCanvas(400, 200);
}

function draw() {
    background(220, 80, 90);
    ballArray.forEach((ball, i) => {
        ball.update();
        ball.display();
        if(ball.notVisible()) {
            ballArray.splice(i, 1);
        }
    })
    fill(0, 0, 100)
    ellipse(mouseX, mouseY, 100, 100)
}

function mouseMoved() {
    ballArray.push(new BallTrail(mouseX, mouseY));
}

function BallTrail(x, y) {
    this.x = x;
    this.y = y;
    this.a = 1;
    this.update = () => this.a -= 0.01;
    this.display = () => {
        fill(0, 0, 100, this.a);
        stroke(0, 0, 0, this.a);
        ellipse(this.x, this.y, 100, 100);
    };
    this.notVisible = () => this.a < 0;
}

code is simple I update blendMode(ADD ) in setup and draw sphere() I am going to use shader later but with out shader there is this problem.

void setup() 
{
//....... other setup setup stuff
      blendMode(ADD);
}
int y=0;
void draw()
{
//  hint(ENABLE_DEPTH_TEST);
  noStroke();
  background(0);

  sh.set("mainPower",2.7);
  sh.set("eyePos",0.0, 0.0, 100.0);
  //shader(sh);

  translate(width/2,height/2+y,0);
  fill(250,100,0);
  sphere(90);
  //box(30);
  if(y>height/2)
  y=-height/2;
  else 
  y++;
}

i mean 'init' 'arbitrary code' loadImage 'arbitrary code' '/init'

'draw' 'arbitrary code'image(img,x,y)'/draw'

I tried all of:

            <init>

....

    father.tint(255,255,255);
    father.fill(255,255,255);
    father.alpha(father.color(255, 255));
    img=father.loadImage("name\\"+name+".jpg");

....

< /init>

            <draw>

....

    father.tint(255,255,255);
    father.fill(255,255,255);
    father.alpha(father.color(255, 255));
    father.image(img, posX+xd-img.width,  posY+yd);

< /draw>

but i can still se lines behind the image.

function setup() { createCanvas(windowWidth, windowHeight); background(0); blendMode(ADD); noFill(); stroke(255, 64, 8, 128); }

function draw() { translate(width * 0.5, height * 0.5);

if (s < 2000) { // Create a series of perlin rings from big to small for (var nTimes = 0; nTimes < 10; nTimes++) {

  // Less points for smaller rings
  nPoints = int(2 * PI * s);
  nPoints = min(nPoints, 500);

  // Create ring
  beginShape();
  for (var i = 0; i < nPoints; i++) {
    var a = i / nPoints * TAU;
    var p = p5.Vector.fromAngle(i / nPoints * TAU);
    var n = noise(xOffset + p.x * inc, yOffset + p.y * inc) * s;
    p.mult(n);
    vertex(p.x, p.y);
  }
  endShape(CLOSE);

  // Increment perlin offset for next ring
  xOffset += offsetInc;
  yOffset += offsetInc;

  // Reduce size for next ring
  s *= m;
}

} else { noLoop(); } }

In my program I want to use different blend modes when drawing text, but the text is not affected by the blendMode() function call.

Here's a simple program that demonstrates the issue, just move the mouse over the rectangle and see how the ellipse is correctly blended, as opposed to the letter 'K'.

void setup(){
    size(600, 600, P2D);

    rectMode(CENTER);
    textSize(100);
    textAlign(CENTER, CENTER);
}

void draw(){
    blendMode(NORMAL);
    background(50);

    noStroke();
    fill(255);
    rect(300, 300, 100, 100);

    blendMode(EXCLUSION);
    text("K", mouseX+50, mouseY);
    ellipse(mouseX-50, mouseY, 75, 75);
}

This is my code right now:

ArrayList xPositions = new ArrayList();
ArrayList yPositions = new ArrayList();

void setup() {
  size(640, 360);

  xPositions.add((int) width / 2);
  yPositions.add((int) height / 2);
}

void draw() {
  background(0, 0, 255);
  ball();
}

void mousePressed() {
  xPositions.add( mouseX );
  yPositions.add( mouseY );
}

void ball() {
  
  int ballSize = 8;
  connectingBallLine();

  // Balls parameters
  strokeWeight(1);
  stroke(0);
  fill(255);

  for ( int i = 0; i < xPositions.size(); i++) 
    ellipse( (int) xPositions.get(xPositions.size()-1), (int) yPositions.get(xPositions.size()-1), ballSize, ballSize);
}

void connectingBallLine() {
  for ( int i = 0; i < xPositions.size()-1; i++) { 
    arrow((int) xPositions.get(xPositions.size()-2), (int) yPositions.get(yPositions.size()-2), (int) xPositions.get(xPositions.size()-1), (int) yPositions.get(yPositions.size()-1), 8);
  }
}

// Function for creating arrow
void arrow(float x1, float y1, float x2, float y2, float s) {

  strokeWeight(1);
  stroke(0);
  line(x1, y1, x2, y2);

  pushMatrix();
  translate(x2, y2);
  float a = atan2(x1-x2, y2-y1); // 70, 360
  rotate(a);
  line(0, 0, -s, -s);
  line(0, 0, s, -s);
  popMatrix();
}

So instead of an arrow I would like to have animation just like in the video above. Can you guys give me some clues or tips how to do that?

I modified one of the examples on this page to test it:

https://p5js.org/reference/#/p5/blendMode

Here's my code. Am I doing something wrong or did I discover a bug?

background(0);
blendMode(REPLACE);
strokeWeight(30); // will work with a stroke weight of 1 as well - 30 is easier to see.
stroke(255);
line(25, 25, 75, 75);
stroke(0);
line(25, 25, 75, 75);

What should I do to be able to print the relevant item? eg: I want the console to print out just the word 'ADD' or 'SUBTRACT' and so on. I want to later use this as part of a String Variable to pass into the default blendMode() function. That way I will be able to allow for user input/choice of blendMode. That way it would read as blendMode(ADD) or blendMode(SUBTRACT).

I tried getName(), etc but was not able to access it. Right now it prints:

1 {text=SUBTRACT, color=bg (0,45,90), fg (0,116,217), active (0,170,255), captionlabel (255,255,255), valuelabel (255,255,255), name=SUBTRACT, state=false, value=1, view=controlP5.ScrollableList$1@66a35419}

import controlP5.*;
import java.util.*;


ControlP5 cp5;

void setup() {
  size(400, 400);
  cp5 = new ControlP5(this);
  List l = Arrays.asList("ADD", "SUBTRACT", "DARKEST ", "LIGHTEST ", "DIFFERENCE", "EXCLUSION", 
  "MULTIPLY", "SCREEN", "OVERLAY", "HARD_LIGHT", "SOFT_LIGHT", "DODGE", "BURN");
  /* add a ScrollableList, by default it behaves like a DropdownList */
  cp5.addScrollableList("dropdown")
    .setPosition(100, 100)
      .setSize(200, 100)
        .setBarHeight(20)
          .setItemHeight(20)
            .addItems(l)
              .setType(ScrollableList.DROPDOWN) // currently supported DROPDOWN and LIST
                ;
}

void draw() {
  background(240);
}

void dropdown(int n) {
  /* request the selected item based on index n */
  println(n, cp5.get(ScrollableList.class, "dropdown").getItem(n));

  //--------------------------------------------------------------------------------------------------------  
  //MY NOTE: what should I do to be able to print the relevant item? eg: I want the console to print out
  // just the word Add or Subtract. I want to later use this as part of a String Variable to pass into 
  // the default blendMode() function. That way I will be able to allow for user input/choice of blendMode. 
  // right now it prints:

  // 1 {text=SUBTRACT, color=bg (0,45,90), fg (0,116,217), active (0,170,255), captionlabel (255,255,255), 
  //valuelabel (255,255,255), name=SUBTRACT, state=false, value=1, view=controlP5.ScrollableList$1@66a35419}
  //--------------------------------------------------------------------------------------------------------  


  /* here an item is stored as a Map  with the following key-value pairs:
   * name, the given name of the item
   * text, the given text of the item by default the same as name
   * value, the given value of the item, can be changed by using .getItem(n).put("value", "abc"); a value here is of type Object therefore can be anything
   * color, the given color of the item, how to change, see below
   * view, a customizable view, is of type CDrawable 
   */

  //   CColor c = new CColor();
  //  c.setBackground(color(255,0,0));
  //  cp5.get(ScrollableList.class, "dropdown").getItem(n).put("color", c);
}


/*
a list of all methods available for the ScrollableList Controller
 use ControlP5.printPublicMethodsFor(ScrollableList.class);
 to print the following list into the console.

 You can find further details about class ScrollableList in the javadoc.

 Format:
 ClassName : returnType methodName(parameter type)


 controlP5.Controller : CColor getColor() 
 controlP5.Controller : ControlBehavior getBehavior() 
 controlP5.Controller : ControlWindow getControlWindow() 
 controlP5.Controller : ControlWindow getWindow() 
 controlP5.Controller : ControllerProperty getProperty(String) 
 controlP5.Controller : ControllerProperty getProperty(String, String) 
 controlP5.Controller : ControllerView getView() 
 controlP5.Controller : Label getCaptionLabel() 
 controlP5.Controller : Label getValueLabel() 
 controlP5.Controller : List getControllerPlugList() 
 controlP5.Controller : Pointer getPointer() 
 controlP5.Controller : ScrollableList addCallback(CallbackListener) 
 controlP5.Controller : ScrollableList addListener(ControlListener) 
 controlP5.Controller : ScrollableList addListenerFor(int, CallbackListener) 
 controlP5.Controller : ScrollableList align(int, int, int, int) 
 controlP5.Controller : ScrollableList bringToFront() 
 controlP5.Controller : ScrollableList bringToFront(ControllerInterface) 
 controlP5.Controller : ScrollableList hide() 
 controlP5.Controller : ScrollableList linebreak() 
 controlP5.Controller : ScrollableList listen(boolean) 
 controlP5.Controller : ScrollableList lock() 
 controlP5.Controller : ScrollableList onChange(CallbackListener) 
 controlP5.Controller : ScrollableList onClick(CallbackListener) 
 controlP5.Controller : ScrollableList onDoublePress(CallbackListener) 
 controlP5.Controller : ScrollableList onDrag(CallbackListener) 
 controlP5.Controller : ScrollableList onDraw(ControllerView) 
 controlP5.Controller : ScrollableList onEndDrag(CallbackListener) 
 controlP5.Controller : ScrollableList onEnter(CallbackListener) 
 controlP5.Controller : ScrollableList onLeave(CallbackListener) 
 controlP5.Controller : ScrollableList onMove(CallbackListener) 
 controlP5.Controller : ScrollableList onPress(CallbackListener) 
 controlP5.Controller : ScrollableList onRelease(CallbackListener) 
 controlP5.Controller : ScrollableList onReleaseOutside(CallbackListener) 
 controlP5.Controller : ScrollableList onStartDrag(CallbackListener) 
 controlP5.Controller : ScrollableList onWheel(CallbackListener) 
 controlP5.Controller : ScrollableList plugTo(Object) 
 controlP5.Controller : ScrollableList plugTo(Object, String) 
 controlP5.Controller : ScrollableList plugTo(Object[]) 
 controlP5.Controller : ScrollableList plugTo(Object[], String) 
 controlP5.Controller : ScrollableList registerProperty(String) 
 controlP5.Controller : ScrollableList registerProperty(String, String) 
 controlP5.Controller : ScrollableList registerTooltip(String) 
 controlP5.Controller : ScrollableList removeBehavior() 
 controlP5.Controller : ScrollableList removeCallback() 
 controlP5.Controller : ScrollableList removeCallback(CallbackListener) 
 controlP5.Controller : ScrollableList removeListener(ControlListener) 
 controlP5.Controller : ScrollableList removeListenerFor(int, CallbackListener) 
 controlP5.Controller : ScrollableList removeListenersFor(int) 
 controlP5.Controller : ScrollableList removeProperty(String) 
 controlP5.Controller : ScrollableList removeProperty(String, String) 
 controlP5.Controller : ScrollableList setArrayValue(float[]) 
 controlP5.Controller : ScrollableList setArrayValue(int, float) 
 controlP5.Controller : ScrollableList setBehavior(ControlBehavior) 
 controlP5.Controller : ScrollableList setBroadcast(boolean) 
 controlP5.Controller : ScrollableList setCaptionLabel(String) 
 controlP5.Controller : ScrollableList setColor(CColor) 
 controlP5.Controller : ScrollableList setColorActive(int) 
 controlP5.Controller : ScrollableList setColorBackground(int) 
 controlP5.Controller : ScrollableList setColorCaptionLabel(int) 
 controlP5.Controller : ScrollableList setColorForeground(int) 
 controlP5.Controller : ScrollableList setColorLabel(int) 
 controlP5.Controller : ScrollableList setColorValue(int) 
 controlP5.Controller : ScrollableList setColorValueLabel(int) 
 controlP5.Controller : ScrollableList setDecimalPrecision(int) 
 controlP5.Controller : ScrollableList setDefaultValue(float) 
 controlP5.Controller : ScrollableList setHeight(int) 
 controlP5.Controller : ScrollableList setId(int) 
 controlP5.Controller : ScrollableList setImage(PImage) 
 controlP5.Controller : ScrollableList setImage(PImage, int) 
 controlP5.Controller : ScrollableList setImages(PImage, PImage, PImage) 
 controlP5.Controller : ScrollableList setImages(PImage, PImage, PImage, PImage) 
 controlP5.Controller : ScrollableList setLabel(String) 
 controlP5.Controller : ScrollableList setLabelVisible(boolean) 
 controlP5.Controller : ScrollableList setLock(boolean) 
 controlP5.Controller : ScrollableList setMax(float) 
 controlP5.Controller : ScrollableList setMin(float) 
 controlP5.Controller : ScrollableList setMouseOver(boolean) 
 controlP5.Controller : ScrollableList setMoveable(boolean) 
 controlP5.Controller : ScrollableList setPosition(float, float) 
 controlP5.Controller : ScrollableList setPosition(float[]) 
 controlP5.Controller : ScrollableList setSize(PImage) 
 controlP5.Controller : ScrollableList setSize(int, int) 
 controlP5.Controller : ScrollableList setStringValue(String) 
 controlP5.Controller : ScrollableList setUpdate(boolean) 
 controlP5.Controller : ScrollableList setValue(float) 
 controlP5.Controller : ScrollableList setValueLabel(String) 
 controlP5.Controller : ScrollableList setValueSelf(float) 
 controlP5.Controller : ScrollableList setView(ControllerView) 
 controlP5.Controller : ScrollableList setVisible(boolean) 
 controlP5.Controller : ScrollableList setWidth(int) 
 controlP5.Controller : ScrollableList show() 
 controlP5.Controller : ScrollableList unlock() 
 controlP5.Controller : ScrollableList unplugFrom(Object) 
 controlP5.Controller : ScrollableList unplugFrom(Object[]) 
 controlP5.Controller : ScrollableList unregisterTooltip() 
 controlP5.Controller : ScrollableList update() 
 controlP5.Controller : ScrollableList updateSize() 
 controlP5.Controller : String getAddress() 
 controlP5.Controller : String getInfo() 
 controlP5.Controller : String getName() 
 controlP5.Controller : String getStringValue() 
 controlP5.Controller : String toString() 
 controlP5.Controller : Tab getTab() 
 controlP5.Controller : boolean isActive() 
 controlP5.Controller : boolean isBroadcast() 
 controlP5.Controller : boolean isInside() 
 controlP5.Controller : boolean isLabelVisible() 
 controlP5.Controller : boolean isListening() 
 controlP5.Controller : boolean isLock() 
 controlP5.Controller : boolean isMouseOver() 
 controlP5.Controller : boolean isMousePressed() 
 controlP5.Controller : boolean isMoveable() 
 controlP5.Controller : boolean isUpdate() 
 controlP5.Controller : boolean isVisible() 
 controlP5.Controller : float getArrayValue(int) 
 controlP5.Controller : float getDefaultValue() 
 controlP5.Controller : float getMax() 
 controlP5.Controller : float getMin() 
 controlP5.Controller : float getValue() 
 controlP5.Controller : float[] getAbsolutePosition() 
 controlP5.Controller : float[] getArrayValue() 
 controlP5.Controller : float[] getPosition() 
 controlP5.Controller : int getDecimalPrecision() 
 controlP5.Controller : int getHeight() 
 controlP5.Controller : int getId() 
 controlP5.Controller : int getWidth() 
 controlP5.Controller : int listenerSize() 
 controlP5.Controller : void remove() 
 controlP5.Controller : void setView(ControllerView, int) 
 controlP5.ScrollableList : List getItems() 
 controlP5.ScrollableList : Map getItem(String) 
 controlP5.ScrollableList : Map getItem(int) 
 controlP5.ScrollableList : ScrollableList addItem(String, Object) 
 controlP5.ScrollableList : ScrollableList addItems(List) 
 controlP5.ScrollableList : ScrollableList addItems(Map) 
 controlP5.ScrollableList : ScrollableList addItems(String[]) 
 controlP5.ScrollableList : ScrollableList clear() 
 controlP5.ScrollableList : ScrollableList close() 
 controlP5.ScrollableList : ScrollableList open() 
 controlP5.ScrollableList : ScrollableList removeItem(String) 
 controlP5.ScrollableList : ScrollableList removeItems(List) 
 controlP5.ScrollableList : ScrollableList setBackgroundColor(int) 
 controlP5.ScrollableList : ScrollableList setBarHeight(int) 
 controlP5.ScrollableList : ScrollableList setBarVisible(boolean) 
 controlP5.ScrollableList : ScrollableList setItemHeight(int) 
 controlP5.ScrollableList : ScrollableList setItems(List) 
 controlP5.ScrollableList : ScrollableList setItems(Map) 
 controlP5.ScrollableList : ScrollableList setItems(String[]) 
 controlP5.ScrollableList : ScrollableList setOpen(boolean) 
 controlP5.ScrollableList : ScrollableList setScrollSensitivity(float) 
 controlP5.ScrollableList : ScrollableList setType(int) 
 controlP5.ScrollableList : boolean isBarVisible() 
 controlP5.ScrollableList : boolean isOpen() 
 controlP5.ScrollableList : int getBackgroundColor() 
 controlP5.ScrollableList : int getBarHeight() 
 controlP5.ScrollableList : int getHeight() 
 controlP5.ScrollableList : void controlEvent(ControlEvent) 
 controlP5.ScrollableList : void keyEvent(KeyEvent) 
 controlP5.ScrollableList : void setDirection(int) 
 controlP5.ScrollableList : void updateItemIndexOffset() 
 java.lang.Object : String toString() 
 java.lang.Object : boolean equals(Object) 

 created: 2015/03/24 12:21:22

 */

I really hope this is the right place to post this, please let me know if I'm wrong :)

On the manual, second edition, on page 44 there are all the examples for different blending modes. I would like to know if there is the chance that the images of the SUBTRACT mode may be switched, since to me those two pictures would not give the result as shown if are subtracted in the order they are put.

Can you please let me know if I'm right? :)

Thanks and good coding :) Giorgio

I m a beginner to processing, and i would like to know if it would be possible to change img1 with a new movie"BD,mov". I want that move as the mask1.

Thanks for your help!!

PImage img1; PImage mask1; PImage img2; PImage mask2; import processing.video.*; Movie movie;

int threshold = 127;

color black = color(0); color white = color(255); int numPixels; Capture video;

void setup() { //size(1920,1280); size(1000, 800); strokeWeight(5);

//img1 = loadImage("bd2.jpg");

movie = new Movie(this, "bd.mov"); movie.loop(); img2 = loadImage("nagitive.jpg");

// imageMode(CENTER);

// example if it creates an error video = new Capture(this, width, height);

// Start capturing the images from the camera video.start();

numPixels = video.width * video.height; mask1 = createImage(width, height, RGB); mask2 = createImage(width, height, ALPHA); noCursor(); smooth(); }

//void mouseDragged() { //threshold = round(map(mouseX, 0, width, 0, 255)); //}

void movieEvent(Movie m) { m.read(); }

void draw() { background(0); if (video.available()) { video.read(); mask1.copy(video, 0, 0, video.width, video.height, 0, 0, mask1.width, mask1.height); numPixels = mask1.width * mask1.height; // video.loadPixels(); // int threshold = 127; // Set the threshold value float pixelBrightness; // Declare variable to store a pixel's color // Turn each pixel in the video frame black or white depending on its brightness mask1.loadPixels(); mask2.loadPixels(); for (int i = 0; i < numPixels; i++) { pixelBrightness = brightness(mask1.pixels[i]); if (pixelBrightness > threshold) { // If the pixel is brighter than the mask1.pixels[i] = white; // threshold value, make it white mask2.pixels[i] = black; } else { // Otherwise, mask1.pixels[i] = black; // make it black mask2.pixels[i] = white; } } mask1.updatePixels(); mask2.updatePixels(); }

//image(mask1, 0, 0, width/2, height/2); //image(mask2, width/2, 0, width/2, height/2);

mask1.resize(movie.width, movie.height); mask2.resize(img2.width, img2.height); movie.mask(mask1); img2.mask(mask2); blendMode(ADD); //image(img1, 0, height/2, width/2, height/2); //image(img2, width/2, height/2, width/2, height/2); image(movie, 0, 0, width, height); image(img2, 0, 0, width, height); }

I'm blending two different PGraphics with DIFFERENCE and the final result I'm searching for is only shapes, without any kind of border/stroke. However, I'm still getting some jagged lines between each shape...

Maybe it's something related to the math behind PGraphics and blending two set of pixels. Don't know and would be extremely happy if somebody could give me some light regarding this issue (:

Well, here's the code that I'm working on right now:

PGraphics c;
PGraphics d;
int p = 50;
PVector padding = new PVector(p,p*1.618);

void setup() {
  size(600, 600);
  background(244);
  c = createGraphics(width, height, JAVA2D);
  d = createGraphics(width, height, JAVA2D);
  c.beginDraw();
  c.smooth();
  c.endDraw();
  d.beginDraw();
  //d.background(255);
  d.smooth();
  d.endDraw();
  noLoop();

  println(c.stroke);

}

void draw() {  
  background(244);

  drawTriangle(padding.x, 0, width-padding.x, height/2, width-padding.x, height);
  drawTriangle(width-padding.x, 0, padding.x, height/2, padding.x, height);
  drawTriangle(padding.x, height, width-padding.x, height/2, width-padding.x, 0);
  drawTriangle(width-padding.x, height, padding.x, height/2, padding.x, 0);

  drawTriangle(0, padding.y, width/2, height-padding.y, width, height-padding.y);
  drawTriangle(width, padding.y, width/2, height-padding.y, 0, height-padding.y);
  drawTriangle(0, height-padding.y, width/2, padding.y, width, padding.y);
  drawTriangle(width, height-padding.y, width/2, padding.y, 0, padding.y);

}

void drawTriangle(float x1, float y1, float x2, float y2, float x3, float y3){
  c.beginDraw();
  c.background(0, 0);
  c.fill(244);
  c.noStroke();
  //c.stroke(244,0);
  c.triangle(x1,y1,x2,y2,x3,y3);
  c.endDraw();

  d.blend(c, 0, 0, width, height, 0, 0, width, height, DIFFERENCE);

  image(d,0,0);
}

Is there anyway of achieving a motion blur effect other than drawing a rect with low opacity? Using the blendMode unfortunately disables the motion blur effect.

the motion blur I am talking about:

void draw() {
  fill(255,50);
  rect(0,0,width,height);
}

Thank you!