Animated prototype of interface

Processing Beginners
1

Hello everybody :slight_smile:
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
(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:image ).
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:

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

1 Like
2

You are working in 3D

Why?

Is it necessary? Try P2D

3

Yes, it is necessarly in 3D for different reason too complicated to explain

1 Like
4

Just to check please try 2D for a moment

Does it look better?

For analyzing how the problem occurs

1 Like
5

Welcome to the forum!

Just to clarify. This is ALL of your code?

Because at end of your post you say:

I ran your code in openprocessing.org and it looks like this:

Screen Shot 2020-03-05 at 12.05.03 PM
Screen Shot 2020-03-05 at 12.05.03 PM607×602 8.4 KB

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!
:slightly_smiling_face:

You also say in your post:

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.
:slightly_smiling_face:

1 Like
6

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, section Hello mouse

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);
1 Like