How to map an ellipse to a spiral

TheNoob

Hello guys,

So i really need help with this, i m creating a clock, and what i want is to create 3 ellipses (one for the seconds, one for the minutes and one for the hours), and i want to map them on my spiral, always beginning at the center of the spiral, being the center the 0 second/0 minute/0 hour and when it reaches the end of the spiral (which is the 59 second/minute/hour) the ellipses come to 0 again, like a clock(it is a clock). It would be of a big help if you could help me out with this please, I' m going made with this, thank you once again.

void setup() {
size(320, 320);
smooth();
background(255);
strokeWeight(0);   // Thicker

  drawFibonnaciTiles(500);
}

   void drawFibonnaciTiles(int iterations)
{
 int r = 2;      // red range 0 - 255
 int g = 10;     // green range 0 - 255
 int b = 25;     // blue range 0 - 255
 stroke(1, 255);
 int posx = 81;
 int posy = 125;
 int fibprev = -1;
 int fibnew = 0;
  for (int fib = 15; fib < iterations;) {   
      for (int a = 0; a < 4; a++) {
      fibnew = fib + fibprev;
      fibprev = fib;
      fib = fibnew;
           r = r + 0;
           g = g + 10;
           b = b + 1;
           fill(random(255), random(255), random(255));
           strokeWeight(1);   // Thin
       rect(posx, posy, fib, fib);
      // triangle( posx+2, posy+2, posx-2, posy+2, fibnew, posy-2);
        if (a == 0) {
          strokeWeight(2);   // Thicker
          arc(posx + fib, posy + fib, fib*2, fib*2, PI, TWO_PI-PI/2);
          posx = posx + fib;
          } else if (a == 1) {
              strokeWeight(2);   // Thicker
              arc(posx, posy + fib, fib*2, fib*2, TWO_PI-PI/2, TWO_PI);
              posx = posx - fibprev;
              posy = posy + fib;
              } else if (a == 2) {
                 strokeWeight(2);   // Thicker
                 arc(posx, posy, fib*2, fib*2, 0, PI/2);
                 posx = posx - fib - fibprev;
                 posy = posy - fibprev;
                 } else if (a == 3) {
                   strokeWeight(2);   // Thicker   
                   arc(posx + fib, posy, fib*2, fib*2, PI/2, PI);
                   posy = posy - fib - fibprev;
                 }
             }
          }

  // Clock Border

    rectMode(CENTER);
    noFill();
    strokeWeight(20);
    rect(width/2, height/2, 320, 320);
// save("fibonacci_6");  // save a tif file
}

G_D

You have an issue that seconds and minutes will go from 0 to 59, but only 24 hours in a day, so not exactly sure how you plan to deal with that...Although you could just map

From what it seems, drawFibonnaciTiles(500) gives you 500 segments of the spiral. I'd modify this by creating an array to hold 500 points. What I'd do is t each step in this iteration, is to record the x,y position into an array/arraylist. Do this all in the setup(), that way you only have to record the positions of your Fibonnaci Spiral once.

From that point on, you can just use second(), minute() and hour() functions in your draw() function, and map those values to the total number of segments in your Fibonacci Spiral.

The example at https://processing.org/examples/clock.html should give you a basis for taking seconds/minutes/hours and mapping those to other values. Then take the mapped figure, and use that to retrieve the relevant x,y position on your spiral. If I get a second, I'll try to add this into your code.

G_D

Hmmm, but this won't work, because you are using arcs, not points....

G_D

This might get you close...https://jsfiddle.net/MasterFO/bho3v6hs/2/

TheNoob

Thank you very much for the help! I think that the array is a good ideia, but I' m not very good with arrays specially saving the x, y position of my arc ( yeah i m just that noob xD) I really tried to understand the code that you've sent me, but I just understand some language of Processing, not very much of other java language i m very raw with P5.JS i know its almost the same thing but some code is different, sorry if I' m wasting your time, but i really need help with this :/

koogs

continues here:

https://forum.processing.org/two/discussion/15792/how-to-make-an-array-of-points-to-replace-my-spiral-in-the-same-position