How To Draw An Image File As PShapes?

Processing Coding Questions
1

I would like to draw an image file as PShapes; however, the result is a black canvas.

How may I correct this to display the image as PShapes?

// Global Variables.
PImage img;

// Setup.
void setup()
{
  
  // Size of canvas.
  size(640, 480);

  // No loop.
  noLoop();
  
  // Image.
  img = loadImage("Zeus.png");
  
}

// Draw.
void draw()
{

  drawGod();
  
}

// Draw God.
void drawGod()
{

  //image(img, 0, 0);
  
    for(int i = 0; i < img.height; i++) 
    {
      for(int j = 0; j < img.width; j++) 
      {
        int r = int(red(get(j, i)));
        int g = int(green(get(j, i)));
        int b = int(blue(get(j, i)));  
        
        // Write the pixel values to the canvas.
        fill(r, g, b);
        ellipse(j, i, 1, 1);
      }
      
    }
  
}
2

I think to get a pixel color of an image you have to firstly declare it as a color like color c = get(j, i);

3

hm, actually it must be

        color c = img.get(j, i);
        int r = int(red(c));
        int g = int(green(c));
        int b = int(blue(c));

and you will see little bit,
and then need in setup() a

  noStroke();

voila

because actually you read the black canvas content
and filled this black into circles,
and print these with black stroke

but your code might have worked better if you would have not disabled the image line

this could be the next step? pixelation?


PImage img;
int gap = 4;  //1 pixelation

void setup() {  
  size(640, 480);
  noLoop();
  noStroke();
  img = loadImage("data/moonwalk.jpg");  
}

void draw() {
  background(0);
  drawcircles();  
}

void drawcircles(){
  //image(img, 0, 0);
    for(int i = 0; i < img.height; i+=gap)  {
      for(int j = 0; j < img.width; j+=gap)  {
        color c = img.get(j, i);
        int r = int(red(c));
        int g = int(green(c));
        int b = int(blue(c));
        //println("r "+r," g "+g+" b "+b);
        fill(r, g, b);
        circle(j, i, gap);   // Write the pixel color values to the canvas.
      }
    }
}

image_circle_pixelation
image_circle_pixelation.png1275×795 304 KB

with operation? 

PImage img;
int gap = 1;                        // pixelation
color c;
float cr,cg,cb;                     // original pixel color RGB
float r=1,g=1,b=1;                  // MWPP color tuner

void setup() {  
  size(640, 480);
  //noLoop();
  noStroke();
  img = loadImage("data/moonwalk.jpg");  
  println("use : MWPP press key and turn mouse wheel\nkey [r] Red, [g] Green [b] Blue tune color\nkey [p] pixelation");
}

void draw() {
  background(0);
  drawcircles();  
}

void drawcircles(){
    for(int i = 0; i < img.height; i+=gap)  {
      for(int j = 0; j < img.width; j+=gap)  {
        c = img.get(j, i);
        cr = red(c);
        cg = green(c);
        cb = blue(c);
        //println("r "+cr," g "+cg+" b "+cb);
        cr = constrain(cr * r, 0, 255 );    // tune each color by MWPP
        cg = constrain(cg * g, 0, 255 );
        cb = constrain(cb * b, 0, 255 );
        fill(cr, cg, cb);                    
        circle(j, i, gap);                   // Write the pixel color values to the canvas.
      }
    }
}

void mouseWheel(MouseEvent event) { // Mouse Wheel Plus Plus Color sliders
  float e = event.getCount(); //println(e);
  if ( keyPressed && key == 'r' ) { 
    r += e/50;
    r=constrain(r, 0, 2);
    println(" key r: r "+r);
  }
  if ( keyPressed && key == 'g' ) { 
    g += e/50;
    g=constrain(g, 0, 2);
    println(" key g: g "+g);
  }
  if ( keyPressed && key == 'b' ) { 
    b += e/50;
    b=constrain(b, 0, 2);
    println(" key b: b "+b);
  }  
  if ( keyPressed && key == 'p' ) { 
    gap += e;
    gap=constrain(gap, 1, 20);
    println(" key p: gap "+gap);
  }  
}

image_circle_pixelation_MWPP
image_circle_pixelation_MWPP.png1287×977 139 KB

1 Like
4

Can’t you say

PShape s;

…
s.image(…);

s.line(…);

?

------this is wrong, see below [EDIT]

5

@Chrisir I still am trying to figure this out what you suggest but I get the error

shp.line(20, 0, 20, height);
^^^^
The method line(int, int, int, int) is undefined for the type PShape

And loading an image inside a pshape I only can with texture()

6

Yes, sorry, my bad.

I meant PGraphics, not PShape.

Sorry!

Regards, Chrisir

PGraphics pg;

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

  PImage img1=loadImage("c2.jpg");

  pg = createGraphics(width, height);
  pg.beginDraw();
  pg.background(100);
  pg.stroke(255);
  pg.image(img1, 0, 0);
  for (int i=0; i<166; i+=16) {
    pg.line(20, 20, 122+i, 122);
  }
  pg.endDraw();
}

void draw() {
  image(pg, 0, 0);
}
7

@XXX

PShape shp; 	

void setup() { 
 size(400, 400);
 img = loadImage("yourImage.png"); 
 shp = createShape(RECT,width/2,height/2, 150, 150);
 shp.setTexture(img);
 shape(shp);
}
8

see my answer above with the full sketch I provided

9

PGaphics is very usefull, but it has the disadvantage that you can’t resize it. PShape you can scale().
Edit: Actually I am confused because the question in the topic was about image in PShape.

10

It was about image in PShape because I confused it already in the previous discussion (and had falsly written PShape instead of the correct PGraphics…)