Sorry about mistakes, I'm french. :D

With P2D

Without P2D

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);
}

I'm trying to play some movies and sound in a processing sketch; there are 10 movies and 1 sound file - all the movies are fairly small [<=5MB]; I create them in setup and call .play() on them, and then in draw() I use image() on them, and I also use movieEvent() function to call .read() on them; whenever I run this the videos lag and my CPU spikes to 100%

Surely playing 10 concurrent movies isn't that onerous?

Does anyone have any ideas for how to improve the performance or can tell me if I'm doing something wrong or missing something?

Any help would be much appreciated, thanks

Thanks

Is there a way to have an image be drawn without it becoming blurry? I am just drawing an 8x8 png image, and since the game i'm making is completely adapting the interface with the screen size, I have to make the image bigger. I could just resize the image to, like, 128x128, but I since I think displaying an 8x8 image is easier, I'd rather like to use that.

I am now using

image(ImgPowerupPoint, height/2, height/2, height/2, height/2)

for an 8x8 image, and it becomes pretty blurry (it is a red 8x8 sphere, as far as that can still be called a sphere):

I am also having problems with looping a certain sound, but that is not relevant in this topic and I don't think people would be eager to try to help since my code is already 636 lines long...

Kind regards, OrOrg

background(-1);
noLoop();
fill(#500F0F);
text("99", 300, 200);
fill(-1);
text("99",300, 200);

I'd like to render basic 3D shapes without any aliasing/smoothing with a PGraphics instance using the P3D renderer, but noSmooth() doesn't seem to work.

In OF I remember calling setTextureMinMagFilter(GL_NEAREST,GL_NEAREST); on a texture.

What would be the equivalent in Processing ?

Thank you, George

I'm trying to resize an image and display it without any smoothing (mipmap, bicubic, linear or other).

The point is i want it to stay "pixelated" (sharp pixels). See picture below...

I'm using P2D.

Any ideas?

(sorry this one isn't as pretty as it could be, gotta make it less random, also it's most easily seen on the right edge)

And here's the code (Java):

float lerpFrequency;
float darkestStart;
float lightestStart;
float spacing;
int x;
int y;
int eighth;
float rR;
float rG;
float rB;

void setup() {
    size (1024, 1024);
    background (255, 255, 255);
    stroke(0);
    lerpFrequency = 7;
    darkestStart = 0;
    lightestStart = 255;
    spacing = 1;
    x = width;
    y = width/2;
    eighth = 1;
    rR = int(random(darkestStart,lightestStart));
    rG = int(random(darkestStart,lightestStart));
    rB = int(random(darkestStart,lightestStart));
}

void draw() {
    rR = random(rR - lerpFrequency, rR + lerpFrequency);
    rG = random(rG - lerpFrequency, rG + lerpFrequency);
    rB = random(rB - lerpFrequency, rB + lerpFrequency);
    stroke (rR, rG, rB);
    //fill(rB,rG,rR); EPILEPSY WARNING

    if (eighth == 1 || eighth == 8) {
        y-=spacing;

        if (eighth == 1 && y <= 0) {
            eighth++;
        } else if (eighth == 8 && y <= width/2) {
            eighth = 1;
        }
    } else if (eighth == 2 || eighth == 3) {
        x-=spacing;

        if (eighth == 2 && x <= width/2 || eighth == 3 && x <= 0) {
            eighth++;
        }
    } else if (eighth == 4 || eighth == 5) {
        y+=spacing;

        if (eighth == 4 && y >= width/2 || eighth == 5 && y >= width) {
            eighth++;
        }
    } else if (eighth == 6 || eighth == 7) {
        x+=spacing;

        if (eighth == 6 && x >= width/2 || eighth == 7 && x >= width) {
            eighth++;
        }
    }
    //background(255);
    ellipse(width/2, width/2, x, y);
}

void mouseClicked() {
    setup();
}

Anyway I am clueless as to why it would create these white lines, since I would assume that any overlapping pixels would just replace each other instead of leaving some white artifacts or just a rendering error from my computer, I don't know.

Thanks for any help you can give to me!

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);

I was surprised by a few things:

When I try to draw a line using a series of point calls, it looks very different than when I use line and neither one always does what I expected. (For example, drawing a simple line segment will look one way in isolation and then the entire line will look different if its drawn so that one of it's ends is adjacent to a different line.)

Can anyone point me to a source where I can learn what's happening on the pixel level with these functions.

void setup() {
  size(200, 200, P2D);
  background(255);
}

void draw() {
  point(mouseX, mouseY);  
}

processing draws to points, one at mouseX,mouseY another one at mouseX+1, mouseY-1. Is this a bug in processing or an openGL-bug? Has anyone the same problem? (MacBook Pro, NVIDIA GeForce GT 750M 2048 MB, OS X 10.10.5, Processing 3.0.2)

Why in P3D mode the rect is blurred?
What i'm missing ? :-?

I'm trying to create a program that I can use to control the LED strips inside my PC using Arduino. I currently have communication and a lot of other parts working already, but I am stuck on a small problem.

I am able to draw a color wheel or rectangle in this case that should represent all colors available. The program looks at the value under the mouse while it is pressed, and sends this to the Arduino. The problem I am having is that the colors nearest to the edge are not picked up as pure red (255,0,0), green or blue. The closest value I can get is: (255,32,32).

What I have tried so far is changing the size of the rectangle to exclude the missing colors being rendered off-screen. I have found that the code reading the color value under the cursor is correct - I did this by drawing a plain pure red rectangle in the corner, which returned the correct value (255,0,0). I also found that simply subtracting 32 from the values is incorrect, as on pure white you will find the value to be (223,223,223).

This causes significant problems with my LEDs, as a value of 32 on the PWM pin will light the corresponding color up by quite a bit because of the non-linear relationship between LED volt and brightness.

So to reiterate my question: how do I draw a color circle or rectangle from which I can get 100% red, blue and green as well?

Here is my code:

import processing.serial.*; 

Serial myPort;    // The serial port
String inString;  // Input string from serial port
int lf = 10;      // ASCII linefeed 
int[] rgb = new int[3];
PImage m;

void setup(){
  size(400,400);
  frameRate(120);
  smooth(4);
  ellipseMode(CENTER);
  background(255);

  colorMode(HSB, 400);
  for (int i = 0; i < 400; i++) {
    for (int j = 0; j < 400; j++) {
      stroke(i, j, 400);
      point(i, j);
    }
  }
  m=get();

  myPort = new Serial(this, Serial.list()[1], 9600); 
  myPort.bufferUntil(lf);
}

void draw(){
  image(m,0,0);
  if(mousePressed){
    color c = get(mouseX,mouseY);
    fill(c);
    stroke(0);
    ellipse(mouseX,mouseY,30,30);
    rgb[0] = c >> 16 & 0xFF;
    rgb[1] = c >> 8 & 0xFF;
    rgb[2] = c & 0xFF;

    fill(0);
    text(rgb[0], 10,70);
    text(rgb[1], 10,90);
    text(rgb[2], 10,110);

    String test = ",";
    test += str(rgb[0]);
    test += "+";
    test += str(rgb[1]);
    test += "+";
    test += str(rgb[2]);
    test += "\n";

    myPort.write(test);
  }
  fill(0);
  text("Received: " + inString, 10,50);
}

void serialEvent(Serial p) { 
  inString = p.readString(); 
} 

Any ideas?

It makes a much nicer paint stroke. But I've run into a problem. I'm getting a border on the ellipse even though I've set nostroke() while creating the brush tip. It looks fine at low trans, but at high trans you can see a black border around the ellipse. Where is that coming from? The brush spacing and transparency displays in the title bar. Use the key '1' to decrease the spacing and use key '2' to increase the spacing. Use '+' to increase the transparency and use '-' to decrease transparency. Space clears the screen:

PGraphics test;
PGraphics Brush;
PGraphics BrushMask;
color paintColor = color(255,0,0);
int oldx, oldy;
float Brushspacing = 0.10;
int Brushtrans = 05;
float leftoverD = 0.0;
String Info;

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

     test = createGraphics(600,600);
     test.beginDraw(); 
     test.background(255);
     test.endDraw();
     BrushMask = createGraphics(27,27);
     BrushMask.beginDraw();
     BrushMask.noStroke();
     BrushMask.fill(Brushtrans);
     BrushMask.ellipse(13,13,25,25);
     BrushMask.endDraw();
     Brush =createGraphics(27,27);
     Brush.beginDraw();
     Brush.noSmooth();
     Brush.noStroke();
     Brush.fill(paintColor);
     Brush.ellipse(13,13,25,25);     
     Brush.mask(BrushMask);
     Brush.endDraw();
     Info = "Brush Spacing:" + Brushspacing + " BrushTraans:" +Brushtrans;
     frame.setTitle(Info);  

}
void draw(){
     image(test,0,0); 

}
void mousePressed(){
     oldx = mouseX - 13;
     oldy = mouseY - 13;
     test.beginDraw();
     test.image(Brush,oldx,oldy);
     test.endDraw();
}
void mouseDragged(){
     float spacing = 25 * Brushspacing;
     if ( spacing < 0.5 )
          spacing = 0.5;
     float deltaX = mouseX - oldx;
     float deltaY = mouseY - oldy;
     float distance = sqrt(deltaX * deltaX + deltaY * deltaY);
     float stepX = 0.0;
     float stepY = 0.0;
     if(distance > 0.0){
          float invertDistance = 1.0/distance;
          stepX = deltaX * invertDistance;
          stepY = deltaY * invertDistance;
     }
     float offsetX = 0.0;
     float offsetY = 0.0;
     float totalDistance = leftoverD + distance;
     test.beginDraw();
     while ( totalDistance >= spacing ) {
          // Increment where we put the stamp
          if ( leftoverD > 0 ) {
               // If we're making up distance we didn't cover the last
               //     time we drew a line, take that into account when calculating
               //     the offset. leftOverDistance is always < spacing.
               offsetX += stepX * (spacing - leftoverD);
               offsetY += stepY * (spacing - leftoverD);

               leftoverD -= spacing;
          } else {
               // The normal case. The offset increment is the normalized vector
               //     times the spacing
               offsetX += stepX * spacing;
               offsetY += stepY * spacing;
          }

          // Calculate where to put the current stamp at.
          test.image(Brush, oldx + offsetX, oldy + offsetY);

          // Ka-chunk! Draw the image at the current location
    //

          // Remove the distance we just covered
          totalDistance -= spacing;
     }  
     test.endDraw();

     leftoverD = totalDistance;
     oldx= mouseX;
     oldy = mouseY;
}void mouseReleased(){
     leftoverD = 0;
}
void keyPressed(){
     if (key == '1'){
          Brushspacing -= 0.05;
          if(Brushspacing < 0.05)
               Brushspacing = 0.05;
     }
     else if (key == '2')
          Brushspacing += 0.05;
     else if (key == '+'){
          Brushtrans += 5;
          if( Brushtrans > 255) Brushtrans = 255;
          BrushMask.beginDraw();
          BrushMask.clear();
          BrushMask.noStroke();
          BrushMask.fill(Brushtrans);
          BrushMask.ellipse(13,13,25,25);
          BrushMask.endDraw();
          Brush.beginDraw();
          Brush.mask(BrushMask);
          Brush.endDraw();
     }
     else if ( key == '-'){
          Brushtrans  -= 5;
          if(Brushtrans < 5) Brushtrans = 5;
          BrushMask.beginDraw();
          BrushMask.clear();
          BrushMask.noStroke();
          BrushMask.fill(Brushtrans);
          BrushMask.ellipse(13,13,25,25);
          BrushMask.endDraw();
          Brush.beginDraw();
          Brush.mask(BrushMask);
          Brush.endDraw();
     }
     else if ( key == ' '){
          test.beginDraw();
          test.background(255);
          test.endDraw();
     }
     Info = "Brush Spacing:" + Brushspacing + " BrushTraans:" +Brushtrans;
     frame.setTitle(Info);     

}     

Thanks for any advice. Alex

    function setup()
    {
        var canvas, buf, img, col;

        canvas = createCanvas(100,100);

        // Draw initial ellipse in buffer
        buf = createGraphics(100,100);
        buf.noSmooth().fill(color(0,0,0)).ellipseMode(CORNER).ellipse(0,0,100,100);

        // Get image representation and filter out black pixels
        col = [0,0,0,255];
        img = b.get();
        for (var x=0; x<100; x++){
            for (var y=0; y<100; y++){
                var a = img.get(x,y);
                if (a[0] == c[0] && a[1] == c[1] && a[2] == c[2] && a[3] == c[3]) {
                    img.set(x,y,[0,0,0,0]);
                }
            }
        }
        img.updatePixels();

        // Render and observe antialiased edge despite the call to noSmooth
        image(img,0,0);
    }

OpenGL does not seem to work, for lighting or shading. the reported error is:

Listening for transport dt_socket at address: 8912
libEGL warning: failed to create a pipe screen for i965
Smooth is not supported by this hardware (or driver)
X11Util.Display: Shutdown (JVM shutdown: true, open (no close attempt): 1/1, reusable (open, marked uncloseable): 0, pending (open in creation order): 1)
X11Util: Open X11 Display Connections: 1
X11Util: Open[0]: NamedX11Display[:0, 0x792ba698, refCount 1, unCloseable false]

It doesn't matter if the display is slow, but is there any way to get OpenGL to work? This isn't new stuff, we are not using shaders here, why should a machine with 5 year old hardware not work?

i got a problem with my PGraphics buffer. If i enable noSmooth, nothing is drawn to the buffer in the first loop. The image remains empty. When i redraw the image everything is working fine. See my example code below:

    PGraphics buf;  

public void setup() {  
  size(800, 600, P3D);  
  buf = createGraphics(800, 600, P3D);  
}

    public void draw() {  
    buf.beginDraw();  
    buf.background((float)200.0);  
    buf.lights();  
    buf.noSmooth();  

    buf.rect(width/2, height/2, 50, 50);  

    buf.endDraw();
    buf.save(".../sandbox_buf.png");

    noLoop();
}

  public void mousePressed() {  
     redraw();      
  } 

Any ideas why nothing is drawn to the buffer in the first loop?
Thanks for your help!