# Animated prototype of interface
**URL:** https://discourse.processing.org/t/animated-prototype-of-interface/18409
**Category:** Beginners
**Created:** [March 5, 2020, 11:02am UTC](https://discourse.processing.org/t/animated-prototype-of-interface/18409 "2020-03-05T11:02:07Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@eugenie](https://discourse.processing.org/u/eugenie)
#### Post date: [March 5, 2020, 11:02am UTC](https://discourse.processing.org/t/animated-prototype-of-interface/18409/1 "2020-03-05T11:02:07Z")
Hello everybody 🙂
Sory for my English
For my internship, I have to try to present different animated prototypes interface. I was advised to use “processing” to design these prototypes. The point is that I have no knowledge in coding.
For the composition of my interface: there is an ideal path in 3D to follow like as in this example: [https://youtu.be/N60lBZDEwJ8?t=97](https://youtu.be/N60lBZDEwJ8?t=97)
(except that I just need simple curves without decor or colors, to delimit my path). I don’t need to use precise measures and proportions but just an approximate path shape based on this model:  ).
There is also a pointer on the screen (circle-shaped) which moves at constant speed and moves according to how the user is handling a pointing device.
The pointer stops advancing when it is off the path and the user has to move the pointer (towards the left or the right) so that it comes back on the path and moves forward. The goal is to reach the end of the path.
For the moment, I have just that:
```auto
size(600,600,P3D);
smooth();
translate(300,400,0);
sphere(50);
noFill();
bezier (125,600,60,350,80,320,300,100);
```
I don’t understand why my lines are not on the good position
I don’t know if I’m clear?
Thanks for your help
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 5, 2020, 11:10am UTC](https://discourse.processing.org/t/animated-prototype-of-interface/18409/2 "2020-03-05T11:10:39Z")
You are working in 3D
Why?
Is it necessary? Try P2D
---
### Author:  [@eugenie](https://discourse.processing.org/u/eugenie)
#### Post date: [March 5, 2020, 11:11am UTC](https://discourse.processing.org/t/animated-prototype-of-interface/18409/3 "2020-03-05T11:11:56Z")
Yes, it is necessarly in 3D for different reason too complicated to explain
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 5, 2020, 11:14am UTC](https://discourse.processing.org/t/animated-prototype-of-interface/18409/4 "2020-03-05T11:14:04Z")
Just to check please try 2D for a moment
Does it look better?
For analyzing how the problem occurs
---
### Author:  [@debxyz](https://discourse.processing.org/u/debxyz)
#### Post date: [March 5, 2020, 5:26pm UTC](https://discourse.processing.org/t/animated-prototype-of-interface/18409/5 "2020-03-05T17:26:34Z")
Welcome to the forum!
Just to clarify. This is ALL of your code?
> [@eugenie](#):
>
> For the moment, I have just that:
>
> size(600,600,P3D);
> smooth();
> translate(300,400,0);
> sphere(50);
> noFill();
> bezier (125,600,60,350,80,320,300,100);
Because at end of your post you say:
> [@eugenie](#):
>
> I don’t understand why my lines are not on the good position
I ran your code in [openprocessing.org](http://openprocessing.org) and it looks like this:
This must be the circle-shaped pointer you refer to.
But where in your code are the path lines you are referring to?
**Please double check that you have included all code connected with the sketch.** Then it will be easier for forum members to answer your question!
🙂
You also say in your post:
> [@eugenie](#):
>
> The point is that I have no knowledge in coding.
**Which raises another issue in how to best answer your question.**
But first, if you have more code, please post it. Or, if not, please let us know that too.
🙂
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 5, 2020, 6:49pm UTC](https://discourse.processing.org/t/animated-prototype-of-interface/18409/6 "2020-03-05T18:49:18Z")
here is a version where you not only see the sphere
For animation though, you need setup() and draw() functions - see here [https://www.processing.org/tutorials/overview](https://www.processing.org/tutorials/overview), section Hello mouse
```auto
size(600, 600, P3D);
lights();
smooth();
translate(0, 0, 0);
noFill();
for (int i=0; i<15; i++) {
bezier (125, 600, // anchor point
60+i*15, 350, // control point
80+i*15, 320, // control point
300, 100); // anchor point
}
noStroke();
fill(255, 0, 0);
translate(500, 400, 0);
sphere(53);
```