I'd like to use PGraphics in a JavaFX Application, which means my Main-Class cannot extend from PApplet. Is there any example or any chance at all to make usage of PGraphics without instantiating the PApplet-Class? I also tried to runn the PApplet from another class, but it was a mess which didnt seem to work at all.

Thank you

Might be an issue with my hardware since I'm using a surface pro 4 which has a high density display. If that's the case, is there a way to fix it? Thought it might be "devicePixelScaling()", but that's not available in p5js. Are people with regular density displays seeing the same behavior, or does it seem to work fine for you?

Thanks,

Albert

The problem is that I need to clear this object for every loop, reseting all values to 0 including alpha. I cannot seem to find a way to do this.

Background() will reset colors to 0, but not alpha.

loadPixels() updatePixels() get() set() work with image objects but not with graphic objects.

clear() works only with canvas.

I've tried copy/pasting a transparent image or graphics but this doesn't work either.

Any ideas?

Thanks!

Code I'm using is approximately: var path = "assets/video_placeholder.jpg" var imgHandler = loadImage(path); tint(255, 126); image(imgHandler, 200, 200, 450, 450);

Is this expected? Other than using DOM to load images and applying CSS to control opacity, is there any better way to give transparency to images?

thx!

New to the forum, I've been working on a project for a few days now and I'm having trouble trying to make GUI. I want to only have to render it once, as to maintain efficiency, and I'm using built in draw functions. I thought that the best way to do this would be to use a PGraphics object like so...

//Window int scWidth=800; int scHeight=480; int lat=4; int dpb=12; color [] colors = {#000000,#666666,#999999,#FFFFFF}; public class Location { int X; int Y; public Location(int tt, int tg) { X=tt; Y=tg; } public int getX( ) { return X; } public int getY( ) { return Y; } } Location cartesian = new Location( 3, 3 ); PGraphics drawGUI; public class GridGUI{ Location location; PGraphics GUI; public GridGUI(Location a, color [] colors){ location=a; GUI=createGraphics(30,30); //rendering of GUI goes here. Tiny example, I want to create the size of the gui in here. } public void showGUI(){ //wip, will just be simply be something like image(GUI, location.getX(), location.getY()); } public void getColor(){ //wip... its complicated... :) } } GridGUI defaultPalette= new GridGUI(cartesian, colors); void settings(){ size(scWidth,scHeight); } void setup(){ surface.setResizable(true); background(220); } void draw(){ stroke(0); fill(255); }

I've obviously taken a lot of the code out so let me know if you need the full thing (you shouldn't need it)

For whatever reason Processing doesn't seem to let you create a PGraphics object in the scope of a class. It gives a nullptr exception on the createGraphics line during definition of the class. Removing the line where it generates the initialization of the object does nothing.

Basically what I'd like to do is create a graphics object outside of setup so I can have a constructor in a class with its own PGraphics buffer.

My current workaround is to make a large PGraphics object and set its boundaries in setup() and to create a PImage in the class instead.

drawGUI=createGraphics(3840,2160); [not expecting anyone to make a GUI frame over 4k resolution]

anyways, each instance of the class would then have a PImage object instead that it copies from the 4k buffer after it's drawn to.

Is there any way to define a PGraphics object in a class or function other than setup()? I can't seem to do it without a nullptr exception. I'd report this as a bug if it's not intended because it's a much desired feature for several other parts of the program I'm working on but if it's intended to have the size and context of each PGraphics object defined in setup then I'd be open to other workarounds.

I am quite new to processing and I have been playing with it the last couple of weeks. I am working on a tiny project. The idea is to make a simple sequential animation. it is basically a few images, shapes, and text that appear in sequence. I have written the pde code (see below) and all works fine using the IDE. Now I want to port this on a website using processing.js (simply using processing.min.js and a canvas element).

It all works fine in the browser (chrome), but here is the problem the animation looks fine on a desktop, but on a tablet (a lenovo quad core) or Smasung Galaxy S3, the animation is all jerky (looks like the frame rate is dropping to unacceptable levels). So my question is: Is this a normal behavior, is my animation simply too complex, or may be I am doing something wrong in my code that is making the animation so heavy for non-desktop devices (although for example I don't think I have too long for loops )?

Also, does anyone has any best practice and tips when trying to set up simple sequential animation like below?

In btw, the images are each around 20-30KB. may be this is also slowing down things !!

I will appreciate any help, thank you.

Michel.

PS: I could not find a place (such as jsfiddle) to put the code along with the images somewhere for people to visualize the animation :(.

PImage main,cloud,phone,send,hand,alert;

PFont f;
String message1 = "Hello there, this";
String message2 = "is a message.";
String message3 = "See you.";
int c;

float typeSpeed = 12;
float speedDot = 3.0;

float x;
float y;

float xCloud,yCloud,xPhone,yPhone;

int fr = 24;

float angle,anglePhone,scaleCloud,scaleSend,angleSend,scaleAlert,angleAlert;

float xDot,xDot2,yDot; // Dot2 is used on the right side of the cloud

float cloudWidth = 150;

int ringingDuration,sendDuration,clickDuration,alertDuration,inBtwLoops;

int diam=50;

boolean finishedTextDisplay;

int myFrameCount;

void setup() {  
  size(1000,400);  
  frameRate(fr);  
  /* @pjs preload="data/main.png"; */
  /* @pjs preload="data/cloud.png"; */
  /* @pjs preload="data/phone.png"; */
  /* @pjs preload="data/send.png"; */
  /* @pjs preload="data/hand.png"; */
  /* @pjs preload="data/alert.png"; */

  main = loadImage("data/main.png");
  cloud = loadImage("data/cloud.png"); 
  phone = loadImage("data/phone.png");
  send = loadImage("data/send.png");
  hand = loadImage("data/hand.png");
  alert = loadImage("data/alert.png");  

  f = createFont("Arial",14,true); textFont(f);  
  resetValues();  
}

void draw() {
  myFrameCount++; // each trip thry draw is 1 frame count
  imageMode(CORNERS);image(main,0,0);  
  displayCloud(0); 
  displayPhone(0);
  if (alertDuration == 0 || alertDuration > fr) {displayAlert(0,false);} // displayAlert(scale,tinted) 

  if (finishedTextDisplay == false) {

        x = 195;
        y = 170;
        for (int i = 0; i < message1.length(); i++) { // show letters 1 sec interval 
          //println("for loop");
          if (fr*i/typeSpeed <= myFrameCount) {  
            c = 0; // show
          } 
          else {
            c = 255; // don't show
          }    
          fill(c);
          text(message1.charAt(i),x,y);    
          x += textWidth(message1.charAt(i));
          // println(textWidth(message3.charAt(i)));
        }

        x = 190;
        y = 170 + textAscent()+textDescent();        
        for (int i = 0; i < message2.length(); i++) { // show letters 1 sec interval 
          //println("for loop");
          if (fr*i/typeSpeed <= myFrameCount - ((fr/typeSpeed)*(message1.length()))) {
            c = 0; // show
          } 
          else {
            c = 255; // don't show
          }    
          fill(c);
          text(message2.charAt(i),x,y);    
          x += textWidth(message2.charAt(i)); 
        }

        x = 185;
        y = 170 + 2*(textAscent()+textDescent());

        for (int i = 0; i < message3.length(); i++) { // show letters 1 sec interval 
          // println("for loop");
          if (fr*i/typeSpeed <= myFrameCount - ((fr/typeSpeed)*(message1.length()+message2.length()))) {
            c = 0; // show
            if (i == message3.length()-1) { // last character shown --> click button
                      finishedTextDisplay = true;
            }
          } 
          else {
            c = 255; // don't show
          }    
          fill(c);
          text(message3.charAt(i),x,y);    
          x += textWidth(message3.charAt(i)); 
        } // end for loop 
    } // if finishedTextDisplay

    else // characters are all dislayed 
    {
      // display strings
      // println("NO for loop");
      fill(0);
      x = 195;y = 170; text(message1,x,y);    
      x = 190;y = 170+textAscent()+textDescent(); text(message2,x,y);
      x = 185;y = 170+2*(textAscent()+textDescent()); text(message3,x,y);

      // display hand
      if (clickDuration <= 0.5*fr) {
        // display bigger send button
        /*
        if (angle <= PI) { 
          scaleSend = map(sin(angleSend), 0, 1, 0, 0.15); 
          displaySend(scaleSend);
          angleSend += 5*PI/100;       
        }
        */
        if (clickDuration < 0.5*0.5*fr ) {scaleSend = clickDuration;}
        else {scaleSend = 0.5*fr - clickDuration;}
        // println(scaleSend);        
        scaleSend = map(scaleSend, 0, 0.5*0.5*fr, 0, 0.15); 
        displaySend(scaleSend);
        clickDuration++;

        tint(255,180);imageMode(CORNERS);image(hand,265,205);tint(255,255); 


      }
      else 
      {
                      displaySend(0);
                      // move on with simualtion
                      if (xDot < xCloud - cloudWidth/2) { // not reached cloud yet
                        displayDot();
                        // println("dot");
                      }
                      else 
                      { // dot reached the cloud --> no dot and grow cloud
                        // put the dot on the other side of the cloud
                        if (angle <= PI) { // once inflate and deflates once, cloud stops moving
                          // println(scaleCloud);
                          scaleCloud = map(sin(angle), 0, 1, 0, 0.15); 
                          displayCloud(scaleCloud);
                          angle += 5*PI/100;
                          // println("cloud");
                        }                  
                        else 
                        { // dot on the other side                    
                          if (xDot2 < xCloud + 165) { // not reached the arrow
                            displayDot2();
                            // println("dot 2");
                        }
                        else { // dot reached the phone --> no dot , phone shakes
                             if (ringingDuration < 4.5*fr) {
                               // println("ringing");
                               // displayPhone(random(-0.06,0.06)); // phone shakes
                               displayPhone(map(sin(anglePhone), -1, 1, -(PI/50), +(PI/50)));
                               anglePhone += (PI/2);

                               // rings
                               if ( (0 < ringingDuration && ringingDuration <= 0.5*fr) || (ringingDuration > 2.5*fr && ringingDuration <= 3*fr)) {                     
                                 displayRing(0);
                               }
                               if ( (0.5*fr < ringingDuration && ringingDuration <= fr) || (ringingDuration > 3*fr && ringingDuration <= 3.5*fr) ) {
                                 displayRing(0);
                                 displayRing(20);
                               }                         
                               if ( (fr < ringingDuration && ringingDuration <= 1.5*fr) || (ringingDuration > 3.5*fr && ringingDuration <= 4*fr)) {  
                                 displayRing(0);
                                 displayRing(20);
                                 displayRing(40);
                               }
                               if ( (ringingDuration > 1.5*fr && ringingDuration <= 2.0*fr) || (ringingDuration > 4*fr && ringingDuration <= 4.5*fr)) {  
                                 displayRing(0);
                                 displayRing(20);
                                 displayRing(40);
                                 // displayRing(60);
                               }
                               ringingDuration++;
                             }
                             else {
                                if (alertDuration <= fr) {
                                    // alert beeps 2 times  
                                    if (alertDuration >= 0 && alertDuration < fr/4 ) {scaleAlert = alertDuration;}
                                    if (alertDuration >= fr/4 && alertDuration < 2*fr/4) {scaleAlert = 2*fr/4 - alertDuration;}
                                    if (alertDuration >= 2*fr/4 && alertDuration < 3*fr/4) {scaleAlert = alertDuration - 2*fr/4;}
                                    if (alertDuration >= 3*fr/4 && alertDuration <= fr) {scaleAlert = fr - alertDuration;}
                                    // else {scaleAlert = 0.5*fr - alertDuration;}
                                    // println(scaleAlert);        
                                    scaleAlert = map(scaleAlert, 0, 0.5*0.5*fr, 0, 0.15); 
                                    displayAlert(scaleAlert,true);
                                    alertDuration=alertDuration+1;                                
                                }    
                                else 
                                {
                                  // alertDuration = 0;
                                  // wait for a second a so before starting the animation again
                                  if (inBtwLoops <= 2*fr) {
                                    inBtwLoops ++;
                                  }
                                  else {
                                    resetValues();
                                  }  
                                }
                             }
                          }  
                        }
                      }
      }

    }

}

void displayAlert(float scaleAlert, boolean tinted){
    pushMatrix();
    translate(222,386);
    imageMode(CENTER);
    scale(1+scaleAlert);
    if (tinted) {tint(217, 83, 79);} 
    image(alert,0,0); 
    tint(255,255);
    popMatrix();
}

void resetValues(){  
  angle=anglePhone=scaleCloud=scaleSend=angleSend=scaleAlert=angleAlert=0;  
  xCloud = width/2+85;
  yCloud = height/2-10;  
  xDot = xCloud - 170; 
  yDot = height/2;  
  xDot2 = xCloud + cloudWidth/2;  
  xPhone = xDot2 + 170 + 50;
  yPhone = height/2;  
  ringingDuration = sendDuration = clickDuration = alertDuration = inBtwLoops = 0;  
  finishedTextDisplay = false; 
  myFrameCount = 0;
}

void displayRing(int diamExtra){
  int alpha = round(map(diamExtra,0,40,255,50));
  strokeWeight(5.5);
  strokeCap(ROUND); 
  noFill();
  stroke(24, 188, 156, alpha);
  // arc(xPhone+10, yPhone - 69, diam+diamExtra, diam+diamExtra, -HALF_PI,0);
  arc(xPhone+10, yPhone - 69, diam+diamExtra, diam+diamExtra, -HALF_PI+(HALF_PI/7),0-(HALF_PI/7));
}

void displayCloud(float scaleCloud){
    pushMatrix();
    translate(xCloud,yCloud);
    imageMode(CENTER);
    scale(1+scaleCloud);
    image(cloud,0,0,150,150);
    popMatrix();
}

void displayPhone(float anglePhone){
    pushMatrix();
    translate(xPhone,yPhone);
    rotate(anglePhone);
    imageMode(CENTER);
    // scale(1+scaleCloud);
    image(phone,0,0,55,161);
    popMatrix();
}

void displayDot(){
    xDot+=speedDot;
    fill(21, 158, 130);
    stroke(21, 158, 130);
    ellipse(xDot,yDot,15,15);
}
void displayDot2(){
    xDot2+=speedDot;
    fill(21, 158, 130);
    stroke(21, 158, 130);
    ellipse(xDot2,yDot,15,15);
}

void displaySend(float scaleSend){
    pushMatrix();
    translate(275,215);
    imageMode(CENTER);
    scale(1+scaleSend);
    image(send,0,0,48,26);
    popMatrix();  
  /*
    pushMatrix();
    imageMode(CORNERS);
    tint(255,alpha);  // alpha=0: tranparent  
    image(send,250,205);
    tint(255,255); // 255: normal
    popMatrix();
  */  
} 

I am fairly new to Processing and in the early stages of learning Java.
Thank you for this excellent library - it was crucial to the first major piece of software that I have written (used for an installation a couple of weeks ago).
What I am trying to do is use an instance of PGraphics (called 'frame' in the code below) to draw to the off screen buffer and then save as a .png - for many reasons, but in this case to use transparency (drawing lines and shapes(triangles) on a transparent background).
As soon as I either specify 'frame' in the constructor: "gfx = new ToxiclibsSupport (this, frame);" or use setGraphics(): "gfx.setGraphics(frame);" I get a draft rendering of the drawing - just black lines on a white background, no images, no shapes - for both the off screen buffer and the display.
I have tried everything to the limits of my current knowledge and abilities including using the P2D renderer (specified in size() and in the createGraphics () for 'frame'). As soon as I remove 'frame' from the ToxiclibsSupport constructor or comment out setGraphics(), everything returns to normal, so clearly it is the addition of this PGraphics instance. I have included a very simplified example of my code.

Thank you for any help,

ToxiclibsSupport gfx;
PGraphics frame;


void setup () {

  frame = createGraphics (width, height); 
  gfx = new ToxiclibsSupport(this, frame);
  //gfx.setGraphics(frame);

}


void draw () {

  frame.save (imageFileName + nf (frameCount++, 3) + ".png");

}



used in a function:


void drawTriangles () {

  frame.beginDraw();

  for (int i = 0 ; i < triangleList.size () ; i++ ) {
    if (triangleList.get(i).on) {
      noStroke();
      colorSelect(i);
      gfx.polygon2D(triangleList.get(i).triangle);
    } else {
      noFill();
      stroke(white);
      gfx.polygon2D(triangleList.get(i).triangle);
    }
  }

  frame.endDraw();
  image(frame,0,0);  
}   

There is probably a really easy solution to this, but I have a sketch that I am drawing on using peril noise and a flow field of Pvectors. Each frame, lines are drawn onto the canvas. That all works fine. I am wanting to draw text on the screen also. I want to start the textSize at 0 and increment it every frame to give it the effect that it is coming at you. The text is being drawn to the screen every frame and the textSize is incrementing. However, there is a NEW text element drawn to the screen every frame. I would like the old text elements to be deleted after a new one has been drawn.

Is there another function other than clear() i could use to accomplish this?

Thanks, Dane

Can someone please have a look at this break down of the code and tell me where I am going wrong?

`PGraphics canvas; int rect[] = new int[1]; int rect2[] = new int[1];

void setup() { size(1000, 750); canvas = createGraphics(500, 500); imageMode(CORNERS); rect[0] = 100; rect2[0] = 100; }

void draw() { canvas.beginDraw(); canvas.background(100); canvas.line(10, 0, 1100, 1100); for(int i = 0; i < rect.length; i++) canvas.rect(rect[i], rect2[i], 10, 10); canvas.endDraw(); image(canvas, 50, 50, 500, 500); }

void mouseClicked() { rect = append(rect, mouseX); rect2 = append(rect2, mouseY); println(mouseX); } `

Thanks

The stupid() function works but createTexture() doesn't.

PGraphics pg;
PImage img;

float size = 200;

void setup() {
  background(255);
  size(800, 600, P3D);
  textureMode(NORMAL);

  pg = createGraphics(100, 100, P3D);
  createTexture();
}

void draw() {
  background(255);  
  translate(width/2, height/2, 0);
  beginShape();
  texture(pg.get());
  fill(0);
  vertex(-size, -size, 0, 0, 0);
  vertex(size, -size, 0, 1, 0);
  vertex(size, size, 0, 1, 1);
  vertex(-size, size, 0, 0, 1);
  endShape();
}

void stupid(){
  pg.beginDraw();
  pg.background(255);
  pg.ellipse(pg.width/2, pg.height/2, 50, 50);
  pg.endDraw();
}

void createTexture() {
 pg.beginDraw();
 pg.background(255);
 pg.stroke(0);
 pg.noFill();
 drawCircle(width/2, height/2, 50);
 pg.endDraw();
}

void drawCircle(float x, float y, float d) {
  pg.ellipse(x, y, d, d);
  if (d > 2) {
    drawCircle(x+d/2, y, d/2);
    drawCircle(x-d/2, y, d/2);
  }
}

Currently, I'm trying to mask images. But for some reason as soon I apply a filter, the image flips (or rotates 180º). And I just can't get them back to the current position.

This happens not only with mask() method, but also with other filters (with filter method itself or the blend() one)

I'm giving you an example code:

PGraphics mappingZone;
.. mappingZone = applet.createGraphics(kinect.width, kinect.height, PApplet.P2D);
.. filteredImg = applet.createImage(kinect.width, kinect.height, PApplet.P2D); ...

  mappingZone.beginDraw();
  mappingZone.background(0);            
  mappingZone.image(mappingTexture, 0, 0);
  mappingZone.mask(filteredImg);    
  mappingZone.endDraw();        

  applet.image(mappingZone, 0, 0, applet.width, applet.height);

I tried several things to flip the image to the correct position, like: mappingZone.scale(-1, -1);

But nothing works. However, applying a second filter usually return the image to the correct position. Any clue?

pixelDensity(displayDensity());

However, my code uses PGraphics objects defined as follows:

layers[0] = createGraphics( width, height);

(and so on for other layers).

I suspect the pixel density is not being inherited by the PGraphics objects in this instance. It's tough for me to debug this as I don't have access to an HD display so I am sending code back and forth to the client. My existing code runs fine on his old Mac (and every machine I have access to) but the layers are displaying at double size on the newer one.

Could someone provide some guidance to using Processing with displays where displayDensity() != 1?

BTW I tried explicitly using P2D in size() and createGraphics() as per a suggestion on another site but he gets an OpenGL error in that case (again, it works fine for me, but then so did my original code).

  PGraphics g;
  g = createGraphics(width, height, P3D);
  g.beginDraw();
  g.image(srcImg, 0, 0);
  g.endDraw();
  PImage output = g.get();

  PGraphics g2; 
  g2 = createGraphics(width, height, P3D);
  g2.beginDraw();
  g2.image(srcImg, 0, 0);
  g2.scale(-1,1);
  g2.endDraw();
  PImage output2 = g2.get();

I'm pretty inexperienced when it comes to python and it's probably the reason why I'm having trouble but, the Issue i'm having is placing a 3D renderer (proscene) into a 2D "Canvas". The idea is to have the 3D window running along side a 2D sketch. Here's the code from my main.py:

add_library('proscene')
from PlaneConstructor import ThreeDimensionalPlane
from PrismConstructor import RectangularPrism
from ReadFile import readFile

def setUpScene():
    scene.setGridVisualHint(False)
    scene.setAxesVisualHint(False)

    if scene.is3D():
        scene.setCameraType(Camera.Type.ORTHOGRAPHIC)

    scene.setRadius(150)
    scene.showAll()   

def setup():
    global scene, offset
    size(1200,1200,P3D)
    scene = Scene(this)

    listOfPlanes = readFile(fileName)    
    createSections(listOfPlanes)

    setUpScene()

    beamLength = calcBeamLength(listOfPlanes)
    offset = -1 * (float(beamLength) / 2)

def draw():
    background(140)
    drawSections(offset)

From what I've already read online, setup is where all the magic happens and I've tried implementing the solution from 3D window in 2D sketch, however when running the code with the changes, the 3D image stays as 2D and I can't draw anything outside the 3D window.

What are some other ways of implementing this?

I am writing a GUI from my artificial neural networks and Darwinist machine learning project, which involves using PGraphics as the "screens". This is to allow me flexibly in how I manipulate the scene. But there has been a memory leak.

I'm assuming this is a bug as I can't find any reason for this to happen, and it has been plaguing me for a while now. I simply cannot find a solution, I tried. The issue reports have nothing open, and the same issues that were posted are now closed, solved, and apparently fixed. I wanted to come here and see what the community knows about it, and their potential solutions, otherwise I will file this as a core issue, and it will have to be re-opened.

For some reason even the most basic PGraphics object will cause a memory leak, as the below code can demonstrate. I have tried g.removeCache(); however this simply caused huge amounts of "leakage" when that operation was performed strangely enough. It is turning the object null however as you can see in the code. Sadly that was the only solution I could find. Apparently this did not happen in 1.5.x

Tested on Linux, and Windows, with graphics card and without, and on a separate computer as well. The leak persist.

Thank-you

void setup()
{
  frameRate(60);
  size(640, 480, P3D);
  screen = createGraphics(width/2, height/2, P3D);
}

void draw()
{
  background(#0C1018);
  screen.beginDraw();
  screen.background(#00FFFF);
  screen.endDraw();
  image(screen, 0, 0);
  /*println(g.getCache(screen)); //prints processing.opengl.Texture@whatever
  g.removeCache(screen);
  println(g.getCache(screen)); //prints null
  println();*/
}

OS: Ubuntu 14.04 LTS OS type: 64-bit Processor: AMD A8-5500 APU with Radeon(tm) HD Graphics × 4 Graphics: Gallium 0.4 on AMD CAICOS

To reproduce the issue run the code from the bottom. Conversion will start an you will get pngs like this:

if you do a mouse click on the canvas, the size of the pngs that should be generated is changed and a few new items are added. The results look like in the screenshot below, some of the images are blank, some are distorted and they still have the old size.

Is there a way to avoid this behavior? is this a bug in processing? am i missing something?

Any input appreciated!

PGraphics png;
ArrayList<String> cue = new ArrayList<String>();
boolean conversion = false;
int pngSize = 64;

void setup() {
  size(400, 400);
  println("creating 64px letters");
  cue.add("A");
  cue.add("B");
  cue.add("C");
  conversion = true;
}

public void mousePressed(){
  println("creating 128px letters");
  pngSize = 128;
  cue.add("A");
  cue.add("B");
  cue.add("C");
  cue.add("D");
  cue.add("E");
  cue.add("F");
  conversion = true;
}

void saveNextInCue(){
  String letter = cue.remove(0);
  println("pngSize value is "+pngSize);
  png = createGraphics( pngSize, pngSize);
  png.beginDraw();
  png.textSize(30);
  png.text(letter,30,30);
  png.fill(random(255),0,255);
  png.rect(0,0,10,10);
  png.endDraw();
  png.save(sketchPath(letter+".png"));
}

void draw() {
  int bg = color(255,0,0);
  if (!conversion){
    bg = color(0,255,0);
  }
  background(bg);
  if( conversion == true){
    saveNextInCue();
    if(cue.size() == 0){
      conversion = false;
    }
  }
}

So that's rendering text using an image as "texture".

I don't know if there is some obvious way to do this I'm missing. I though it might be doable by changing the color of every pixel of the text with corresponding pixel of the source image.

Problem is, although I can access the image's pixel array I have no clue how to do it for the text.

Thanks to anyone that can help me =)

Here is my Code:

    PImage pic;
    PFont font;
    PGraphics pg;
    PGraphics manyC,finalSave;
    String[] words={"hello","world","hello","world","hello","world","hello","world","hello","world","hello","world"};
    PGraphics[] wordPic;


    void setup(){
      size(1800,1800);
      pic=loadImage("1.png");
      pic.filter(THRESHOLD,0.9);
      pic.resize(1800,0);
      pic.save("D://sample.png");


      font=createFont("微软雅黑",240);
      textFont(font);
      float strHt=textAscent()+textDescent();
      manyC      = createGraphics(pic.width,pic.height);
      finalSave  = createGraphics(pic.width,pic.height);
      //finalSave.smooth();

      wordPic=new PGraphics[words.length];
      int[] w =  new int[16];
      w[0] = 400;
      w[1] = 400;
      w[2] = 400;
      w[3] = 400;
      w[4] = 400;
      w[5] = 400;
      w[6] = 400;
      w[7] = 400;
      w[8] = 400;
      w[9] = 400;
      w[10] = 400;
      w[11] = 400;
      w[12] = 400;
      w[13] = 400;

      for(int i=0;i<wordPic.length;i++){

        int wid = (int)textWidth(words[i]);
        println(wid);
        wordPic[i] = createGraphics(w[i],400);
        wordPic[i].beginDraw();
        wordPic[i].background(255);
        wordPic[i].textFont(font);
        wordPic[i].textAlign(LEFT,TOP);
        wordPic[i].fill(color(0,0,0));
        wordPic[i].text(words[i],0,0);
        wordPic[i].endDraw();

        if(wordPic[i].width>=width){
          wordPic[i].resize(width,0);
        }
      }


      for(int i=0; i<wordPic.length;i++){
        wordPic[i].save("D://wordpic"+i+".jpg");
      }
      println("over");
    }

the output is like that:

so far so good. However, if I adjust the value of w[], which changes the width value when calling the function createGraphics(), the unexpected result comes out!

All I did was changing some values of w[], like 800,1200.

well, I'm confused.

I'm trying to adjust the graphics width, like this: wordPic[i] = createGraphics((int)textWidth(words[i]),(int)strHt); so I can handle them as small objects of the text Cloud.

And clearly, the results are not good enough.

So, is there anyone could help me about this problem? tell me why this will happen, or how can I leave this problem alone and go ahead for my work?

I have a sketch that uses instances of a class where the appearance of each iteration is generative(different). I am using an arraylist as the instances of the class have a lifespan and an unknown number of instances are used.

My question is: Can/how I generate the each instances and then instead of displaying it and having to recalculate the shape as it moves around with every frame, can I generate the shape and then display it as a pGraphic so that the sketch runs faster?

Having tried to implement this my issues are:

Which parts of the code need to be within the pg.beginDraw() and pg.endDraw(); - i.e is it only things that refer to the shape and colour (so not the parts for moving the object around).

How do I set the initial area for creating the PGraphic: PGraphics pg = createGraphics(100, 100); - This refers to a 100X100 square from 0, but my instances are being created at random locations.

Is there a logical solution I don't think about right now?

I wanted to avoid using angles, but maybe that's the way. Or polygons built from overlapping triangles.

This what I have now:

Polygon Polygon1;

void setup() {
  size(600, 600);
  Polygon1 = new Polygon();
    background(204, 100, 30);
  Polygon1.display();
}

class Polygon {
  int numbercorners= int(random(3, 8));
  float xpos = 300;
  float ypos = 300;

  Polygon() {
  }

  void display() {
    println(numbercorners);
    beginShape();
    float endcornerx=random(-40, +40);
    float endcornery=random(-40, +40);    
    vertex(xpos+endcornerx, ypos+endcornery);   
    for (int i = 0; i < numbercorners-1; i++) {    
      vertex(xpos+random(-40, +40), ypos+random(-40, +40));
    }
    vertex(xpos+endcornerx, ypos+endcornery);  
    endShape();
  }
}

Code:

void setup () {
  size (900, 506);
  background (0, 0, 12);
  drawStars ();
  drawPlanets ();
  drawLargeStar ();
}

void draw () {
}

void drawPlanets () {
  drawPlanet (300, 110, 50);
  pushMatrix ();
  scale (.1);
  drawPlanet (1000, 1000, 100);
  popMatrix ();
}

void drawPlanet (int x, int y, int grey) {
  translate (x, y);
  stroke (0);
  fill (150, 150, 255);
  ellipse (0, 0, 708, 698);
  fill (255);
  ellipse (0, 0, 697, 687);
  fill (grey);
  ellipse (0, 0, 680, 680);
}

void drawStars () {
  for (int num = 0; num < 400; num++) {
    fill (255);
    stroke (random (0, 255), random (0, 255), random (0, 255));
    ellipse (random (0, 900), random (0, 506), random (1, 8), random (1, 8));
  }
  filter(BLUR, 4);
}

void drawLargeStar () {
  fill (255);
  stroke (255);
  ellipse (450, 200, 150, 150);
}

function getMask(image, size, w, h) { var mask = createGraphics(1280, 720); var img = imgList[image]; mask.fill(100); mask.ellipse(w, h, size, size); img.mask(mask); return img; }

Running this gives me a

Uncaught TypeError: Cannot read property 'width' of undefined p5.Renderer2D._copyHelper @ p5.js:14342 p5.copy @ p5.js:20920 p5.Image.copy @ p5.js:20575 p5.Image.mask @ p5.js:20632 getMask @ sketch.js:55 // <---- this line is 'img.mask(mask)' draw @ sketch.js:63 p5.redraw @ p5.js:16075 (anonymous function) @ p5.js:11801 _runIfPreloadsAreDone @ p5.js:11718 _decrementPreload @ p5.js:11725 img.onload @ p5.js:19883

Do I need to convert mask to an PImage? How can I get this to work?

I am trying to create a news ticker running across the screen but with the function of

if (mousePressed == true) {
    line (mouseX, mouseY, pmouseX, pmouseY);
  }

I have the ticker working almost correctly OR the graffiti, but not both. I know that it is because the background is being re-drawn over the graffiti, but cannot for the life of me, work out how to adjust my code.

The full code (although I have removed some of the text array) is

String[] tickerText =
{
  "children were some of the greatest victims", "I was a child soldier", 
};


color black;
color white;
int SZ; // initiate variables

PFont font;  // Global font variable
float x;  // horizontal location of headline
int index = 0;


void setup() {
  // sound 
  minim = new Minim(this); //define construction
  sound = minim.loadFile("Children_Playing_Sound.mp3");
  sound.loop(); // is looped
  black = (0); 
  white = (255);
  SZ = 800; //asign variables for colours and screen size

  size(SZ, SZ); // set size of screen
  font = createFont("CourierNewPS-BoldMT-48", 16, true);  
  x = 0; // ticker text enters screen from the right

  background(black);
  // fill(white);
}

void draw() {
  background(black);
  fill(white);

  // Display headline 
  textFont(font, 16);        
  textAlign(LEFT);
  text(tickerText[index], x, 180); 

  x = x - 3; 
  float w = textWidth(tickerText[index]); // takes length of text in tickerText to determine when the text is off-screen
  if (x < -w) {
    x = width; 
    index = (index + 1) % tickerText.length;

    stroke (white);
    strokeWeight (20); // set thickness of 'paint'

    if (mousePressed == true) {
      line (mouseX, mouseY, pmouseX, pmouseY);
    }
  }
}

I have different code which creates the graffiti effect I want. Very basic mousePressed - draw. It's trying to combine the two that I've come unstuck.

Many thanks to anyone who can help me.

However, since re-writing, my font, size, boldness etc won't change!

In my non-PGraphics code, I used

font = createFont("CourierNewPS-BoldMT-48", 44, true);

However, in my new code, it doesn't seem to use the values that 'font' has.

My new code is (sorry for the length - I have no idea where the font code should be)

import ddf.minim.spi.*;
import ddf.minim.signals.*;
import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.ugens.*;
import ddf.minim.effects.*;
// import necessary libraries to play sound effect
String[] tickerText =
{
  "children were some of the greatest victims", "I was a child soldier", 
// ....
};

Minim minim;
AudioPlayer sound1; // variable name
AudioPlayer sound2;
PGraphics pg;
PFont font; //declare PFont object called font
PImage background; 
float x; // location of text on x axis
int index = 0;


void setup() {

  size(615, 762, P2D);

  font = createFont("CourierNewPS-BoldMT-48", 44, true);
  background = loadImage ("background_Text_Image.JPG"); // load background image
  minim = new Minim(this); //define construction
  sound1 = minim.loadFile("Children_Playing_Sound.mp3");
  sound1.loop(); // is looped

  pg = createGraphics(width, height, P2D);
  pg.beginDraw();
  pg.background(background); // draw background as imported image
  pg.endDraw(); 

  font = createFont("CourierNewPS-BoldMT-48", 44, true);

  x = 0; // the int x is used as the entry point for the text scrolling in
}

void draw() {
  if (mousePressed) { //function activated by mouse
    pg.beginDraw();
    pg.line(mouseX, mouseY, pmouseX, pmouseY);
    pg.stroke(random(255), random(255), random(255)); // stroke changed to random RBG values, each with a max of 255
    pg.strokeWeight (random(4, 8)); // random stroke weight, with a min of 4 and max of 8 pixels
    pg.endDraw();
  }
  background( pg.get() );
  textFont(font);  
  fill(255,0,0); //sets colour of font, red
  text(tickerText[index], x, height/2); //location of text on x axis - in this case mid-way


  x = x - 1; 
  float w = textWidth(tickerText[index]); // calculates the width of the text string - necessary for knowing when the text leaves the screen
  if (x < -w) { // when x moves completely off the screen new text appears
    x = width; 
    index = (index + 1) % tickerText.length;

   }
}

Thank you in advance

I am an artist and a quite new in processing :) I 'd like to achieve the following: I have two different images. I want to put them as layers and then find a way to reveal parts of the bottom image with some circles cut in the upper layer. The circles should be of different size and should be moving freely on the canvas.

It's like having a spotlight searching something into the dark. (This is why I have tried it with the brightness example, but I could not have the upper image since in this specific example is the black canvas.. so brightness doesn't work for me here.)

Any suggestions?

Thank you for your time :)

I am sure that this question has been ask before. I had really tried to dig in (forum, friends) but I am still stuck. I think it is a very simple thing and more a misunderstanding. By the way sorry about my poor english.

I'm doing an animation like a twill fabric machine. Two objects go and goes leaving a colored "string" behind. Right to left, top o bottom. The color can be set with 'b' and 'n'. We can freeze with a press mouse. All is perfectly fine, by I would like set the background by a key (here 'c' and 'v', black or white), but it does not work, the background seems to run over the previous drewn string. I tried by placing a rectangle at level -1, float, Matrix etc. nothing is working. I think it is a lack of logic P5 comprehension Thanks a lot, have a nice day

int x;
int y;
int deplaceX;
int deplaceY;
int changementX = 1;
float fond = 255;
int v=585; //X
int w=585; //Y
int deplaceV;
int deplaceW;
int f;


void setup(){
  size(600,600); 
  noStroke(); 
 background(f); 
}

void draw(){
  smooth();

 if ( key == 'f')  {
  f = 255; 
}


//FOND

/*background(fond);
  fond = changementX;

  if ( key == 'v') {

 changementX= 255;
}

  if ( key == 'c')  {
  changementX = 0;
}*/


//FORMES
  if ( key == 'n') fill(random(100,250),0,0);
  if ( key == 'b') fill(0,0, random(170,250));
  ellipse(x, y, 15, 15);
  rect(v, w, 15, 15);



///DESCEND CERCLE

  x=x+deplaceX+3;
  w=w+deplaceW-3;

if (x>width)
{deplaceX= -20; //retour
y=y+20; //à la ligne
}

if(x<20)
{
 deplaceX=1;
}

///VERSGAUCHE CARRE

if (w<1)
{deplaceW= 20;
v=v-20;
}

if(w>560)
{
deplaceW=-1;
}



}

//COMMANDES SOURIS
void mousePressed() {
  noLoop();  
}

void mouseReleased() {
  loop(); 
}

I want to blend img1 and img2.

With Processing, I do :

img1.blend(img2, sx, sy, sw, sh, dx, dy, dw, dh, mode);

But with p5.js, its seems I can only blend with the canevas :

blend(img2, sx, sy, sw, sh, dx, dy, dw, dh, mode);

If I specify the destination, with the syntax

img1.blend()

I get TypeError: this._renderer is undefined

However, It works fine with copy(). I can do

img1.copy(img2, ...)

Any ideas ?

Thank you.

I then tried to use createGraphics as a kind of 'buffer' as outlined on the next section of the book, section 6.5 (document page 168). I've pasted my attempt below, which doesn't quite work.

My question is how does one integrate already working code with an off-screen buffer (something like this)? Is there a general method, or do off-screen buffers use entirely different methods?

It can't be as simple as adding an extra line to the setup and draw functions, can it? What is the purpose of using elements like pg.background, if they seem to merely duplicate the information already in background?

Thanks,

frustrated guy new to processing

my attempt to replicate the example with a buffer:

PGraphics pg;

void setup() {
  noSmooth();
  size(300,300, P2D);
  pg = createGraphics(150,120, P2D);
}

  float px[] = new float [300];
  float py[] = new float [300];
  float pr[] = new float [360];

void draw() {
  for(int i=0; i<mouseY; i++){
    px[i] = random(width);
    py[i] = random(height);
    pr[i] = random(360);
  }
  background(255);
  for(int i=0; i<mouseY; i++){
    pushMatrix();
    rectMode(CENTER);
    translate(px[i],py[i]);
    rotate(radians(pr[i] + mouseX));
    rect(0,0,5,500);
    popMatrix();
  }
    
  pg.beginDraw();
  pg.endDraw();
  
  image(pg, 0, 0, width, height);
}