How to create an drawing evolution for a clock

Hey Guys,
I’m completely new to processing and i’m trying to build a clock.
I drawed a tree on illustrator which grow up over time.I don’t know what i can do. The idea of the clock is when the hour is finish, the tree are finish to grow up too. Maybe somebody can help me :slight_smile: thank you

1 Like

Nice idea! Sounds great!

Welcome to the forum! Great to have you here!

Look at hour() and minute in the reference on the website.

When minute is zero, a new hour starts. Reset the tree then once (!).

Does the tree grow in processing also, as code? I didn’t fully understand. Or do you have images of the phases of the growing?

Then have 2 trees, one for hours - 0 to 23, one for minutes, 0 to 59.

You need to map the speed of the growth to these ranges. We need probably to see your tree code for this.

Regards,
Chrisir

1 Like

Thank you for your answer, the tree is a drawing create on illustrator, but unfortunately the tree does have not a code, I have a code to create a clock with shapes, and another code to import a drawing of illustrator but I cannot combine the two.

The code for the clock :

float xH, yH, xC, yC, rayonH, angleH, xM, yM, rayonM, angleM, xS, yS, rayonS, angleS;
float diametre;

void setup() {
  size(1000, 1000);
  xC=width/2;
  yC=height/2; 
  rayonH=150;
  angleH=2*PI/12;

  size(1000, 1000);
  xC=width/2;
  yC=height/2; 
  rayonM=200;
  angleM=2*PI/60;

  size(1000, 1000);
  xC=width/2;
  yC=height/2; 
  rayonS=200;
  angleS=2*PI/60;
} 

void draw () {
  background (10);
  xH=xC+rayonH*cos(angleH*hour()-PI/2);
  yH=yC+rayonH*sin(angleH*hour()-PI/2);
  line(xC, yC, xH, yH);
  strokeWeight(5);
  stroke (255, 50, 50);

  xM=xC+rayonH*cos(angleM*minute()-PI/2);
  yM=yC+rayonH*sin(angleM*minute()-PI/2);
  line(xC, yC, xM, yM);
  strokeWeight(5);

  //xS=xC+rayonH*cos(angleM*second()-PI/2);
  //yS=yC+rayonH*sin(angleM*second()-PI/2);
  //line(xC,yC,xS,yS);
  //strokeWeight(1);
  //fill(0);
  //ellipse(xS,yS,20,20);

  diametre=2*second();
  ellipse(xC, yC, diametre, diametre);
  fill(0);
} 

And the code for import a drawing :

PShape maForme;
int zoom = 30;
final static byte inc = 2;

void setup(){
  size(500,500);
  background(400);
  maForme=loadShape("circle.svg");
  maForme.disableStyle();
  stroke(255,100,80);
  fill(1,49,180);
  rectMode(CENTER);
}

void draw(){
  shape(maForme,mouseX+20,mouseY-20); 
     if (mousePressed);
     if  (mouseButton == LEFT)   zoom += inc;
     maForme = loadShape("circle.svg");
      maForme.disableStyle();
  rect(width>>1, height>>1, zoom, zoom);
}
1 Like

This is the tree, I think that since there are twelve trees perhaps the concept of this clock is more: the tree has finished growing after twelve hours, one tree = one hour

if you have an idea it would save me

1 Like

Beautiful sketches, @marcucci, and welcome.

Please help us to help you by editing your original code post and formatting your code.

Now: to begin, notice that a sketch should have one setup() and one draw(). So these should be combined if you are trying to combine two sketches.

Thanks for your answer @jeremydouglass
i tryed but i did not succeed…

float xH,yH,xC,yC, rayonH, angleH, xM,yM, rayonM, angleM,xS,yS,rayonS,angleS;
float diametre;

void setup(){
  size(1000,1000);
  xC=width/2;
  yC=height/2; 
  rayonH=150;
  angleH=2*PI/12;

  size(1000,1000);
  xC=width/2;
  yC=height/2; 
  rayonM=200;
  angleM=2*PI/60;

  size(1000,1000);
  xC=width/2;
  yC=height/2; 
  rayonS=200;
  angleS=2*PI/60;
} 

void draw (){
  background (10);
  xH=xC+rayonH*cos(angleH*hour()-PI/2);
  yH=yC+rayonH*sin(angleH*hour()-PI/2);
  line(xC,yC,xH,yH);
  strokeWeight(5);
  stroke (255,50,50);

  xM=xC+rayonH*cos(angleM*minute()-PI/2);
  yM=yC+rayonH*sin(angleM*minute()-PI/2);
  line(xC,yC,xM,yM);
  strokeWeight(5);

  //xS=xC+rayonH*cos(angleM*second()-PI/2);
  //yS=yC+rayonH*sin(angleM*second()-PI/2);
  //line(xC,yC,xS,yS);
  //strokeWeight(1);
  //fill(0);
  //ellipse(xS,yS,20,20);

  diametre=2*second();
  ellipse(xC,yC,diametre,diametre);
  fill(0);
} 

and the other

PShape maForme;
int zoom = 30;
final static byte inc = 2;

void setup(){
  size(500,500);
  background(400);
  maForme=loadShape("tree.svg");
  maForme.disableStyle();
  stroke(255,100,80);
  fill(1,49,180);
  rectMode(CENTER);
}

void draw(){
  shape(maForme,mouseX+20,mouseY-20); 
     if (mousePressed);
     if  (mouseButton == LEFT)   zoom += inc;
     maForme = loadShape("circle.svg");
      maForme.disableStyle();
  rect(width>>1, height>>1, zoom, zoom);
}
1 Like

You have to merge this

One setup and one draw one after another

Show your attempt, the entire code

1 Like

Begin with one sketch. Try adding elements from the second sketch to the first. Some must be combined.

For example, start with setup(). One aspect is that both setups contain size() – one is 500x500, one is 1000x1000. Your sketch should be one or the other, or some third size. What size do you want your sketch to be?

1 Like