# Beginner Question: About Flow

**URL:** <https://discourse.processing.org/t/beginner-question-about-flow/21180>\
**Category:** Coding Questions\
**Created:** [May 22, 2020, 8:58pm UTC](https://discourse.processing.org/t/beginner-question-about-flow/21180 "2020-05-22T20:58:59Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![katjs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/katjs/32/9342_2.png) [@katjs](https://discourse.processing.org/u/katjs)\
**Post date:** [May 22, 2020, 8:58pm UTC](https://discourse.processing.org/t/beginner-question-about-flow/21180/1 "2020-05-22T20:58:59Z")

</div>

Hello people, I’m new here and I really want some help.

I’ve a bit of a problem using P5.

My JS is quite poor and I’m using P5 to get a better understanding from the ground up. So I’m just trying to mess around with variables and I’ve this super simple code, I just want to draw an ellipse that goes around a rectangular canvas starting from the top-left and going clockwise sticking to the brders. I’ve looked around and I’ve seen plenty of possible answers dealing with setting the direction using a negative value and so on but I don’t want to do that but instead want to do it through just controlling the flow using if statements.

Now I can realize that the problem is due to multiple conditions testing for true to the same case and hence the code not running correctly. I can get it halfway through and I even stuck to just hardcoding the x and y values in hopes of figuring out what I was doing wrong or where I was messing up but alas I give up!

I want to know how to get around it by hacking away at this method. Is it possible or do I just need to get some sleep and try again?

```auto
var x = 10;
var y = 10;
function setup() {
	createCanvas(100, 100);
	background(100);
}

function draw() {
	ellipse(x, y, 10, 10);

	if(x <= 90) {
		x++;
	} else if (x >= 90) {
		x = 90;
		y++;
	} else if (y >= 90) {
		y = 90;
		x--;
	} else if (x <= 10) {
		y++;
		x = 10;
	}
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 22, 2020, 9:02pm UTC](https://discourse.processing.org/t/beginner-question-about-flow/21180/2 "2020-05-22T21:02:39Z")

</div>

> [@katjs](#):
>
> … an ellipse that goes around a rectangular canvas starting from the top-left and going clockwise sticking to the borders.

Here’s a Processing’s Java Mode example which can easily be converted to p5.js flavor: ☕  
[Studio.ProcessingTogether.com/sp/pad/export/ro.9DEx177ceWoBc](http://Studio.ProcessingTogether.com/sp/pad/export/ro.9DEx177ceWoBc)

---

<div class="post-metadata">

**Author:** ![katjs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/katjs/32/9342_2.png) [@katjs](https://discourse.processing.org/u/katjs)\
**Post date:** [May 22, 2020, 9:20pm UTC](https://discourse.processing.org/t/beginner-question-about-flow/21180/3 "2020-05-22T21:20:53Z")

</div>

Thank you, that’s exactly the kind of thing I’m hoping to achieve

But I wanted to know what could I do to make it happen without introducing more variables, like how exactly could you do it with just if else statements, no matter how contrived it can get! I went through the code and it seems you’re using a velocity variable? I dunno as I have no clue about Java or Processing at this stage! I hope I’ll start once I get better grip on JS.

---

<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:** [May 22, 2020, 10:44pm UTC](https://discourse.processing.org/t/beginner-question-about-flow/21180/4 "2020-05-22T22:44:23Z")

</div>

Introducing new variables can be good or bad

In my experience it’s good in most cases

My approach would be to use a variable **state** that is

- 0 when we are at the upper border going right, it is
- 1 when we are at the right side and
- 2 when we are at the bottom going left

Now you need some ifs to know when to increase state. These 4 ifs implement each also the current state!

So

```auto
    if (state==0 && x >= .....) 
        state=1; // state ++; 

```

etc.

**Evaluate state**

Next thing you have to do: have a different set of if clauses (for example in another function) to evaluate state and act accordingly.

The trick is to use state and separate

- the evaluation of state where you act according to its value and
- the checks when to increase `state`.

This makes things simpler _because_ we use a new variable! Not _although_.

**your approach**

Anyway in your approach: last if clause must have y–; not ++ (my phone destroys minus minus to a long line, sorry!)

Also, the conditions overlap (first and last one); to avoid this try to say `if(x<=90&&y==10)` and so on

Chrisir

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 23, 2020, 12:10am UTC](https://discourse.processing.org/t/beginner-question-about-flow/21180/5 "2020-05-23T00:10:50Z")

</div>

“Clockwise Pathway Circle” converted from Java Mode to p5.js flavor: *️⃣  
https://www.openprocessing.org/sketch/902693/embed/?

---

<div class="post-metadata">

**Author:** ![katjs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/katjs/32/9342_2.png) [@katjs](https://discourse.processing.org/u/katjs)\
**Post date:** [May 23, 2020, 7:47am UTC](https://discourse.processing.org/t/beginner-question-about-flow/21180/6 "2020-05-23T07:47:30Z")

</div>

I guess you’re right!  
I’m trying this way but it’s getting overtly complicated. I will wrangle with it until I’m able to get it in order.

---

<div class="post-metadata">

**Author:** ![katjs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/katjs/32/9342_2.png) [@katjs](https://discourse.processing.org/u/katjs)\
**Post date:** [May 23, 2020, 7:48am UTC](https://discourse.processing.org/t/beginner-question-about-flow/21180/7 "2020-05-23T07:48:58Z")

</div>

Thank you! I guess the answer lies in the constrainToBorder() function. I’ll now get down to it to make it work in my case with my approach.

---

<div class="post-metadata">

**Author:** ![katjs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/katjs/32/9342_2.png) [@katjs](https://discourse.processing.org/u/katjs)\
**Post date:** [May 23, 2020, 8:37am UTC](https://discourse.processing.org/t/beginner-question-about-flow/21180/8 "2020-05-23T08:37:00Z")

</div>

Finally figured it to make it work through 1 iteration in a very hacky way! 😁 😁

I know it’s absolutely terrible but it was just a case of being obsessed about doing this one particular way. I’ll refactor the entire thing into something which makes sense later. Here is what I came up with!

```auto
var x = 10;
var y = 10;

function setup() {
	createCanvas(100, 100);
	background(100);
}

function draw() {
	ellipse(x, y, 10, 10);

	var horizontal;
	var vertical;
	var horizontalReverse;
	var verticalReverse;

	if (x <= width - 10) {
		horizontal = true;
	} else {
		horizontal = false;
		vertical = true;
	}

	if (y >= height - 10) {
		vertical = false;
		horizontal = false;
		horizontalReverse = true;
	}

	if (x == 5) {
		verticalReverse = true;
		horizontal = false;

	}

	if (horizontal == true) {
		x++;
	}

	if (vertical == true) {
		y++;
	}

	if (horizontalReverse == true) {
		x--;
	}

	if (verticalReverse == true) {
		y--;
	}

}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 23, 2020, 8:41am UTC](https://discourse.processing.org/t/beginner-question-about-flow/21180/9 "2020-05-23T08:41:35Z")

</div>

- Basically the moving [**circle()**](https://p5js.org/reference/#/p5/circle) depends on 2 variables: _loc_ & _vel_.
- Variable _loc_ points to a [p5.Vector](https://p5js.org/reference/#/p5.Vector) object which keeps [**circle()**](https://p5js.org/reference/#/p5/circle)'s current coordinates.
- While variable _vel_ points to a vanilla object which keeps [**circle()**](https://p5js.org/reference/#/p5/circle)'s current velocity & [p5.Color](https://p5js.org/reference/#/p5.Color).

> [@katjs](#):
>
> I guess the answer lies in the **constrainToBorder()** function.

- Indeed **constrainToBorder()** checks whether _loc_ is still constraint within canvas’ [_width_](https://p5js.org/reference/#/p5/width) & [_height_](https://p5js.org/reference/#/p5/height) dimensions.
- Also it takes into consideration the constants RAD ([**circle()**](https://p5js.org/reference/#/p5/circle)'s radius) & SPD ([**circle()**](https://p5js.org/reference/#/p5/circle)'s speed).
- But in order to do that, it needs to check 2 state variables: _vel_ & _isClockwise_.
- Yep, _vel_ has a double duty in this sketch: it is both the current velocity & direction state.
- There are 4 constants which acts as both state & velocity: N, S, W & E (north up, south down, west left & east right).
- Depending on current _vel_ state, **constrainToBorder()** does a customized check.
- And in case the check passes, it switches the _vel_ state to 1 of the pre-customized 2 choices, which depends on _isClockwise_.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 26, 2020, 11:37am UTC](https://discourse.processing.org/t/beginner-question-about-flow/21180/10 "2020-05-26T11:37:11Z")

</div>

A “Clockwise Pathway Circle” Python Mode version too: 🐍

https://trinket.io/embed/python/4f96265ee0?toggleCode=true&runOption=run&start=result

---

<div class="post-metadata">

**Author:** ![katjs](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/katjs/32/9342_2.png) [@katjs](https://discourse.processing.org/u/katjs)\
**Post date:** [June 4, 2020, 6:16pm UTC](https://discourse.processing.org/t/beginner-question-about-flow/21180/11 "2020-06-04T18:16:34Z")

</div>

Well my solution was incomplete, and it had been bothering me intermittently throughout the week. And so I sat down and made it again and finally got it to run continuously. Please tell me if there’s anything wrong with the approach and scope for improvement. Thanks for all the help guys!

```auto
let x = 10;
let y = 10;
let downFlag;
let rightFlag;
let upFlag;
let leftFlag;

function setup() {
  createCanvas(200, 200);
  rectMode(CENTER);
}

function draw() {
  background(220);
  rect(x, y, 10, 10);

  if (x < width - 10) {
    rightFlag = true;
  }

  if (rightFlag && !leftFlag && !upFlag && !downFlag) {
    x++;
  }

  if (x > width - 10) {
    downFlag = true;
    rightFlag = false;
  }

  if (downFlag && !leftFlag && !rightFlag && !upFlag) {
    y++;
  }

  if (y > height - 10) {
    leftFlag = true;
    downFlag = false;
    rightFlag = false;
    upFlag = false;
  }

  if (leftFlag && !rightFlag && !upFlag && !downFlag) {
    x--;
  }

  if (x < 10) {
    upFlag = true;
    leftFlag = false;
    rightFlag = false;
    downFlag = false;
  }

  if (upFlag && !rightFlag && !leftFlag && !downFlag) {
    y--;
  }

  if (y < 10) {
    rightFlag = true;
    upFlag = false;
  }

}

```

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [June 4, 2020, 7:57pm UTC](https://discourse.processing.org/t/beginner-question-about-flow/21180/12 "2020-06-04T19:57:24Z")

</div>

here’s another way to skin the cat …

https://editor.p5js.org/slow_izzm/embed/Va9CSvaK0

[https://editor.p5js.org/slow\_izzm/sketches/Va9CSvaK0](https://editor.p5js.org/slow_izzm/sketches/Va9CSvaK0)

---

<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:** [June 5, 2020, 11:09am UTC](https://discourse.processing.org/t/beginner-question-about-flow/21180/13 "2020-06-05T11:09:23Z")

</div>

> [@katjs](#):
>
> Please tell me if there’s anything wrong with the approach and scope for improvement

In these lines:

> [@katjs](#):
>
> ` if (leftFlag && !rightFlag && !upFlag && !downFlag) {`

You check 4 booleans but only one can be true at a time.

my approach with int state that can have 4 different values is clearer

Chrisir