› › ›

Changing ellipse to a rectangle and then back again.

1rulesupersedes1rulesupersedes
edited July 2017 in Questions about Code

I want to change the ellipse to a rectangle once the ellipse reaches the width of the canvas. Then turn it back to an ellipse once the rectangle is less then than canvas.

    float circleX = 0;
    float speed = 1;
    color bg_color = color(0);

    void setup() {
      size(640, 360);
    }

    void draw() {
      circleX = circleX + speed;

      if (circleX > width) {
        speed--;
        bg_color = color(255, 0, 0);
        fill(0, 0, 255);
        rect(180, 180, 24, 24);
      }

      if (circleX < 0) {
        speed++; 
        bg_color = color(0, 250, 0);
      }

      background(bg_color);
      fill(255);
      ellipse(circleX, 180, 24, 24);
    }

Best Answer

Answers

  • koogskoogs

    This is the same question as the other one.

  • TfGuy44TfGuy44
    edited July 2017 Answer ✓

    Add a new variable, a boolean, that remembers if you are drawing a rectangle or an ellipse.

    Update its value in the correct places.

    Use its value when drawing.

  • 1rulesupersedes1rulesupersedes 
        float circleX = 0;
    float speed = 3;
    color bg_color = color(0);
    boolean a = true;

    void setup() {
      size(640, 360);
    }

    void draw() {
      circleX = circleX + speed;

      if (circleX > width) {
        speed--;
        bg_color = color(255, 0, 0);
        a = false;

      }

      if (circleX < 0) {
        speed++; 
        bg_color = color(0, 250, 0);
        a = true;
      }



      background(bg_color);
      fill(255);
      //ellipse(circleX, 180, 24, 24);

      if (a) {
          rectMode(CENTER);
          rect(circleX, 180, 24, 24);
        }else{
          ellipse(circleX, 180, 24, 24);
        }
    }

    Nice - Thanks MAN!!!

  • 1rulesupersedes1rulesupersedes

    What if I wanted to add a third shape to this code?

  • kfrajerkfrajer

    Then the variable a needs to be replaced by an int to be able to hold more than two values. For instance,

    final int CIRCLE=0;
final int SQUARE=1;
final int TRIANGLE=2;
final int HEXAGON=6;

int currentShape=CIRCLE;

    Then you manage the shape to draw like this

    if(currentShape==CIRCLE){
   ... DRAW a circle
}

    Kf

  • 1rulesupersedes1rulesupersedes
    edited July 2017

    OK I am lost. Are you saying that all the values are held in a variable called "final?"

  • GoToLoopGoToLoop

    https://Processing.org/reference/final.html

  • 1rulesupersedes1rulesupersedes

    So "currentShape" is the variable? Is it an array?

        float circleX = 0;
    float speed = 3;
    color bg_color = color(0);
    boolean a = true;

    float topPoint = 0;
    float leftBottom = 58;
    float rightBottom = 86;

    final int CIRCLE=0;
    final int SQUARE=1;
    final int TRIANGLE=2;

    int currentShape=TRIANGLE;

    void setup() {
      size(640, 360);
    }

    void draw() {
      circleX = circleX + speed;

      if (circleX > width) {
        speed--;
        bg_color = color(255, 0, 0);
        a = false;

      }

      if (circleX < 0) {
        speed++; 
        bg_color = color(0, 250, 0);
        a = true;
      }



      background(bg_color);
      fill(255);

      if(currentShape==CIRCLE){
           ellipse(circleX, 180, 24, 24);
      }

      if(currentShape==SQUARE){
           rect(circleX, 180, 24, 24);
      }

      if(currentShape==TRIANGLE){
           triangle(topPoint, 75, leftBottom, 20, rightBottom, 75);
      }
      topPoint = topPoint +1;
      leftBottom = leftBottom +1;
      rightBottom = rightBottom +1;

    }
  • GoToLoopGoToLoop

    Variable currentShape holds a value which represents which shape to draw. :-B

  • 1rulesupersedes1rulesupersedes

    TRIANGLE

  • kfrajerkfrajer

    Check this modified version of your code.

    Kf

    float circleX = 0;
float speed = 3;
color bg_color = color(0);
boolean a = true;

float topPoint = 0;
float leftBottom = 58;
float rightBottom = 86;

final int CIRCLE=0;
final int SQUARE=1;
final int TRIANGLE=2;

int currentShape=TRIANGLE;

void setup() {
  size(640, 360);
}

void draw() {



  //DRAWING definition
  background(bg_color);
  fill(255);

  if (currentShape==CIRCLE) {
    ellipse(circleX, 180, 24, 24);
  }

  if (currentShape==SQUARE) {
    rect(circleX, 180, 24, 24);
  }

  if (currentShape==TRIANGLE) {
    triangle(topPoint, 75, leftBottom, 20, rightBottom, 75);
  }



  //MOTION definition
  if (currentShape==CIRCLE) {
    circleX = circleX + speed;

    if (circleX > width) {
      speed--;
      bg_color = color(255, 0, 0);
      a = false;
    }

    if (circleX < 0) {
      speed++; 
      bg_color = color(0, 250, 0);
      a = true;
    }
  }

  if (currentShape==TRIANGLE) {
    topPoint = topPoint +1;
    leftBottom = leftBottom +1;
    rightBottom = rightBottom +1;
  }
}

void mouseReleased(){
  currentShape++;
  currentShape=currentShape%3;
}
  • jeremydouglassjeremydouglass
    edited July 2017

    This works well when you have a few states and they are simple.

    There is another approach to this for when you have many states or they are complex.

    Say that your shape might be a circle, square, or triangle, and it might be filled red, blue, or green, and it might be big or little, and it might have thick or thin lines (depending on program state), and the lines might be black or white.

    1. make your shape a PGraphics pg
    2. for your display logic in draw(), just image(pg, circleX, 180)
    3. when an event happens (like a keypress) that will update your shape, call renderShape()
    4. put all your complex rendering logic in renderShape(), and draw it to the PGraphics pg. Now you aren't checking 32 nested conditions every frame -- you just draw a different shape whenever something changes.

    ...then, if there are many shapes, make it a class and make renderShape() a method of that class.

  • 1rulesupersedes1rulesupersedes

    thanks Kf, loop & jeremy

  • 1rulesupersedes1rulesupersedes

    Hello Kf,

    I am still looking at the code you posted. Some of it I get some goes over my head. Such as, how did you get %3? currentShape=currentShape%3 why put a % at all? I tried a couple different numbers 3 gives the best results.

    1rulesupersedes

  • kfrajerkfrajer

    Check: https://processing.org/reference/modulo.html

    It is one way to reset the variable when it goes over a counter. Consider:

    void mouseReleased(){
  currentShape++;
  currentShape=currentShape%3;
}

    Every time there is a mouse event, currentShape is increased by one. You need to make sure that currentShape takes only valid values. Since there are three figures labeled from 0 to 2, then we have to check we don't overflow. The modulo op is one way. Another standard way is

    void mouseReleased(){
  currentShape++;
  if(currentShape==3){
      currentShape=0;
  }
}

    I hope this helps,

    Kf

Sign In or Register to comment.