I have just begun and I'm already stuck :/

I try to create something like this : https://www.youtube.com/watch?v=YBKkVpRxUfs, using a kinect. At the moment I made some test with something like this :

class User {
  PGraphics pgBodyBg; 
  PImage bodyImg; 
  float colorIndexCounter; 
  int id; 
  ArrayList<DelayImg> bodyImageList = new ArrayList<DelayImg>();
  PGraphics pgTotal; 
  DelayImg[] buffer;

  User(int i) {
    colorIndexCounter=random(10); 
    pgTotal=createGraphics(512, 424);  
    pgTotal.beginDraw(); 
    pgTotal.background(0, 0); 
    pgTotal.endDraw(); 
    buffer=new DelayImg[50];
  }


  void delayEffect() {
    fillBuffer(); 
    changeColor(); 
    display();
  }

  void fillBuffer() {
    PImage bi= bodyImg.copy(); 
    DelayImg di=new DelayImg(bi); 
    for (int i = buffer.length-1; i > 0; i--) {
      buffer[i] = buffer[i-1];
    }
    buffer[0]=di;
  }



  void changeColor() {
    pgTotal.beginDraw(); 
    pgTotal.clear(); 
    pgTotal.pushStyle(); 
    for (int j=buffer.length-1; j>=0; j--) { 
      if (buffer[j]!=null) buffer[j].changeColor(pgTotal);
    }
    pgTotal.popStyle();
    pgTotal.endDraw();
  }

  void display() {
    image(pgTotal, 0, 0);
  }
}



class DelayImg {
  PImage img; 
  float alf=255; 
  PShape shape; 
  PGraphics pgBg; 
  int partSize=200; 
  DelayImg(PImage _img) {
    img=_img; 
    img.filter(THRESHOLD); 
    pgBg=createGraphics(512, 424);
  }

  void display(PGraphics pg) {
    pg.tint(255, alf); 
    pg.image(img, 0, 0); 
    if (alf>0)alf-=0.5;
    else alf=0;
  }

  void changeColor(PGraphics pg) {
    pgBg.beginDraw(); 
    pgBg.background(random(255), random(255), random(255));  
     pgBg.mask(img);
    pgBg.endDraw();
    pg.image(pgBg, 0, 0);
  }
}

bodyImg is update each frame, coming from kinect.

I want to be able to change the color everytime, that why pgTotal is clear every frame and display fresh new images, but the way I do it is very slow (10 fps). Do you have any suggestion, different kind of algorithm to improve frameRate? I try to use some vertex and textures aswell, but no real improvement...

Thanks for your help!

A.

The masked area becomes entirely opaque (the black rect). I would have used blending mode but I'm not using 100% white or black text.

I've looked here: https://forum.processing.org/two/discussion/23886/masking-a-shape-with-another-shape

but I see that also that has similar behavior.

here's the masked pgraphics:

mask = createGraphics(width, height);
pg = createGraphics(width, height);
for (int x=0; x< labels.length/2; x++){
pg.beginDraw();
pg.fill(0,0,255);
pg.text("#"+labels[x].labelText.toUpperCase(), labels[x].xLoc, labels[x].yLoc);
pg.endDraw();
}

here's the code for the masking:

  mask.beginDraw();
  mask.clear();
  mask.fill(255);
  mask.noStroke();
  mask.rect(random(0,width/2), random(0,height/2), random(width/2, width), random(height/2, height));
  mask.endDraw();
  pg.mask(mask);
  image(pg, 0, 0);

So now that I figured out why it wouldn't work, does anyone have any ideas on how to use this font AND Syphon? Or why this font won't render the emojis in P3D?

Can i create a mask from a shape (in this case an ellipse) and change background color but keep the mask untouched? This ellipse would have its size changed according to the screen and i would have a function windowResized()

Thanks! :)

Here is my code.

import processing.video.*;

Capture video;

color trackColor= color(145,43,54);
float threshold = 25;
PGraphics topLayer;


float distSq(float x1, float y1, float z1, float x2, float y2, float z2) {
  float d = (x2-x1)*(x2-x1) + (y2-y1)*(y2-y1) +(z2-z1)*(z2-z1);
  return d;
}

void setup() {
  frameRate(60);
  size(640, 360);
  String[] cameras = Capture.list();
  printArray(cameras);
  video = new Capture(this, cameras[3]);
  video.start();
  trackColor = color(145,43,54);
  topLayer = createGraphics(width, height, g.getClass().getName());
}

void captureEvent(Capture video) {
  video.read();
}

void draw() {

  video.loadPixels();
  image(video, 0, 0);

  //threshold = map(mouseX, 0, width, 0, 100);
  threshold = 50;

  int avgX = 0;
  int avgY = 0;
  float worldRecord = 0;

  // Begin loop to walk through every pixel
  for (int x = 0; x < video.width; x++ ) {
    for (int y = 0; y < video.height; y++ ) {
      int loc = x + y * video.width;
      // What is current color
      color currentColor = video.pixels[loc];
      float r1 = red(currentColor);
      float g1 = green(currentColor);
      float b1 = blue(currentColor);
      float r2 = red(trackColor);
      float g2 = green(trackColor);
      float b2 = blue(trackColor);
      //
      float d = distSq(r1, g1, b1, r2, g2, b2); 
      if (d < threshold*threshold) {
        worldRecord = d;
        avgX = x;
        avgY = y;
    }
  }
 }
   topLayer.beginDraw();
  topLayer.stroke(trackColor);
  if (worldRecord < threshold*threshold) {
    topLayer.fill(trackColor);
    topLayer.strokeWeight(1);
    topLayer.point(avgX, avgY); ////////////////////////////////////////
  }
  topLayer.endDraw();
    image(topLayer, 0, 0);
}

My code, trimmed down to this problem, is like:

        PGraphics layer;
        //only debug version works
        boolean debug=true;
        void setup() {
          size(800, 800);
          layer=createGraphics(width, height);
          layer.beginDraw();
          layer.background(0, 0);
          layer.endDraw();
        }
        void draw() {
          background(128);
          layer.beginDraw();
          layer.ellipse(mouseX, mouseY, 50, 50);
          layer.endDraw();
          image(layer, 0, 0);
        }
        void mousePressed() {
          if (debug) {
            layer=createGraphics(width, height);
            layer.beginDraw();
            layer.background(0, 0);
            layer.endDraw();
          } else {
            layer.beginDraw();
            layer.clear();
            layer.endDraw();
          }
        }

Thanks for your answer.

Have a look at the following code: var element

function drawarectangle(x, y, w, h){
  rect(x, y, w, h);
}

function setup() {
  createCanvas(500, 500);
  background(0);

  element = createGraphics(400,400);
  element.background(100);
  element.fill(255);
  element.drawarectangle(100,100,200,200);
}

function draw() {
  image(element, 50, 50);
}

ok. so basically i want to call a function inside a Graphics Object. For the sake of the easiness I wrote a completely useless function call "drawarectagle" and I want to call this function inside the graphics object "element". How can I do this, because I cant just say element.drawarectangle(100,100,200,200);?

PGraphics pg1;

void setup() {
  size(640, 480, P2D); // remove P2D's to allow pg1 to be displayed
  noSmooth(); // or remove this to allow pg1 to be displayed
  background(0);
  fill(0, 255, 0);
  rect(0, 0, 100, 200);

  pg1 = createGraphics(width, height, P2D);
  pg1.noSmooth();
  pg1.beginDraw();
  pg1.background(255);
  pg1.fill(0);
  pg1.rect(100, 100, 100, 50);
  pg1.endDraw();
}

void draw() {
}

void keyPressed() { 
  background(0);
  image(pg1, 0, 0, width, height);
}

To create a new graphics context, use the createGraphics() function. Do not use the syntax new PGraphics().

I have a place in my code where I need to create a PGraphics, but it is not in a place where I have access to an existing PGraphics on which to call createGraphics(). What can I do?

I was looking at doing some image animation and transitions with image masks. The effect I'm working towards is having an image mask rotate depending on where a user's mouse is positioned around the border of a circle. So as the user moves their mouse around the circle's border the image mask rotates revealing a previously covered part of the bottom image. To do this, the image mask would need to be able to rotate dynamically based on the user's interactions with the sketch. Being able to rotate the image mask would prevent having to create a mask for every possible angle of the circle.

From what I could find, there wasn't a way to rotate or transform an image mask before it is applied to an image in a P5.js sketch. Is this possible with the current p5.js library?

Referencing the image mask example from the documentation is there a solution to rotate the preloaded image before you apply it to the image?

var photo, maskImage;
function preload() {
    photo = loadImage('assets/rockies.jpg');
    maskImage = loadImage('assets/mask2.png');
}
    
function setup() {
    createCanvas(100, 100);
    photo.mask(maskImage);
    image(photo, 0, 0);
}

Would be something like the following sudo code...

var photo, maskImage;
function preload() {
    photo = loadImage('assets/rockies.jpg');
    maskImage = loadImage('assets/mask2.png');
}
    
function setup() {
    createCanvas(100, 100);
    // SUDO CODE:
    // =======
    // Rotate the maskImage 90degrees via rotate(PI/2.0);
    // Apply the newly rotated mask to the image
    // END OF SUDO Code
    // =======
    photo.mask(maskImage);
    image(photo, 0, 0);
}

Thanks!

I am trying to draw a rectangle in the window from a Thread.

void setup(){ size(100,100); T thread = new T(); thread.start(); } class T extends Thread{ void run(){ rect(10,10,10,10); } }

But this didn't work. I hobe someone can help me?

Thank you!

function setup() {
  createCanvas(600, 600);
  background(150);    
}

function createVertices() {
  let vertices = [];
  let angle = TWO_PI / 6;
  for (let a = 0; a < TWO_PI; a += angle) {
    var sx = 50 + cos(a) * 20;
    var sy = 50 + sin(a) * 20;
    vertices.push(vertex(sx, sy));
  }
  return vertices;
}

function draw() {
  var verticesArray = createVertices();
  polygon(50, 50, 20, verticesArray);
}

function polygon(x, y, radius, ver) {
  beginShape();
  let vertices = [];
  for (var i = 0; i < ver.length - 1; i++) {
    vertices.push(vertex(ver[i], ver[i + 1]));
  }
  endShape(CLOSE);
}

function polygon() doesn't draw a hexagon in this way, but only if i copy the code in createVertices() function. what is the problem?

I'm developping a personnal project around the "concept of" interactive map.

On this interactive map, I would like to gather as many as possible of information related to one specific thematic.

I mean, I will represent static information (markers, geographical forms ...) and dynamic information (pathes, animations ...). The dynamic information and animations are scheduled according to a global timer (day by day, hour by hour ...). I may have several tens of thousand information per map ...

I've started prototyping the project using leaflet and some of its addons. Leaflet uses the concept of layers to manage different level of information or interactions with the user.

One of these addons is canvasLayer.js that I use for the dynamic part of the project. I can add a canvas layer to the interactive map and draw on this canvas. Being integrated to the leaflet map, this canvas layer is automatically managed when resizing, moving, spanning and managing the user interaction. But, to me, I suffer from a lack of algorithms for drawing all kinds of dynamic objects and then I have to implement most of them by myself ...

On the other hand , p5.js offers a huge amount of animation of all kinds (steering behavior, ...) that I would like to integrate in my interactive map.

Now I'm at the point to ask my questions:

Is it feasible to integrate the p5.js library in a leaflet interactive map? if yes ... how to do that?

I could replace leaflet by mapbox, as long as I keep the concept of interactive map.

I'm open to any discussion about different approach in order to reach the same goal.

Could you help me please?

Thanks

I have a main canvas where i have text..

I want to add a drop shadow to this text... So i created a createGraphics image.. where i paint the same text

In this new createGraphics image i want to add a blur.. and then copy this blured image to my main canvas....

But when i try to apply the blur.. i get this error:

** Cannot read property 'getContext' of undefined**

In this sketch in line 75.. if you uncomment thte line where i add the blur.. it get the error.. : https://codepen.io/giorgiomartini/pen/LzQeGQ?editors=0010

Any idea what is the problem?

I don't claim to write clean code, but I try to make it readable. I started programming somewhere in the 80s, in BASIC, then in C, C++, whatever. I love global variables, I can do Object Oriented. I was looking for a way to program in Java directly on Android, with the result being an APK. So I came to Processing. Hm. I would have made APDE as some kind of dual-mode tool chain, where one mode is the basic "Go and write processing" and the other mode as "programm natively, use P as import, do your own main without overriding", but that's just me and outside the scope of what I'm trying to do here.

First I went ahead and grabbed me android's sensors just to see if I could. I made my own sensor class, grabbed temperature from the battery manager, made another class (batman), registered some callbacks, put them on screen, added a background. Worked.

I started grabbing touch input as mouse input, worked just fine. Wanted to text() on a PGraphics to help debug. Easy-peasy. Make a PGraphics, text in, display it by image(..), clear() it, text in, display, clear, rinse, repeat. Huh. What's that? the text overwrites and overwrites and overwrites (I was grabbing touch position, fingerdown, fingerup, worked like a charm.) but wasn't clearing. I wanted to re-use the PGraphics with clear() because creating a new one 30x per second is not the way to go, right? But no, clear() does nothing but put a new "backround" on top, full black, fully transparent. On top. Yeah, you read that right. Took me 4 hours of my life and diving into Processing on github. (censored). By the way, whenever someone on github or here found some problem with clear() and pgraphics, the comments are a hoot. Yeah, I can reproduce it. No, I will not loop over 300,000 pixels to reset them 30 times a second, thanks for recommending. Even the clear() example right in the procesing reference (modified to draw on touch, clear on finger-up) does not work on Android. Let me repeat that: IT DOES NOT WORK. Want a (censored) video?

Next, with a lightsensor running, I wanted to build some photographer's helper. Some overlaying rotating discs, aperture, shutter speed, a draggable ISO selector... Let's start with a disc. Made me some nice square metal plate, read some more. Either I take it and mask it with something round to get a disc, or I apply it as a texture onto a circle. Since my first hour trying to texture(...) resp. setTexture(...) somehow failed to bring results, and I saw that masking was the obviously preferred way to go in the forum, I went down that rabbithole.

Want some code? You get some code.

import android.os.Bundle;
import android.os.Build;
import android.app.Activity;
import android.content.Context;
import android.view.WindowManager;
import android.view.Display;

Activity activity;
Context context;
Display display;

int rotation;
String rotString;
String orientation;
float aspectRatio;

int canvasX;
int canvasY;
int fontSizeNormal = 5;
int colWidth;
int rowHeight;
int rows;
int cols;
int gridUnitX;
int gridUnitY;

float fScale;
int iScale;

int i;
int loopcount = 0;

PGraphics backgroundG;
PGraphics maskG;
PGraphics balouG;
PGraphics balouMaskedG;
PGraphics testG;
PGraphics jerkG;

PImage bgIMG;
PImage testIMG;
PImage balouIMG;
PImage balouorigIMG;
PImage cJerkIMG;

public void setup() {
  //fullScreen();

  //orientation(PORTRAIT);

  size(displayWidth, displayHeight, P2D);
  frameRate(30);
  
  background(0,0,0);
  
  canvasX = displayWidth;
  canvasY = displayHeight;
  activity = this.getActivity();
  context = activity.getApplicationContext();

  display = ((WindowManager) context.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
  
  fontSizeNormal = int(float(canvasX)/18);
  rows = 2; cols = 3;
  gridUnitX = int(float(canvasX) / 11);
  gridUnitY = int(float(canvasY) / 14);

  fScale = canvasX / 1000;
  iScale = int(fScale);
  
  backgroundG = createGraphics(canvasX, canvasY);
  bgIMG = loadImage("background.jpg");
  while (bgIMG.width == 0) { delay(100); }
  backgroundG.beginDraw();
  backgroundG.image(bgIMG,0,0,canvasX, canvasY);  // fit to canvas on-the-fly
  backgroundG.endDraw();

  image(backgroundG,0,0);  // let's get this out of the way


  balouG = createGraphics(300, 300);
  balouorigIMG = loadImage("balou.jpg");
  while (balouorigIMG.width == 0) { delay(100); }
  balouorigIMG.resize(300,300);  // resize it
  balouG.beginDraw();
  balouG.image(balouorigIMG,0,0);  // and put it in the upper left corner of PGraphics balouG
  balouG.endDraw();

  maskG = createGraphics(300,300);
  maskG.beginDraw();
  maskG.ellipse(150, 150, 300, 300);  // nice white circle
  maskG.endDraw();

  balouMaskedG = createGraphics(300, 300);
  balouIMG = loadImage("balou.jpg");
  while (balouIMG.width == 0) { delay(100); }
  balouIMG.resize(300,300);           // if I don't resize here, 
  balouIMG.mask(maskG);               // I get an error that the mask doesn't fit the image
  balouMaskedG.beginDraw();           // so something happens in resize(int, int)
  balouMaskedG.image(balouIMG,0,0);   // but what?!?
  balouMaskedG.endDraw();

  // and just for the heck of it:
  balouMaskedG.clear();       // outside a beginDraw/endDraw
  balouMaskedG.beginDraw();
  balouMaskedG.clear();       // inside a beginDraw/endDraw
  balouMaskedG.endDraw();
  // at least one of those should return balouMaskedG to a completely transparent state.
  // if you check the Processing -> Android port's source, you should immediately see why that fails.

  testG = createGraphics(300, 300);
  testIMG = loadImage("balou.jpg");
  while (testIMG.width == 0) { delay(100); }
  testG.beginDraw();
  testG.image(testIMG,0,0,300,300);  // fit to 300x300 canvas
  testG.endDraw();

  // Afterthought: 
  testIMG.resize(300,300);   // should work just fine, right?

  jerkG = createGraphics(300, 300);
  cJerkIMG = loadImage("balou.jpg");
  while (cJerkIMG.width == 0) { delay(100); }
  cJerkIMG.resize(300,300);  // resize it
  jerkG.beginDraw();
  jerkG.image(cJerkIMG,0,0);  // and put it in the upper left corner of PGraphics
  cJerkIMG.mask(maskG);
  jerkG.image(cJerkIMG,50,50);  // and NOT put it in the upper left corner of PGraphics
  jerkG.clear(); // does nothing
  jerkG.endDraw();
  jerkG.clear(); // still does nothing

  loop();
}


public void draw() {
  textSize(15);
  fill(200,200,200);

  background(0);          // black is beautiful

  image(backgroundG,0,0);  // nicely stretched background
  text("Background fit to canvas on-the-fly",0,20);

  image(maskG,25,25);   // white circle
  text("Mask",25,50);

  image(balouG,350,25); // nicely resized PGraphics
  text("resized and\nput into PGraphics",350,50);

  image(testG,675,25);  // nicely resized PGraphics
  text("on-the-fly-resize while\nput into PGraphics",50,375);

  image(balouMaskedG,1000,25); //gives a black circle?!?
  text("resized, masked and\nput into PGraphics\n(should be cleared)",1000,50);

  image(balouorigIMG,25, 350);
  text("resized image\nWITHOUT PGraphics\nbut put through a PGraphics\nbefore",25,375);

  image(testIMG,350,350);  // 
  text("just a resized image\nwithout PGraphics",350,375);
  
  image(cJerkIMG,675,350); // 
  text("Why is that black\noutside the cirle??",675,375);

  image(jerkG,1000,350); // 
  text("I go destroy something now.",1000,375);

} // last line of draw()

Sorry for those seemingly random missing linebreaks, we have some translation error here(LF/CRLF stuff, old but gold). Also, there are a lot of unused vars, as I yanked that out of the lightmeter sketch and expanded on it.

Anyways. Now, if I resize a loaded image, it'll be black unless I draw it into a PGraphics? Really? And the mask does nothing unless I put the masked image through a PGraphics, and then the background is black? Why? I feel like Del Shannon crying Why why why why why in"Runaway".

And don't even get me started on lines in the console, like "The pixel array has a length of 90000, but it should be at least 184041" So, who made that pixel array too small?

Flame me, boot me, whatever, but this needed out, I already had one heart attack, I don't need another one. You need one non-300x300px image to test that code yourself.

/**
 * Draw rectangles inside of circles
 * 2017-08-22
 **/
PGraphics sourceImage;
PGraphics maskImage;

  int colorset;
  color [] colorsetarray = { 
    color(#3AC459), 
    color(#3D8CFF), 
    color(#8CD6ED), 
    color(#F7CC68), 
    color(#F77068), 
    color(#576984), 
    color(#7A9BB0), 
    color(#D8E8ED), 
    color(#EAF4F7) };
  colorset = colorsetarray[(int)random(0, 8)];

void setup() {
  size(800, 800); //size of canvas
  noLoop();
  smooth();
}

void draw() {

  for (int y = 20; y < height-8; y += 120) {
    for (int x = 20; x < width-80; x += 120) {
      // create source
      sourceImage = createGraphics(100, 100); //size of drawing
      sourceImage.beginDraw();
      sourceImage.background(colorsetarray[(int)random(colorsetarray.length)]); //color the background
      sourceImage.fill(colorsetarray[(int)random(colorsetarray.length)]); //color the rectangle
      sourceImage.translate(width/2, height/2);
      sourceImage.rotate(radians(45));
      sourceImage.noStroke(); //take the stroke off of the rectangle
      sourceImage.rect(-600, -200, 80, 500); //locate the rectangle and draw it
      sourceImage.endDraw();

      // create mask
      maskImage = createGraphics(100, 100); //size of mask
      maskImage.beginDraw();
      maskImage.ellipse(50, 50, 100, 100);
      maskImage.endDraw();

      // apply mask
      sourceImage.mask(maskImage);

      // show masked source
      image(sourceImage, x, y); //move the chip here
    }
  }
}

in the docu, the example they give is doing something like:

var vignette;

function setup(){
  createCanvas(710, 400);
  vignette = createGraphics(400, 250);
}

function draw(){

  ellipse(mouseX, mouseY, 60, 60);

  pg.background(51);
  pg.noFill();
  pg.stroke(255);
  pg.ellipse(mouseX-150, mouseY-75, 60, 60);

  //Draw the offscreen buffer to the screen with image()
  image(pg, 150, 75);
}

But what i want to do is more complex than pg.background(51)

I want to run this function which creates a radial gradient:

function drawGradient() {
  for (let r = canvasX; r > 0; --r) {
    let lightnes = map(r,0,canvasX,360,0)
    fill(360, 360, lightnes)
    ellipse(0, 0, r, r)
  }
}

But if i do vignette.drawGradient() i get the error: vignette.drawGradient is not a function...

So how can i then execute things like whats inside the drawgradient function inside the createGraphics function?

Here is the codepen: https://codepen.io/giorgiomartini/pen/ZJjWbw?editors=0010

I am slooooowly transitioning from Processing to p5.js and I am trying to re-write some of the sketches I did in Processing on p5.js

When I try to use createGraphics() method in p5.js and display a preloaded image (with image() method) in that offscreen graphic, somehow I don't get anything other than a blank screen.

When I use background() instead of image() method and display that image in the offscreen graphic I see everything, but then, of course, I cannot scale that image.

What am I doing wrong?

                    `var img, pg;
                    var canvasOfset = 10;




                    function preload() {
                      img = loadImage('http://cdni.pageflow.codevise.de/main/video_files/posters/000/000/370/v3/medium/poster-0.JPG');
                    }

                    function setup() {
                      createCanvas(windowWidth - canvasOfset, windowHeight - canvasOfset);
                      pg = createGraphics(width, height);
                    }

                    function draw() {
                      pg.background(img);
                      var c = color(255, 0, 0);
                      image(pg, 0, 0, width, height);
                    }
                    `

this works

                    `var img, pg;
                    var canvasOfset = 10;
                    var fillColor;
                    var drawn = false;



                    function preload() {
                      img = loadImage('http://cdni.pageflow.codevise.de/main/video_files/posters/000/000/370/v3/medium/poster-0.JPG');
                    }

                    function setup() {
                      createCanvas(windowWidth - canvasOfset, windowHeight - canvasOfset);
                      pg = createGraphics(width, height);
                    }

                    function draw() {
                      pg.image(img,0,0,width,height);
                      var c = color(255, 0, 0);
                      image(pg, 0, 0, width, height);
                    }
`

this does not...

Any help regarding this issue would be awesome!!

Thanks a lot.

Omer

function setup(){   
            canvas=createCanvas(1000,1000);
            canvsGraphics = createGraphics(1000,1000);
        }

The minimum amount of code I could recreate the problem with was this:

var graphics;

function setup() {
    graphics = createGraphics(1000,1000);
}

function draw() {
    graphics.get();
}

This produces the expected result, but uses a ton of memory. Here's the relevant info I could get out of Chrome dev tools: The memory is currently at 1.2 gigs, but I've seen it reach 3 gigs, given enought time. Either way, that's way too much memory.

The saw tooth pattern continues indefinitely, with the teeth progressively growing slightly larger, but always dropping back down to the same height. I also checked out the javascript heap snapshot, but it rarely exceeded 10mb, even during peaks.

Based on this, my current theory is that the Graphics.get() method creates excess detached DOM nodes, which build up until garbage collected. However, I don't know why the spikes get progressively larger, nor do I have any idea as to how to fix it. If this is a known bug, or common mistake, any further information, solutions, or workarounds would be greatly appreciated. Thank you again so much for your help!

I've been told to create a class for the drawn objects which would contain a PGraphics property, and also a draw method. While dragging the mouse, I can clear the latest Shape's PGraphic and draw it again.

I just have no idea how!

PS: I will implement other shapes the user can draw but they too need to be objects so I can manipulate them

Here is my code:

ArrayList<PGraphics> layer = new ArrayList();
float startX, startY;

void setup() {
  size(500, 500);
  cursor(CROSS);
  background(255);
  smooth();
}

void draw() {
  background(255);
  for(PGraphics pg : layer) {
    image(pg, 0, 0);
  }
}
void mousePressed() {
  startX = mouseX;
  startY = mouseY;
  PGraphics pg = createGraphics(width, height);
  layer.add(pg);
}

void mouseDragged() {
  // get most recent layer
  PGraphics pg = layer.get(layer.size() - 1);
  shapeLayer.beginDraw();
  shapeLayer.clear();
  shapeLayer.rectMode(CORNERS);
  shapeLayer.rect(startX, startY, mouseX, mouseY);
  shapeLayer.endDraw();
}

When the user draws a rectangle, it shows the shape being drawn. When the user releases their mouse, it then creates a PGraphic of the final shape. I would then like the user to draw on top of that. Here is my problem:

I had to reset the background of the canvas when drawing a rectangle because otherwise, it shows a trail of rectangles. The result is that while the user draws a new rectangle the old ones disappear and come back once the mouse has been releasd

Some thoughts: I would also like to add features where the user can select on a previously drawn rectangle and change it's colour, stroke, send to back, bring to front etc..

To achieve this, I'm storing all drawn rectangles (PGraphics) into an ArrayList which will be drawn via a for loop. This will allow me to adjust the behaviour by moving the PGraphics elements up and down the ArrayList.

QUESTIONS: Is this correct or should I be creating an ArrayList of rectangles? Instead of creating my own class of Shape am I better off using PShape?

int startX;
int startY;
int endX;
int endY;
boolean drawing;
int strokeW = 3;
Shape shape;

PGraphics shapeLayer; 
ArrayList<PGraphics> layersList = new ArrayList();

void setup() {
  size(500, 500);
  cursor(CROSS);
  background(255);
  smooth();
}

void draw() {
  strokeWeight(strokeW);
  if (key >= '0' && key <= '9') {
    strokeW = key - '0';
  }
  for(int i = 0; i < layersList.size(); i++) {
    image(layersList.get(i), 0, 0);
  }
  if (drawing) {
    shape.createRectangle();
  }
}


void mousePressed() {
  startX = mouseX;
  startY = mouseY;

  shapeLayer = createGraphics(width, height);
  shapeLayer.beginDraw();
}  

void mouseDragged() {
  drawing = true;
  endX = constrain(mouseX, 0, 500);
  endY = constrain(mouseY, 0, 500); 

  shape = new Shape(startX, startY, endX, endY);
  shapeLayer.clear();
}

void mouseReleased() {
  drawing = false;
  shapeLayer.endDraw();
  layersList.add(shapeLayer);
}  

Here is the Shape Class:

class Shape {
  int startX;
  int startY;
  int endX;
  int endY;

  Shape(int x1, int y1, int x2, int y2) {
    startX = x1;
    startY = y1;
    endX = x2;
    endY = y2;
  }    

  void createRectangle() {
    background(255, 0);
    shapeLayer.strokeWeight(strokeW);
    shapeLayer.rectMode(CORNERS);
    shapeLayer.rect(startX, startY, endX, endY);  
    rectMode(CORNERS);
    rect(startX, startY, endX, endY);

  }

}  

this is the code I'm using:

PGraphics big;  
void setup() {  
  big = createGraphics(5000, 5000, JAVA2D); // Create a new PGraphics object 5000x5000px  
  big.beginDraw(); // Start drawing to the PGraphics object  
  size(500, 500, P2D); //size of the on-screen display  
}  

int counter; // counter  
void draw() {  
  counter++; // add 1 to counter  
  if(counter%10 == 0) { // every 10th frame we snap a preview and draws it  
    PImage img = big.get(0, 0, big.width, big.height); //snap an image from the off-screen graphics  
    img.resize(width,height); // resize to fit the on-screen display  
    image(img,0,0); // display the resized image on screen  
  }  

  big.fill(255,0,0);//we fill following with red  
  big.ellipse(random(big.width),random(big.height),10,10);//randomly placed circle  
}  

/** 
* We save on any key 
* this could be done in void close() but safer to have it here. 
*/  
void keyPressed() {  
  big.endDraw(); // finish drawing  
  big.save("highRes.tif"); //save to file - use .tif as format for high-res  
  println("saved"); // nice with some feedback  
}  

it is from: Alexander Salveson Nossum, link: http://alexanno.net/2010/06/high-resolution-output-from-processing-processing-in-hd/comment-page-1/#comment-818

It works with easy sketches but when I try to use a function it fails.

example: big.ellipse(random(width),random(height),40,40);

works

but: void example(){ ellipse(random(width),random(height),40,40); }

big.example();

doesn’t works. (says: ****the function example() does not exist.****)

why is it? there is another way to get better quality captures?

pattern:
t = createGraphics(size and stuff)
<fill it with a TRIANGLE_STRIP surface>
draw() {
  camera( changing parameters go here )
  image( t,  more_parameters)
}

What I expected was the image to show a rotating object as the camera is changed.

What happens: I just the very first image perpetually, then nothing changes.

If instead I put the creation and triangle_strip drawing into the draw loop so it is redrawn every time then I get what I expect to see but of course I'm having to recreate the 3D object every time.

Regression: My wild guess here is that calling Image is forcing some delayed lazy rendering of the graphics, and then subsequent calls do not re-render the image even if the graphics was rotated. Somehow this would seem like a lousy behaviour so I'm sort of doubting this theory. But I can't think of another one

I've tried using the following two commands to see based on the guess that I might be able to reset some lazy image creation flag to it wold recreate the image but these did not work-- get errors:

//t.Image.setLoaded(false);
//t.updatePixels() ;

So Maybe that guess is incorrect.

But if this sticky on-time rendering hypothesis. correct then maybe a solution would be to copy the graphics object before I display it so I can keep an unrendered copy.

if so then the problem becomes:

**Problem: ** how to duplicate a 3D PGraphics Object.

Note: this is 3D not 2D, so it's not the same as simply copying the pixels from one image to another.

if i use background(0), the graphic will be cleared, however the pixels will be still black, and thats not good beacuase i am using multiple graphics and their background has to be transparent

i tried using clear() but it looks like its not working on a graphic in p5 only in processing :(

any help would be appreciate!