image(buffer, 0, 0, width, height);

Alright, this is a bit weird.

With the standard image resize:

Default renderer  = 20fps. 

P3D = 50fps. 

I did an image resize manually by copying the pixels to an array with a for loop, then using a simple nearest neighbor solution, then copying the array into a pimage, then displaying the pimage.

default renderer = 50fps

P3D = 50fps. 

Obviously, my image resize method which is nearest neighbor looks terrible compared to the default one, and it gets the same fps in P3D. The goal however is to export to android, and for some reason P3D is super slow... any advice? Is there any examples resizing a PGraphics canvas with a custom algorithm in a processing sketch?

This is my resize algorithm

  int[] resize(int[] original, int x1, int y1, int x2, int y2) {
    int[] resized = new int[x2*y2];
    double xr = x1/(double)x2;
    double yr = y1/(double)y2;
    double px;
    double py; 
    for (int x = 0; x < x2; x++) {
      px = x * xr;
      for (int y = 0; y < y2; y++) {
        py = y * yr;
        double index = Math.floor((y* x2) + x);
        double index2 = Math.floor((int)((py * x1) + px));
        resized[(int)(index)] = original[(int)index2];
      }
    }
    return resized;
  }

I have made this little code for trying P5JS

  var bubbleDiam = 40;
  var bubbleNb = 80;
  var xpos = [];
  var ypos = [];
  var hue = []; 

 function setup() {

 createCanvas(windowWidth, windowHeight);
 colorMode(HSB,360,100,100);
 noStroke();

  for( var i = 0 ; i < bubbleNb ; i++){
  xpos[i] = random(bubbleDiam, windowWidth - bubbleDiam);
  ypos[i] = random(bubbleDiam, windowHeight - bubbleDiam);
  hue[i] = random(360);
  }      
}

function draw() {
 var bri = map(mouseY,0,displayHeight, 60,100);
 var vary = map(mouseX,0,displayWidth,-60,60);

  for( var i = 0 ; i < bubbleNb ; i++){
    fill(hue[i] + vary, 80,bri);
    ellipse(xpos[i],ypos[i],bubbleDiam,bubbleDiam, 100);
}

}

but there is a strong problem of aliasing as you can see

temp-bubbles

how can I have beautiful circles in P5js ?

thanks

Often in the forum we have similar questions:
"Why is the text so blocky?"
"Why these lines are not anti-aliased?"
"Why is this circle almost squarish?"

And when asked, the user shows code looking like:

void setup()
{
  size(400, 400);
  background(255);
}

void draw()
{
  stroke(#000055);
  fill(#000055);

  ellipse(width / 2, height / 2, width / 10, height / 10);

  textSize(50);
  text("Blocky\nText", 100, 2 * height / 3);
  textSize(10);
  text("Other\nText", 20, height / 3);

  line(100, 50, 300, 150);
  line(150, 150, 350, 100);
}

If you are an experienced user, you immediately spot the problem, and advise to move the call to background() at the start of draw();

void setup()
{
  size(400, 400);
}

void draw()
{
  background(255);
  stroke(#000055);
  fill(#000055);

  ellipse(width / 2, height / 2, width / 10, height / 10);

  textSize(50);
  text("Blocky\nText", 100, 2 * height / 3);
  textSize(10);
  text("Other\nText", 20, height / 3);

  line(100, 50, 300, 150);
  line(150, 150, 350, 100);
}

In versions before 2.0, adding a call to smooth() helped, but it is the default now.

Why does it makes a difference?

Processing does its drawings in anti-aliased mode: the borders are smoothed by drawing semi-transparent, toned down pixels on the borders, making a nicer transition with the background. draw() is called 60 times per second (by default). It doesn't erase the background if not asked explicitly. So it draws over and over the graphics at the same place. The semi-transparent pixels cumulate on the borders, so they progressively become completely opaque. Hence the blocky look with steps.

Nearly all the Processing sketches (except some special effects playing on the accumulation of graphics) start draw() with a call to background(). There can be exceptions, but they are the done by people understanding deeply how Processing works.

I would like to make a variable go up to a max number by a certain increment each time and then make it go back down to 0 by the same increment, and repeat. variable % maxNumber just floors the number at 0. I would like the number to be maxNumber - (variable % maxNumber) after variable > maxNumber until variable > maxNumber * 2, then I just want variable to be floored again to start the process over. I could use a "sin" function, but I don't like the way it curves. I also would rather not use "if" or "while" statements because it feels like cheating. I'm complicating this too much in my head, does anybody know how to do this?

Any help would be appreciated, thanks!

-Gav

In the code below I have two observations and I am hopping to figure out if there is a way to solve them.

First {REN =P2D; maskImageNow=false;}

When REN is set to P2D, and maskImageNow=false, a white fill ellipse is drawn on top of a background full of nonFilled mini ellipses (background black and their stroke color is white). What I am observing is that the large main filled ellipse that follows the mouse has an artifact in its fill. You can see the borders of the circles underneath the Pgraphics object. See this image showing the problem:

_

***********EDIT: For the first case, it seems it is related to the order of drawing. In P2D, because of line 67, the white ellipse is drawn first and then the mini-bubbles on top. However, if you use JAVA2D you don't get the same effect. The ellipse and bubbles are on the same level/depth/layer. Or in other words, there is some edge blending between the mini-bubbles edge and the background in the gg (PGraphics) object which is not observed in the JAVA2D renderer version. Consider this part of the question solved and the observation is not an artifact.

Second {REN =JAVA2D; maskImageNow=true;}

When I set the REN to JAVA2D, when I apply the mask (maskImageNow=true), the edges of the ellipses are not smooth. However, when the mask effect is off, the background ellipses do not display that rough edges effect. Next image shows this observation:

Notice that during the screenshot process, the edges of the ellipses do not show that rough edge I was talking about (left image). Hopefully if you run the code you can see it directly on the sketch.

Can you reproduce them and do you know any way to fix them?

Kf

//REFERENCES: https://forum.processing.org/two/discussion/23093/brightness-pixel-doesnt-work#latest

//INSTRUCTIONS:
//         *--   Click to enable or disable the masking effect


//===========================================================================
// FINAL FIELDS:
final int maxTries=9000;
final int nCircles=2000;
final String REN=P2D;


//===========================================================================
// GLOBAL VARIABLES:

ArrayList<CircleStruct> c;
PGraphics pg;
PGraphics gg;
boolean maskImageNow=false;

//===========================================================================
// PROCESSING DEFAULT FUNCTIONS:

void settings() {
  size(400, 600, REN);
  smooth(8);
}

void setup() {

  textAlign(CENTER, CENTER);
  rectMode(CENTER);
  ellipseMode(RADIUS);

  fill(255);
  strokeWeight(2);

  pg = createGraphics(width, height, REN);
  //pg.smooth(4);

  c=new ArrayList<CircleStruct>();
  gg=createGraphics(width, height, REN);  
  //gg.smooth(4);
  fillWithCircles(nCircles);
  gg.beginDraw();  
  gg.noFill();
  gg.stroke(255);
  gg.strokeWeight(2);
  gg.clear();
  for (CircleStruct pc : c) {
    pc.draw(gg);
  }
  gg.endDraw();
}



void draw() {
  background(0);

  pg.beginDraw();
  pg.clear();
  pg.ellipse(mouseX, mouseY, 100, 100);
  pg.endDraw();

  image(pg, 0, 0);

  if (maskImageNow) 
    gg.mask(pg);

  image(gg, 0, 0);
}

void keyReleased() {
}

void mouseReleased() {
  maskImageNow=!maskImageNow;  //Toggle action

  if (maskImageNow==false) {
    gg.beginDraw();
    gg.noFill();
    gg.stroke(255); 
    gg.strokeWeight(2);
    gg.clear();
    for (CircleStruct pc : c) {
      pc.draw(gg);
    }
    gg.endDraw();
  }
}



//===========================================================================
// OTHER FUNCTIONS:

void fillWithCircles(int n) {
  noFill();
  stroke(255);
  c.clear();  

  for (int i=0; i<n; i++) {
    CircleStruct cir=new CircleStruct();
    boolean overlap=true;
    int ntries=0;
    while (overlap && ntries<maxTries) {
      overlap=false;
      ntries++;
      for (CircleStruct pc : c) {
        if (cir.overlaps(pc)) {
          overlap=true;
          cir.reGenerateCircle();
          break;
        }
      }
    }

    if (ntries>=maxTries) {
      println("Stop trying placing circles at counter " + i + " out of "+n);
      break;
    }

    c.add(cir);
  }
}


class CircleStruct {

  final static int minRad=3;
  final static int maxRad=12;

  float w;
  float h;
  float rad;

  CircleStruct() {
    generateCircle();
  }

  void generateCircle() {
    w=random(width);
    h=random(height);
    rad=random(minRad, maxRad);
  }

  void reGenerateCircle() {
    generateCircle();
  }

  void draw() {
    ellipse(w, h, rad, rad);
  }

  void draw(PGraphics gg) {
    gg.ellipse(w, h, rad, rad);
  }

  boolean overlaps(CircleStruct ptrC) {
    return overlaps(ptrC.w, ptrC.h, ptrC.rad);
  }

  boolean overlaps(float _w, float _h, float _r) {
    return dist(w, h, _w, _h)<rad+_r;
  }

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?

I've been programming on processing for some time, and I've noticed that whenever I watch tutorials online, the smooth() function does make an actual difference, whereas on mine my (mid-2014) MBP Retina (Nvidia GT 750M, 16GB) just doesn't.

Could anyone please help? Here's a couple of screenshots of an ellipse:

without smooth()

with smooth()

Any reason why this could be happening?

Thank you so much!

Regards!

somewhat beginner here, i'm making some scenes with SVG files using geomerative library. everything works, i optimized the SVG's to contain only simple linework. but everything looks aliassed when rendered with P3D. i tried higher smooth() values, no difference. when i set noSmooth() it gets more ugly and jagged so the default smooth(2) is working.

is there a way to get higher quality or higher anti-aliassing? or some super high AA quality setting for saveFrame()? or should i look into post processing manipulation?

thanks!

First class; import processing.core.PApplet;

    public class Test1 {
        static PApplet parent;
        public Test1(PApplet p) {
            parent = p;}

        Test2 test2 = new Test2(parent);

        public void dosomething(){

            test2.doThing();
        }
    }

Second class; import processing.core.PApplet; public class Test2 {

    static PApplet parent;
    public Test2(PApplet p) {
        parent = p;}

    public void doThing(){  parent.ellipse( 100,100,50,50);  }
}

Then in the main class public class ExampleApplet extends PApplet {

        int countSVGsUsed = 0;
        String [] SvgsUsed = new String[1000];


        public static void main(String args[]) {
            PApplet.main("ExampleApplet");
        }
    public void draw() {
      Test1 test1 = new Test1(this);
            test1.dosomething();
    }
    }

this gives me the following errors

smooth() can only be used inside settings() Exception in thread "Animation Thread" java.lang.NullPointerException at Test2.doThing(Test2.java:12) at Test1.dosomething(Test1.java:15) at ExampleApplet.draw(ExampleApplet.java:101) at processing.core.PApplet.handleDraw(PApplet.java:2401) at processing.awt.PSurfaceAWT$12.callDraw(PSurfaceAWT.java:1499) at processing.core.PSurfaceNone$AnimationThread.run(PSurfaceNone.java:312)

I get a NullPointerException because PApplet does not get passed(?) is there a workaround or a simple solution for this?

Thx in advance

PImage img;
void setup()
{
  size(220, 300, P2D);
  img = loadImage("data.png");
}

void draw()
{
  image(img,10,10,136,136);
}

Can you help me ?
Thanks.

Can you help me making the offscreen buffer graphics nicer?

exmple image ugly offscreen on the right, on-screen on the left

sample code

PGraphics pg;

void setup(){
  size (1024,768, P2D);
  pixelDensity(2);
  smooth();
  pg = createGraphics(width, height, P2D);
  noLoop();
}

void draw(){
  background (0);
  pushMatrix();
  translate (width/2-100, height/2);
  rotate (PI/6);
  stroke(255);
  noFill();
  strokeWeight(0.5);
  rect (0,0,100,100);
  popMatrix();

  pg.beginDraw();
  pg.smooth();
  pg.clear();
  pg.translate (width/2+100, height/2);
  pg.rotate (PI/6);
  pg.stroke(255);
  pg.noFill();
  pg.strokeWeight(0.5);
  pg.rect (0,0,100,100);
  pg.endDraw();

  image(pg,0,0, width, height);

  save("shot.png");
}

Thank you!

I am using processing to draw lines on canvas. My code is quite simple - processing.line(line.origin.x, line.origin.y, line.destination.x, line.destination.y);

But I get pixelated lines. Please see an example here - https://www.dropbox.com/s/gmu0kqwgdx0ozs8/Screenshot 2015-09-15 16.28.02.png?dl=0

Could you help tell me how to solve this problem?

Thanks.

Warmest Regards, Shubham.

"The smooth/noSmooth functions are being called too often. This results in screen flickering, so they will be disabled for the rest of the sketch's execution."

Anybody else faced this issue? Any way to avoid this or to force smooth() to stay enable?

Also any other way to have any kind of anti-aliasing beside smooth()?

Thanks, did some research first but can't find an answer

PS No GPU, doesn't seem to be an issue when running on a GPU system

Looking for a way to make a sphere (or anything really) rotate in 3d to look at the camera or another object. It seems so simple, but it's driving me crazy. I've got a pretty close (I think) solution, but I feel like I'm just inputting the wrong values or using the wrong math method.

here's where I'm at:

PVector eye, pos;

void setup() {
  size(800, 800, P3D);
  smooth(8);

  eye = new PVector(0.0f, 0.0f, -1000.0f);
  pos = new PVector(0, 0, 0);
}

void draw() {
  background(0);
  lights();

//  eye.x=0;
//  eye.y=0;
//  eye.z=-1000;
  camera(eye.x, eye.y, eye.z, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

  translate(pos.x, pos.y, pos.z);
  //PVector rMatrix = faceCamera(eye.get(), pos.get());
  PVector rMatrix = faceCamera(new PVector(mouseX+width/2, mouseY+height/2, -1000), pos.get());//simulate camera movement

  rotateX(rMatrix.x);
  rotateY(rMatrix.y);
  rotateZ(rMatrix.z);

  sphere(200);
}

void keyPressed() {
  if(keyCode == 38) {
    eye.y -=5;
  }
  if(keyCode == 40) {
    eye.y +=5;
  }
  if(keyCode == 37) {
    eye.x -=5;
  }
  if(keyCode == 39) {
    eye.x +=5;
  }
  println(eye);
}

PVector faceCamera(PVector c, PVector p) {
  c.normalize();
  p.normalize();
  float dx = p.x - c.x;
  float dy = p.y - c.y;
  float dz = p.z - c.z;

  PVector ang = new PVector();
  ang.x = atan2(dz, dy);
  ang.y = atan2(dx, dz);
  ang.z = atan2(dy, dx);
  return ang;
}

I'm using the mouse to represent the camera to speed up testing, but in the end, I'll have it always pointed to the camera. I'd like to avoid using a camera library like Proscene just to keep things simple, but I see that there is an example that works for what I'm trying to do.

Any suggestions would be awesome!

thanks! ak

So that the y position of the "current" line is the sum of the heights of the previous lines and the height of its own. Looks like this at the moment:

int dim = 50; 

void setup() {
  size(400, 200, P3D);
  background(255);
  smooth(4);
}

void draw() {
  lights();

  fill(255, 128);
  stroke(255, 128);
  ortho(0, width, 0, height); // same as ortho()

  pushMatrix();
  translate(100, 100, 0);
  rotateX(-PI/6);
  rotateY(PI/6);
  box(dim);
  translate(dim, 0, 0);
  box(dim);
  translate(dim, 0, 0);
  box(dim);
  translate(dim, 0, 0);
  box(dim);
  translate(dim, 0, 0);
  box(dim);
  popMatrix();

  pushMatrix();
  translate(100, 100+dim, 0);
  rotateX(-PI/6);
  rotateY(PI/6);
  box(dim);
  translate(dim, 0, 0);
  box(dim);
  translate(dim, 0, 0);
  box(dim);
  translate(dim, 0, 0);
  box(dim);
  translate(dim, 0, 0);
  box(dim);
  popMatrix();
}

image(pixelImg, 50, 50, 100, 100);

I had a detailed look at the reference and didn't find anything :/