# Switching from a circle to a square

**URL:** <https://discourse.processing.org/t/switching-from-a-circle-to-a-square/4038>\
**Category:** Coding Questions\
**Created:** [October 2, 2018, 7:34am UTC](https://discourse.processing.org/t/switching-from-a-circle-to-a-square/4038 "2018-10-02T07:34:17Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lore](https://avatars.discourse-cdn.com/v4/letter/l/9dc877/32.png) [@Lore](https://discourse.processing.org/u/Lore)\
**Post date:** [October 2, 2018, 7:34am UTC](https://discourse.processing.org/t/switching-from-a-circle-to-a-square/4038/1 "2018-10-02T07:34:17Z")

</div>

Hello,

I cannot seem to figure out how to switch from a circle to a square by pressing a key. I have been able to do it, but when trying to switch the color or size it resets back (either to a circle or just disappears).

Also, is there a way to put my `drawShape` so that it would behave like `circles.drawShape`

```auto
//Add possibility to change shapes (square, circle, arc, triangle)
//Make it so you can rotate shapes (square, arc, triangle)
PGraphics circles;
boolean randomCol;
int size;
color circleColor;
color col;
float lop = 95;

void setup() 
{
  //Setup the window
  fullScreen();
  background(255);
  fill(0);
  //Setup the window for circles 
  circles = createGraphics(2000, 2000); 
  //Colors
  randomCol = false;
  size = 50;
}

void draw() 
{
  //Setup
  background(255);
  noStroke();
  noCursor();
  //Setup random colors
  if (randomCol) {
    col = color(random(255), random(255), random(255));
  } 
  //If mouse is pressed, then draw 
  if (mousePressed)
  {
    //If mouseY variable is underneath the text, then you can draw 
    if (mouseY > lop)
    {
    drawCircles();
    }
  }
  //Print the second plane
  image(circles, 0, 0);
  //If mouse isn't pressed, show the ellipse but dont draw it
  fill(col);
  drawShape();
  //Draw the text on the screen
}
void drawShape ()
{
  if (key == CODED)
  {
    if (keyCode == UP) 
    {
      rect(mouseX-(size/2), mouseY-(size/2), size, size);
    }
    if (keyCode == DOWN)
    {
      ellipse(mouseX, mouseY, size, size);
    }
  }
}
void drawCircles()
{
  circles.beginDraw();
  circles.noStroke();
  circles.fill(col);
  circles.ellipse(mouseX, mouseY, size, size);
  circles.endDraw();
}
void keyPressed() 
{
  //If tab is pressed, random colors
  if (key == TAB)
  {
    randomCol = !randomCol;
  }
  //Press keys 0-9 to change size of the paint brush 
  if (key == '1')
  {
    size = 10;
    lop = 75;
  }
  if (key == '2')
  {
    size = 20;
    lop = 80;
  }
  if (key == '3')
  {
    size = 30;
    lop = 85;
  }
  if (key == '4')
  {
    size = 40;
    lop = 90;
  }
  if (key == '5')
  {
    size = 50;
    lop = 95;
  }
  if (key == '6')
  {
    size = 60;
    lop = 100;
  }
  if (key == '7')
  {
    size = 70;
    lop = 105;
  }
  if (key == '8')
  {
    size = 80;
    lop = 110;
  }
  if (key == '9')
  {
    size = 90;
    lop = 115;
  }
  if (key == '0')
  {
    size = 0;
    lop = 0;
  }
  //If statements make different keys activate different colors 
  if (key == 'b') 
  {
    randomCol = false; //We don't want random colors anymore
    col = color(0, 0, 255);
  }
  if (key == 'B')
  {
    randomCol = false; 
    col = color(0);
  }
  if (key == 'c')
  {
    randomCol = false; 
    col = color(0, 255, 255);
  }
  if (key == 'g')
  {
    randomCol = false; 
    col = color(0, 255, 0);
  }
  if (key == 'G')
  {
    randomCol = false; 
    col = color(128, 128, 128);
  }
  if (key == 'm')
  {
    randomCol = false; 
    col = color(255, 0, 255);
  }
  if (key == 'M')
  {
    randomCol = false; 
    col = color(139, 69, 19);
  }
  if (key == 'o')
  {
    randomCol = false; 
    col = color(255, 140, 0);
  }
  if (key == 'p')
  {
    randomCol = false; 
    col = color(148, 0, 211);
  }
  if (key == 'P')
  {
    randomCol = false; 
    col = color(255, 192, 203);
  }
  if (key == 'r')
  {
    randomCol = false; 
    col = color(255, 0, 0);
  }
  if (key == 'w')
  {
    randomCol = false; 
    col = color(255);
  }
  if (key == 'y')
  {
    randomCol = false; 
    col = color(255, 255, 0);
  }
  //If you press the spacebar it clears the screen 
  if (key == ' ')
  {
    circles.beginDraw();
    circles.background(255);
    circles.endDraw();
  }
  //If you press escape it stops the program
  if (key == ESC)
  {
    exit();
  }
}

```

---

<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 2, 2018, 11:12am UTC](https://discourse.processing.org/t/switching-from-a-circle-to-a-square/4038/2 "2018-10-02T11:12:34Z")

</div>

you made some key detect UP DOWN  
in your function drawShape()  
what is actually your mouse pointer only

ON CLICK you still draw circles, even if the mouse pointer is a rectangle.

pls do key code only inside keyPressed()

on UP DOWN you could change a new variable “shapeselect”

and that you use in the mouse pointer AND in the mouse click  
to show and “stamp” a different shape.