# How to replace Shape with an image ? PShape to PImage

**URL:** <https://discourse.processing.org/t/how-to-replace-shape-with-an-image-pshape-to-pimage/29386>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [April 15, 2021, 4:09pm UTC](https://discourse.processing.org/t/how-to-replace-shape-with-an-image-pshape-to-pimage/29386 "2021-04-15T16:09:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![carolina\_moreira](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/carolina_moreira/32/6196_2.png) [@carolina\_moreira](https://discourse.processing.org/u/carolina_moreira)\
**Post date:** [April 15, 2021, 4:09pm UTC](https://discourse.processing.org/t/how-to-replace-shape-with-an-image-pshape-to-pimage/29386/1 "2021-04-15T16:09:20Z")

</div>

I am trying to exchange all forms for images

What is the correct way to do it?

The game opens and no error appears  
The image just does not appear when I press the Y key

hope someone can help me  
thank you in advance 🙂

```auto
PFont font;
//PImage amarelo;
//PImage plastico;
//PImage caixa;

int number = 0;

int start = 0;

int aa =0;
PShape aaa;

int bb=0;
PShape bbb;

int cc=0;
PShape ccc;

int dd=0;
PShape ddd;

int ee =0;
PShape eee;

int ff =0;
PShape fff;

int gg =0;
PShape ggg;

int hh=0;
PShape hhh;

int ii=0;
PShape iii;

int jj =0;
PShape jjj;

int kk=0;
PShape kkk;

int ll =0;
PShape lll ;

int mm =0;
PShape mmm ;

int nn =0;
PShape nnn;

int oo =0;
PShape ooo;

int pp =0;
PShape ppp;

int qq=0;
PShape qqq;

int rr=0;
PShape rrr;

int ss =0;
PShape sss;

int tt=0;
PShape ttt;

int uu= 0;
PShape uuu;

int vv =0;
PShape vvv;

int xx =0;
PShape xxx;

int yy=0;
PImage yyy;
//PImage img;

int ww=0;
PShape www;

int zz =0;
PShape zzz;

int st=0;
PShape ste;

float[] x = new float[18];
float[] y = new float[18];
float segLength = 50;
float segHeight = 50;
float r;
float g;
float b;
float rect ;

void setup() {

size(1366,768);

strokeWeight(5);
stroke(255, 100);
//caixa = loadImage(“caixa3.png”);

}

void draw() {
background(150);
//image(caixa, 0, 0);

if (start == 0){

fill(0);
rect(0,0,1366,768);
//font = createFont(“DialogInput.bold”, 40);
// textFont(font);
textSize(70);
fill(250);
text(“Press the mouse to start”, 300, 300);
//textAlign(CENTER, CENTER);

textSize(20);
fill(250);
text(" Drag and click the mouse and press any letter to create:", 420, 500);
fill(250);
text("Use the caps lock to take each letter individually, ", 465, 550);
fill(250);
text(“press S to save and D to delete.”, 550, 600);

}

if (start > 0){

dragSegment(0, mouseX, mouseY);
for(int i=0; i<x.length-1; i++) {
dragSegment(i+1, x[i], y[i]);
}

if(keyPressed) {
if(key==‘s’||key== ‘S’) {
println(“Saving…”);
String s = “screen” + nf(number,4) +".jpg";
save(s);
number++;
println(“Done saving.”);
}
}
}
}

void mouseClicked() {
start =1;
}

void dragSegment(int i, float xin, float yin) {
float dx = xin - x[i];
float dy = yin - y[i];
float angle = atan2(dy, dx);
x[i] = xin - cos(angle) * segLength;
y[i] = yin - sin(angle) * segLength;
segment(x[i], y[i], angle);

x[i] = xin - cos(angle) * segHeight;
y[i] = yin - sin(angle) * segHeight;

}

void segment(float x, float y, float a) {
pushMatrix();
translate(x, y);
rotate(a);

if(keyPressed) {

if (key== ‘A’||key==‘d’||key== ‘D’) {
aa=0;

}

if (key==‘a’) {
aa=1;
}
}

if (aa==1) {
aaa = createShape(ARC,0, y, 80, 80, PI+QUARTER_PI, TWO_PI);
shape(aaa);
}

fill(r,g,0);
if(keyPressed) {

if (key==‘Y’||key==‘d’||key== ‘D’) {
yy=0;

}

if (key==‘y’) {
yy=1;
}
}

if (yy==1) {
yyy = loadImage(“caixa3.png”);
//shape(yyy);

}

fill(r,0,b);

fill(0,g,b);

if(keyPressed) {

if (key==‘K’||key==‘d’||key== ‘D’) {
kk=0;

}

if (key==‘k’) {
kk=1;
}
}

if (kk==1) {
kkk = createShape(ELLIPSE,0,50,10,60);
shape(kkk);
}

fill(r,g,0);
if(keyPressed) {

if (key==‘K’||key==‘d’||key== ‘D’) {
kk=0;

}

if (key==‘k’) {
kk=1;
}
}

if (kk==1) {
kkk = createShape(ELLIPSE,0,10,30,5);
shape(kkk);
}

fill(r,0,b);
if(keyPressed) {

if (key==‘Q’||key==‘d’||key== ‘D’) {
qq=0;

}

if (key==‘q’) {
qq=1;
}
}

if (qq==1) {
qqq = createShape(RECT,0,0,30, 30);
shape(qqq);
}

fill(0,g,b);
if(keyPressed) {

if (key==‘R’||key==‘d’||key== ‘D’) {
rr=0;

}

if (key==‘r’) {
rr=1;
}
}

if (rr==1) {
rrr = createShape(RECT,x,0,10, segLength);
shape(rrr);
}

fill(r,g,0);
if(keyPressed) {

if (key==‘B’||key==‘d’||key== ‘D’) {
bb=0;

}

if (key==‘b’) {
bb=1;
}
}

if (bb==1) {
bbb = createShape(ELLIPSE,0,y,20,60);
shape(bbb);
}

fill(0,g,b);
if(keyPressed) {

if (key==‘C’||key==‘d’||key== ‘D’) {
cc=0;

}

if (key==‘c’) {
cc=1;
}
}

if (cc==1) {
ccc = createShape(ELLIPSE,0,0,50,50);
shape(ccc);
}

fill(r,0,b);
if(keyPressed) {

if (key==‘E’||key==‘d’||key== ‘D’) {
ee=0;

}

if (key==‘e’) {
ee=1;
}
}

if (ee==1) {
eee = createShape( TRIANGLE,300, 75, 8, 20, 6, 7);
shape(eee);
}

fill(0,g,b);
if(keyPressed) {

if (key==‘F’||key==‘d’||key== ‘D’) {
ff=0;

}

if (key==‘f’) {
ff=1;
}
}

if (ff==1) {
fff = createShape( LINE,0, 30, 75, 85);
shape(fff);
}

fill(r,g,0);
if(keyPressed) {

if (key==‘G’||key==‘d’||key== ‘D’) {
gg=0;

}

if (key==‘g’) {
gg=1;
}
}

if (gg==1) {
ggg = createShape( ELLIPSE,40,40,10,10);
shape(ggg);
}

fill(0,g,b);
if(keyPressed) {

if (key==‘H’ ||key==‘d’||key== ‘D’ ){
hh=0;

}

if (key==‘h’) {
hh=1;
}
}

if (hh==1) {
hhh = createShape( RECT,X,Y,10,300);
shape(hhh);
}

fill(r,0,b);
if(keyPressed) {

if (key==‘I’||key==‘d’||key== ‘D’) {
ii=0;

}

if (key==‘i’) {
ii=1;
}
}

if (ii==1) {
iii = createShape( ELLIPSE,0,y,80,40 );
shape(iii);
}

fill(r,g,0);
if(keyPressed) {

if (key==‘J’||key==‘d’||key== ‘D’) {
jj=0;

}

if (key==‘j’) {
jj=1;
}
}

if (jj==1) {
jjj = createShape(ARC, X, 100, 95, 50, 0, HALF_PI );
shape(jjj);
}
fill(r,0,b);
if(keyPressed) {

if (key==‘J’||key==‘d’||key== ‘D’) {
jj=0;

}

if (key==‘j’) {
jj=1;
}
}

if (jj==1) {
jjj = createShape(TRIANGLE,30, 70, 80, 12, 16, 13);
shape(jjj);
}

fill(0,g,b);
if(keyPressed) {

if (key==‘K’||key==‘d’||key== ‘D’) {
kk=0;

}

if (key==‘k’) {
kk=1;
}
}

if (kk==1) {
kkk = createShape(ARC, 50, 55, 50, 50, 0, HALF_PI );
shape(kkk);
}

fill(r,g,0);
if(keyPressed) {

if (key==‘L’||key==‘d’||key== ‘D’) {
ll=0;

}

if (key==‘l’) {
ll=1;
}
}

if (ll==1) {
lll = createShape(LINE,x,40, 85, 75 );
shape(lll);
}

fill(r,0,b);
if(keyPressed) {

if (key==‘M’||key==‘d’||key== ‘D’) {
mm=0;

}

if (key==‘m’) {
mm=1;
}
}

if (mm==1) {
mmm = createShape(RECT,69,0,20,40);
shape(mmm);
}

if(keyPressed) {

if (key==‘M’||key==‘d’||key== ‘D’) {
mm=0;

}

if (key==‘m’) {
mm=1;
}
}

if (mm==1) {
mmm = createShape(RECT,x,10,60,10);
shape(mmm);
}
fill(r,0,b);
if(keyPressed) {

if (key==‘N’||key==‘d’||key== ‘D’) {
nn=0;

}

if (key==‘n’) {
nn=1;
}
}

if (nn==1) {
nnn= createShape(TRIANGLE,x, 0, 8, 50, 6, 15);
shape(nnn);
}
fill(0,g,b);
if(keyPressed) {

if (key == ‘O’ ||key==‘d’||key== ‘D’) {
oo=0;

}

if (key==‘o’) {
oo=1;
}
}

if (oo==1) {
ooo= createShape(ELLIPSE,0,y,50,10);
shape(ooo);
}
fill(r,g,0);
if(keyPressed) {

if (key==‘O’||key==‘d’||key== ‘D’) {
oo=0;

}

if (key==‘o’) {
oo=1;
}
}

if (oo==1) {
ooo= createShape(ELLIPSE,0,y,20,20);
shape(ooo);
}

fill(r,0,b);
if(keyPressed) {

if (key==‘P’||key==‘d’||key== ‘D’) {
pp=0;

}

if (key==‘p’) {
pp=1;
}
}

if (pp==1) {
ppp= createShape(TRIANGLE,0, 500, 4, 0, 6, 30);
shape(ppp);
}

fill(0,g,b);
if(keyPressed) {

if (key==‘T’||key==‘d’||key== ‘D’) {
tt=0;

}

if (key==‘t’) {
tt=1;
}
}

if (tt==1) {
ttt= createShape (TRIANGLE,30, 75, 58, 20, 86, 75);
shape(ttt);
}

fill(r,0,b);
if(keyPressed) {

if (key==‘T’||key==‘d’||key== ‘D’) {
tt=0;

}

if (key==‘t’) {
tt=1;
}
}

if (tt==1) {
ttt= createShape (TRIANGLE,75, 16,30, 75, 58, 20 );
shape(ttt);
}

fill(r,g,0);

if(keyPressed) {

if (key==‘U’||key==‘d’||key== ‘D’) {
uu=0;

}

if (key==‘u’) {
uu=1;
}
}

if (uu==1) {
uuu= createShape ( ARC, 50, 55, 600, 60, HALF_PI, PI);
shape(uuu);
}

fill(0,g,b);
if(keyPressed) {

if (key==‘V’||key==‘d’||key== ‘D’) {
vv=0;

}

if (key==‘v’) {
vv=1;
}
}

if (vv==1) {
vvv= createShape (RECT,0,0,90,7);
shape(vvv);
}

fill(0,g,b);
if(keyPressed) {

if (key==‘X’||key==‘d’||key== ‘D’) {
xx=0;

}

if (key==‘x’) {
xx=1;
}
}

if (xx==1) {
xxx= createShape (ELLIPSE,6, 100,100,100);
shape(xxx);
}
fill(r,0,b);
if(keyPressed) {

if (key==‘Z’||key==‘d’||key== ‘D’) {
zz=0;

}

if (key==‘z’) {
zz=1;
}
}

if (zz==1) {
zzz= createShape (TRIANGLE,0, 10 ,300, 50, 600, 5);
shape(zzz);
}
fill(r,g,0);
if(keyPressed) {

if (key==‘W’||key==‘d’||key== ‘D’) {
ww=0;

}

if (key==‘w’) {
ww=1;
}
}

if (ww==1) {
www= createShape (RECT,90,50,40,10);
shape(www);
}
fill(r,0,b);
if(keyPressed) {

if (key==‘W’||key==‘d’||key== ‘D’) {
ww=0;

}

if (key==‘w’) {
ww=1;
}
}

if (ww==1) {
www= createShape (RECT,10,60,10,40);
shape(www);
}

ellipse(0,80, 30,30);
fill(250);
ellipse(80,0,15,15);
line(0, 0, segLength, 0);
line(0, y, segLength, 0);
ellipse(0,80, 10,10);
line(0,0, segHeight, segLength);

popMatrix();
}

void mousePressed(){
r = random(0,255);
g = random (0,255);
b = random(0,255);

}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [April 15, 2021, 9:55pm UTC](https://discourse.processing.org/t/how-to-replace-shape-with-an-image-pshape-to-pimage/29386/2 "2021-04-15T21:55:39Z")

</div>

Hi @carolina_moreira ,

The first thing that strikes me by looking at your code is the amount of lines and repetition. And you might know that programmers don’t like to repeat themselves 😉

You can see that there’s a pattern here :

```auto
int aa =0;
PShape aaa;

int bb=0;
PShape bbb;

int cc=0;
PShape ccc;

// ...

```

You are defining at least 26 separate variables that are corresponding to a letter. But you do it by hand and twice for the integer and the shape. It also implies that you need to make the conditions the same way… This is not easy to understand and debug and it’s doesn’t make your life easy.

There’s better ways to handle this like using arrays or objects.

But my question is why do you use `createShape` to draw basic shapes like rect, arc or triangle where you can use basic functions in Processing?

---

<div class="post-metadata">

**Author:** ![carolina\_moreira](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/carolina_moreira/32/6196_2.png) [@carolina\_moreira](https://discourse.processing.org/u/carolina_moreira)\
**Post date:** [April 16, 2021, 11:06am UTC](https://discourse.processing.org/t/how-to-replace-shape-with-an-image-pshape-to-pimage/29386/3 "2021-04-16T11:06:17Z")

</div>

> [@josephh](#):
>
> to draw basic shapes like rect, arc or triangle

Thank you very much for the tips

I’m sorry I’m a beginner working with Processing so I don’t understand much yet.

What other processing functions can I use to draw basic shapes like the arc rectangle and triangles ?

---

<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:** [April 16, 2021, 11:30am UTC](https://discourse.processing.org/t/how-to-replace-shape-with-an-image-pshape-to-pimage/29386/4 "2021-04-16T11:30:36Z")

</div>

The Sketch looks beautiful with the segments! A Snake of Art, or an Art Snake.

> [@carolina\_moreira](#):
>
> The image just does not appear when I press the Y key

It’s y for ON and Y for OFF I think.

**What to do**

**First** , to load an image is hard for the Computer. So please use loadImage() only once in setup():

` yyy = loadImage("caixa3.png");`

Make sure the image is in your folder. Otherwise you get an red error in the Console Window.

you can also use `resize()` here to make the image smaller

` yyy.resize(60, 0);` // The 0 means keep aspect ratio

**Second** , the issue is that you don’t _display_ the image `yyy`:

in function `segment()`

```auto
if (yy==1) {
    // yyy = loadImage("caixa3.png");
    // shape(yyy);
    image(yyy, 0, 0);
  }

```

**Full Sketch**

```auto

// My Segment Sketch

PFont font;
//PImage amarelo;
//PImage plastico;
//PImage caixa;

int number = 0;

int start = 0;

int aa =0;
PShape aaa;

int bb=0;
PShape bbb;

int cc=0;
PShape ccc;

int dd=0;
PShape ddd;

int ee =0;
PShape eee;

int ff =0;
PShape fff;

int gg =0;
PShape ggg;

int hh=0;
PShape hhh;

int ii=0;
PShape iii;

int jj =0;
PShape jjj;

int kk=0;
PShape kkk;

int ll =0;
PShape lll ;

int mm =0;
PShape mmm ;

int nn =0;
PShape nnn;

int oo =0;
PShape ooo;

int pp =0;
PShape ppp;

int qq=0;
PShape qqq;

int rr=0;
PShape rrr;

int ss =0;
PShape sss;

int tt=0;
PShape ttt;

int uu= 0;
PShape uuu;

int vv =0;
PShape vvv;

int xx =0;
PShape xxx;

int yy=0;
PImage yyy;
//PImage img;

int ww=0;
PShape www;

int zz =0;
PShape zzz;

int st=0;
PShape ste;

float[] x = new float[18];
float[] y = new float[18];
float segLength = 50;
float segHeight = 50;
float r;
float g;
float b;
float rect ;

// --------------------------------------------------------------------

void setup() {
  size(1366, 768);

  strokeWeight(5);
  stroke(255, 100);
  //caixa = loadImage(“caixa3.png”);
  yyy = loadImage("caixa3.png");
  yyy.resize(20, 0);
}

void draw() {
  background(150);
  //image(caixa, 0, 0);

  if (start == 0) {

    fill(0);
    rect(0, 0, 1366, 768);
    //font = createFont(“DialogInput.bold”, 40);
    // textFont(font);
    textSize(70);
    fill(250);
    text("Press the mouse to start", 300, 300);
    //textAlign(CENTER, CENTER);

    textSize(20);
    fill(250);
    text(" Drag and click the mouse and press any letter to create:", 420, 500);
    fill(250);
    text("Use the caps lock to take each letter individually, ", 465, 550);
    fill(250);
    text("press S to save and D to delete.", 550, 600);
  }//if
  //------
  else if (start > 0) {

    dragSegment(0, mouseX, mouseY);
    for (int i=0; i<x.length-1; i++) {
      dragSegment(i+1, x[i], y[i]);
    }

    if (keyPressed) {
      if (key=='s'||key== 'S') {
        println("Saving…");
        String s = "screen" 
          + nf(number, 4) 
          +".jpg";
        save(s);
        number++;
        println("Done saving.");
      }
    }
  }//else if
}//func

// --------------------------------------------------------------------

void mouseClicked() {
  start =1;
}

void dragSegment(int i, float xin, float yin) {
  float dx = xin - x[i];
  float dy = yin - y[i];
  float angle = atan2(dy, dx);
  x[i] = xin - cos(angle) * segLength;
  y[i] = yin - sin(angle) * segLength;
  segment(x[i], y[i], angle);

  x[i] = xin - cos(angle) * segHeight;
  y[i] = yin - sin(angle) * segHeight;
}

void segment(float x, float y, float a) {
  pushMatrix();
  translate(x, y);
  rotate(a);

  if (keyPressed) {

    if (key== 'A'||key=='d'||key== 'D') {
      aa=0;
    }

    if (key=='a') {
      aa=1;
    }
  }

  if (aa==1) {
    aaa = createShape(ARC, 0, y, 80, 80, PI+QUARTER_PI, TWO_PI);
    shape(aaa);
  }

  fill(r, g, 0);
  if (keyPressed) {

    if (key=='Y'||key=='d'||key== 'D') {
      yy=0;
    }

    if (key=='y') {
      yy=1;
    }
  }

  if (yy==1) {
    // yyy = loadImage("caixa3.png");
    //shape(yyy);
    image(yyy, 0, 0);
  }

  fill(r, 0, b);

  fill(0, g, b);

  if (keyPressed) {

    if (key=='K'||key=='d'||key== 'D') {
      kk=0;
    }

    if (key=='k') {
      kk=1;
    }
  }

  if (kk==1) {
    kkk = createShape(ELLIPSE, 0, 50, 10, 60);
    shape(kkk);
  }

  fill(r, g, 0);
  if (keyPressed) {

    if (key=='K'||key=='d'||key== 'D') {
      kk=0;
    }

    if (key=='k') {
      kk=1;
    }
  }

  if (kk==1) {
    kkk = createShape(ELLIPSE, 0, 10, 30, 5);
    shape(kkk);
  }

  fill(r, 0, b);
  if (keyPressed) {

    if (key=='Q'||key=='d'||key== 'D') {
      qq=0;
    }

    if (key=='q') {
      qq=1;
    }
  }

  if (qq==1) {
    qqq = createShape(RECT, 0, 0, 30, 30);
    shape(qqq);
  }

  fill(0, g, b);
  if (keyPressed) {

    if (key=='R'||key=='d'||key== 'D') {
      rr=0;
    }

    if (key=='r') {
      rr=1;
    }
  }

  if (rr==1) {
    rrr = createShape(RECT, x, 0, 10, segLength);
    shape(rrr);
  }

  fill(r, g, 0);
  if (keyPressed) {

    if (key=='B'||key=='d'||key== 'D') {
      bb=0;
    }

    if (key=='b') {
      bb=1;
    }
  }

  if (bb==1) {
    bbb = createShape(ELLIPSE, 0, y, 20, 60);
    shape(bbb);
  }

  fill(0, g, b);
  if (keyPressed) {

    if (key=='C'||key=='d'||key== 'D') {
      cc=0;
    }

    if (key=='c') {
      cc=1;
    }
  }

  if (cc==1) {
    ccc = createShape(ELLIPSE, 0, 0, 50, 50);
    shape(ccc);
  }

  fill(r, 0, b);
  if (keyPressed) {

    if (key=='E'||key=='d'||key== 'D') {
      ee=0;
    }

    if (key=='e') {
      ee=1;
    }
  }

  if (ee==1) {
    eee = createShape( TRIANGLE, 300, 75, 8, 20, 6, 7);
    shape(eee);
  }

  fill(0, g, b);
  if (keyPressed) {

    if (key=='F'||key=='d'||key== 'D') {
      ff=0;
    }

    if (key=='f') {
      ff=1;
    }
  }

  if (ff==1) {
    fff = createShape( LINE, 0, 30, 75, 85);
    shape(fff);
  }

  fill(r, g, 0);
  if (keyPressed) {

    if (key=='G'||key=='d'||key== 'D') {
      gg=0;
    }

    if (key=='g') {
      gg=1;
    }
  }

  if (gg==1) {
    ggg = createShape( ELLIPSE, 40, 40, 10, 10);
    shape(ggg);
  }

  fill(0, g, b);
  if (keyPressed) {

    if (key=='H' ||key=='d'||key== 'D' ) {
      hh=0;
    }

    if (key=='h') {
      hh=1;
    }
  }

  if (hh==1) {
    hhh = createShape( RECT, X, Y, 10, 300);
    shape(hhh);
  }

  fill(r, 0, b);
  if (keyPressed) {

    if (key=='I'||key=='d'||key== 'D') {
      ii=0;
    }

    if (key=='i') {
      ii=1;
    }
  }

  if (ii==1) {
    iii = createShape( ELLIPSE, 0, y, 80, 40 );
    shape(iii);
  }

  fill(r, g, 0);
  if (keyPressed) {

    if (key=='J'||key=='d'||key== 'D') {
      jj=0;
    }

    if (key=='j') {
      jj=1;
    }
  }

  if (jj==1) {
    jjj = createShape(ARC, X, 100, 95, 50, 0, HALF_PI );
    shape(jjj);
  }
  fill(r, 0, b);
  if (keyPressed) {

    if (key=='J'||key=='d'||key== 'D') {
      jj=0;
    }

    if (key=='j') {
      jj=1;
    }
  }

  if (jj==1) {
    jjj = createShape(TRIANGLE, 30, 70, 80, 12, 16, 13);
    shape(jjj);
  }

  fill(0, g, b);
  if (keyPressed) {

    if (key=='K'||key=='d'||key== 'D') {
      kk=0;
    }

    if (key=='k') {
      kk=1;
    }
  }

  if (kk==1) {
    kkk = createShape(ARC, 50, 55, 50, 50, 0, HALF_PI );
    shape(kkk);
  }

  fill(r, g, 0);
  if (keyPressed) {

    if (key=='L'||key=='d'||key== 'D') {
      ll=0;
    }

    if (key=='l') {
      ll=1;
    }
  }

  if (ll==1) {
    lll = createShape(LINE, x, 40, 85, 75 );
    shape(lll);
  }

  fill(r, 0, b);
  if (keyPressed) {

    if (key=='M'||key=='d'||key== 'D') {
      mm=0;
    }

    if (key=='m') {
      mm=1;
    }
  }

  if (mm==1) {
    mmm = createShape(RECT, 69, 0, 20, 40);
    shape(mmm);
  }

  if (keyPressed) {

    if (key=='M'||key=='d'||key== 'D') {
      mm=0;
    }

    if (key=='m') {
      mm=1;
    }
  }

  if (mm==1) {
    mmm = createShape(RECT, x, 10, 60, 10);
    shape(mmm);
  }
  fill(r, 0, b);
  if (keyPressed) {

    if (key=='N'||key=='d'||key== 'D') {
      nn=0;
    }

    if (key=='n') {
      nn=1;
    }
  }

  if (nn==1) {
    nnn= createShape(TRIANGLE, x, 0, 8, 50, 6, 15);
    shape(nnn);
  }
  fill(0, g, b);
  if (keyPressed) {

    if (key == 'O' ||key=='d'||key== 'D') {
      oo=0;
    }

    if (key=='o') {
      oo=1;
    }
  }

  if (oo==1) {
    ooo= createShape(ELLIPSE, 0, y, 50, 10);
    shape(ooo);
  }
  fill(r, g, 0);
  if (keyPressed) {

    if (key=='O'||key=='d'||key== 'D') {
      oo=0;
    }

    if (key=='o') {
      oo=1;
    }
  }

  if (oo==1) {
    ooo= createShape(ELLIPSE, 0, y, 20, 20);
    shape(ooo);
  }

  fill(r, 0, b);
  if (keyPressed) {

    if (key=='P'||key=='d'||key== 'D') {
      pp=0;
    }

    if (key=='p') {
      pp=1;
    }
  }

  if (pp==1) {
    ppp= createShape(TRIANGLE, 0, 500, 4, 0, 6, 30);
    shape(ppp);
  }

  fill(0, g, b);
  if (keyPressed) {

    if (key=='T'||key=='d'||key== 'D') {
      tt=0;
    }

    if (key=='t') {
      tt=1;
    }
  }

  if (tt==1) {
    ttt= createShape (TRIANGLE, 30, 75, 58, 20, 86, 75);
    shape(ttt);
  }

  fill(r, 0, b);
  if (keyPressed) {

    if (key=='T'||key=='d'||key== 'D') {
      tt=0;
    }

    if (key=='t') {
      tt=1;
    }
  }

  if (tt==1) {
    ttt= createShape (TRIANGLE, 75, 16, 30, 75, 58, 20 );
    shape(ttt);
  }

  fill(r, g, 0);

  if (keyPressed) {

    if (key=='U'||key=='d'||key== 'D') {
      uu=0;
    }

    if (key=='u') {
      uu=1;
    }
  }

  if (uu==1) {
    uuu= createShape ( ARC, 50, 55, 600, 60, HALF_PI, PI);
    shape(uuu);
  }

  fill(0, g, b);
  if (keyPressed) {

    if (key=='V'||key=='d'||key== 'D') {
      vv=0;
    }

    if (key=='v') {
      vv=1;
    }
  }

  if (vv==1) {
    vvv= createShape (RECT, 0, 0, 90, 7);
    shape(vvv);
  }

  fill(0, g, b);
  if (keyPressed) {

    if (key=='X'||key=='d'||key== 'D') {
      xx=0;
    }

    if (key=='x') {
      xx=1;
    }
  }

  if (xx==1) {
    xxx= createShape (ELLIPSE, 6, 100, 100, 100);
    shape(xxx);
  }
  fill(r, 0, b);
  if (keyPressed) {

    if (key=='Z'||key=='d'||key== 'D') {
      zz=0;
    }

    if (key=='z') {
      zz=1;
    }
  }

  if (zz==1) {
    zzz= createShape (TRIANGLE, 0, 10, 300, 50, 600, 5);
    shape(zzz);
  }
  fill(r, g, 0);
  if (keyPressed) {

    if (key=='W'||key=='d'||key== 'D') {
      ww=0;
    }

    if (key=='w') {
      ww=1;
    }
  }

  if (ww==1) {
    www= createShape (RECT, 90, 50, 40, 10);
    shape(www);
  }
  fill(r, 0, b);
  if (keyPressed) {

    if (key=='W'||key=='d'||key== 'D') {
      ww=0;
    }

    if (key=='w') {
      ww=1;
    }
  }

  if (ww==1) {
    www= createShape (RECT, 10, 60, 10, 40);
    shape(www);
  }

  ellipse(0, 80, 30, 30);
  fill(250);
  ellipse(80, 0, 15, 15);
  line(0, 0, segLength, 0);
  line(0, y, segLength, 0);
  ellipse(0, 80, 10, 10);
  line(0, 0, segHeight, segLength);

  popMatrix();
}

void mousePressed() {
  r = random(0, 255);
  g = random (0, 255);
  b = random(0, 255);
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [April 16, 2021, 12:08pm UTC](https://discourse.processing.org/t/how-to-replace-shape-with-an-image-pshape-to-pimage/29386/5 "2021-04-16T12:08:12Z")

</div>

> [@carolina\_moreira](#):
>
> I’m sorry I’m a beginner working with Processing so I don’t understand much yet.

No problem, everyone was here at some point 😉

> [@carolina\_moreira](#):
>
> What other processing functions can I use to draw basic shapes like the arc rectangle and triangles ?

A good place to start is the Processing reference, it got all the functions and keywords you can use in Processing :

> **[Reference](https://processing.org/reference/)**
>
> Find further documentation of the Processing language

You can then check the 2D Primitives section :

- [arc()](https://processing.org/reference/arc_.html)
- [circle()](https://processing.org/reference/circle_.html)
- [ellipse()](https://processing.org/reference/ellipse_.html)
- [line()](https://processing.org/reference/line_.html)
- [point()](https://processing.org/reference/point_.html)
- [quad()](https://processing.org/reference/quad_.html)
- [rect()](https://processing.org/reference/rect_.html)
- [square()](https://processing.org/reference/square_.html)
- [triangle()](https://processing.org/reference/triangle_.html)

Have fun 😉