# How To Draw An Image File As PShapes?

**URL:** <https://discourse.processing.org/t/how-to-draw-an-image-file-as-pshapes/14597>\
**Category:** Coding Questions\
**Created:** [October 11, 2019, 5:16am UTC](https://discourse.processing.org/t/how-to-draw-an-image-file-as-pshapes/14597 "2019-10-11T05:16:32Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![XXX](https://avatars.discourse-cdn.com/v4/letter/x/a9adbd/32.png) [@XXX](https://discourse.processing.org/u/XXX)\
**Post date:** [October 11, 2019, 5:16am UTC](https://discourse.processing.org/t/how-to-draw-an-image-file-as-pshapes/14597/1 "2019-10-11T05:16:32Z")

</div>

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?

```auto
// 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);
      }
      
    }
  
}

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [October 11, 2019, 9:18am UTC](https://discourse.processing.org/t/how-to-draw-an-image-file-as-pshapes/14597/2 "2019-10-11T09:18:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 11, 2019, 9:30am UTC](https://discourse.processing.org/t/how-to-draw-an-image-file-as-pshapes/14597/3 "2019-10-11T09:30:22Z")

</div>

hm, actually it must be

```auto
        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

```auto
  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?

```auto

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/34b888bf2f088d1b4b07940d81fea8b909fcb2d2.png)

* * *

> **with operation?**
>
> ```auto
> 
> 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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e8544b887017b230aef99c784eb8be329f8df6a4.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 11, 2019, 9:40am UTC](https://discourse.processing.org/t/how-to-draw-an-image-file-as-pshapes/14597/4 "2019-10-11T09:40:20Z")

</div>

Can’t you say

PShape s;

…  
s.image(…);

s.line(…);

?

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

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [October 11, 2019, 11:37am UTC](https://discourse.processing.org/t/how-to-draw-an-image-file-as-pshapes/14597/5 "2019-10-11T11:37:33Z")

</div>

@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()

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 11, 2019, 11:40am UTC](https://discourse.processing.org/t/how-to-draw-an-image-file-as-pshapes/14597/6 "2019-10-11T11:40:13Z")

</div>

Yes, sorry, my bad.

I meant PGraphics, not PShape.

Sorry!

Regards, Chrisir

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

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [October 11, 2019, 11:42am UTC](https://discourse.processing.org/t/how-to-draw-an-image-file-as-pshapes/14597/7 "2019-10-11T11:42:57Z")

</div>

@XXX

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

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 11, 2019, 11:54am UTC](https://discourse.processing.org/t/how-to-draw-an-image-file-as-pshapes/14597/8 "2019-10-11T11:54:48Z")

</div>

see my answer above with the full sketch I provided

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [October 11, 2019, 12:08pm UTC](https://discourse.processing.org/t/how-to-draw-an-image-file-as-pshapes/14597/9 "2019-10-11T12:08:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 11, 2019, 12:34pm UTC](https://discourse.processing.org/t/how-to-draw-an-image-file-as-pshapes/14597/10 "2019-10-11T12:34:47Z")

</div>

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