├── 20_dots.gif
├── README.md
└── sketch_20_dots
    └── sketch_20_dots.pde


/20_dots.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joanp131/20-dots-spinning/b52281afb2a08e150a609c8dd0dad89671fe5a9d/20_dots.gif


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 20-dots-spinning
 2 | This is a project that I wanted to do since I saw a gif of the same thing on [r/oddlysatisfying](https://www.reddit.com/r/oddlysatisfying/comments/bz3yz7/circles_dots_and_lines_oc/?utm_medium=android_app&utm_source=share). When I saw the gif, that contained just 20 dots (Here the Why of the name) i undesrstood how it worked:
 3 | 
 4 | * There are 20 dots, so the gif will last 20 seconds
 5 | 
 6 | * During these 20 seconds the farthest dot will do 20 turns, while the closest to the middle will do just one
 7 | 
 8 | * The dot on the middle does not move
 9 | 
10 | The gif that is in the same repository was created by recording the code while working, it's not the gif I found on [r/oddlysatisfying](https://www.reddit.com/r/oddlysatisfying/comments/bz3yz7/circles_dots_and_lines_oc/?utm_medium=android_app&utm_source=share). I found the autor of the original gif, and he/she did it in geogebra and recorded it with OBS. 
11 | ### __Make sure to take a look at the original [here](https://www.reddit.com/r/oddlysatisfying/comments/bz3yz7/circles_dots_and_lines_oc/?utm_medium=android_app&utm_source=share)!__
12 | 
13 | The code was made and executed in [Processing](https://processing.org/), a Java based programming language.
14 | 
15 | The main code can be found in the sketch_20_dots.pde
16 | 


--------------------------------------------------------------------------------
/sketch_20_dots/sketch_20_dots.pde:
--------------------------------------------------------------------------------
 1 | int num = 26, draw = 0, T = 20;
 2 | float[] x = new float[num], y = new float[num];
 3 | boolean loop = true;
 4 | float time = 0, deltaTime = 0.016; //This 0.016 is the time that elapses from one frame to another 
 5 |                                   //(taking into account that this app runs at 60fps)
 6 | 
 7 | void setup() {
 8 |   size(1020,1020);
 9 |   background(255);
10 |   //noLoop();
11 | }
12 | 
13 | void draw() {
14 |   draw++;
15 |   background(255);
16 |   
17 |   //Set the origin to the center and correct the orientation for the axes
18 |   pushMatrix();
19 |   scale(1, -1);
20 |   translate(width/2, -height/2);
21 |   
22 |   //Draw the dots to its position relative to the time
23 |   for(int i = 0; i < num; i++) {
24 |     noStroke();
25 |     fill(255,0,255);
26 |     
27 |     // The combination of two simple harmonic motions (one vertical and one horizontal) creates a circular motion
28 |     x[i] = 20*i*cos(((2*PI*i)/T)*(time));
29 |     y[i] = 20*i*sin(((2*PI*i)/T)*(time));
30 |     
31 |     
32 |     ellipse(x[i], y[i], 5, 5);
33 |     
34 |     //Draw the lines that connect the dots
35 |     if(i != 0) {
36 |       strokeWeight(1);
37 |       stroke(0);
38 |       line(x[i], y[i], x[i-1], y[i-1]);
39 |     }
40 |   }
41 |   
42 |   time += deltaTime;;
43 |   popMatrix();
44 |   
45 |   //text(int(frameCount/frameRate), 20, 20);
46 |   println(draw);
47 |   
48 |   //Pause the animation the frame before it starts again (to record it and make gifs easier)
49 |   if(draw >= (T / deltaTime)) {
50 |     noLoop();
51 |   }
52 | }
53 | 
54 | void keyPressed() {
55 |   switch (key) {
56 |     //Pause the animation
57 |     case 'k':
58 |       if(loop) {
59 |         noLoop();
60 |         loop = !loop;
61 |       } else {
62 |         loop();
63 |         loop = !loop;
64 |       }
65 |       break;
66 |     //Move forward one frame when the animation is paused
67 |     case 'l':
68 |       //if (!loop) {
69 |         redraw();
70 |       //}
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------