# Question about looping
**URL:** https://discourse.processing.org/t/question-about-looping/45436
**Category:** Beginners
**Created:** [December 6, 2024, 9:47pm UTC](https://discourse.processing.org/t/question-about-looping/45436 "2024-12-06T21:47:36Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@edufissure](https://discourse.processing.org/u/edufissure)
#### Post date: [December 6, 2024, 9:47pm UTC](https://discourse.processing.org/t/question-about-looping/45436/1 "2024-12-06T21:47:36Z")
Hi im having a doubt…
i know that draw is a endless loop, from beginning to las line of code…thats correct…
The doubt cames if i create a function inside draw…lets say MovePacman();
MovePacman have a loop for moving from coordX at 100 to an end point coordX at 300, step 1. So instead of moving directly from x 100 to x 300 ( like a jump), i want a smooth movement one by one pixel to the right ( x from 100 to 300, step 1)
So the draw loop is stopped till for finishes ? Or draw continues executing and “interceps” the for loop ? Like interrupts…
A sample of code because my english is not good:
```auto
let coordX=200;
let coordY=200;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
fill("yellow");
circle(coordX, coordY, 50);
movePacman(); //moving smoothly from coordX 200 to coordX 300
}
function movePacman()
{
while( coordX < 300)
{
fill("yellow");
coordX=coordX+0.001;
circle(coordX,200, 50);
console.log(coordX);
}
}
```
Also the behaviour is weird…
How can i make a smooth transition, and how the draw loop interacts with movePacman while loop…
Thanks
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [December 6, 2024, 10:28pm UTC](https://discourse.processing.org/t/question-about-looping/45436/2 "2024-12-06T22:28:02Z")
> [@edufissure](#):
>
> The doubt comes if I create a function inside draw()… let’s say **movePacman()**.
Top level function **movePacman()** isn’t being “created” inside callback **draw()**, but it’s being “invoked” from **draw()**.
> [@edufissure](#):
>
> So the **draw()** loop is stopped till for finishes?
When we invoke any other function inside a function, the function (the caller) invoking it awaits that invoked function (the callee) until it returns.
Therefore **draw()** will await **movePacman()**'s `while` loop fully.
> [@edufissure](#):
>
> How can I make a smooth transition,
For your **movePacman()** case, you already have variable _coordX_ globally declared.
So you can increment that every time **movePacman()** is invoked:
```auto
"use strict";
var coordX = 200, coordY = 200;
function setup() {
createCanvas(400, 400);
fill("yellow").framerate(60);
}
function draw() {
background(220).circle(coordX, coordY, 50);
movePacman();
}
function movePacman() {
if (coordX < 300) print("coordX:", coordX += .001);
circle(coordX, 200, 50);
}
```
A similar online sketch demo:
> **[Clockwise Pathway Circle - GoToLoop - OpenProcessing](https://openprocessing.org/sketch/902693)**
But a much better solution would be to define a Pacman `class` instead:
> **[Classes - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)**
>
> Classes are a template for creating objects. They encapsulate data with code to work on that data. Classes in JS are built on prototypes but also have some syntax and semantics that are unique to classes.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [December 7, 2024, 12:26am UTC](https://discourse.processing.org/t/question-about-looping/45436/3 "2024-12-07T00:26:38Z")
Exactly.
`draw()` runs on and on but the screen is not updated throughout
but **only once** at the end of `draw ()`.
Therefore you cannot make animations with `while` or `for` loops inside of `draw()`.
(Since the screen is not udated inside the loops you will see only the last frame of the animation at the end of `draw()`.)
Instead you have to use the looping of draw() itself and get rid of the `while` loop.