# How to create an drawing evolution for a clock

**URL:** <https://discourse.processing.org/t/how-to-create-an-drawing-evolution-for-a-clock/17288>\
**Category:** Coding Questions\
**Created:** [January 23, 2020, 5:25pm UTC](https://discourse.processing.org/t/how-to-create-an-drawing-evolution-for-a-clock/17288 "2020-01-23T17:25:20Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![marcucci](https://avatars.discourse-cdn.com/v4/letter/m/57b2e6/32.png) [@marcucci](https://discourse.processing.org/u/marcucci)\
**Post date:** [January 23, 2020, 5:25pm UTC](https://discourse.processing.org/t/how-to-create-an-drawing-evolution-for-a-clock/17288/1 "2020-01-23T17:25:20Z")

</div>

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 🙂 thank you

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 23, 2020, 6:13pm UTC](https://discourse.processing.org/t/how-to-create-an-drawing-evolution-for-a-clock/17288/2 "2020-01-23T18:13:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![marcucci](https://avatars.discourse-cdn.com/v4/letter/m/57b2e6/32.png) [@marcucci](https://discourse.processing.org/u/marcucci)\
**Post date:** [January 23, 2020, 9:00pm UTC](https://discourse.processing.org/t/how-to-create-an-drawing-evolution-for-a-clock/17288/3 "2020-01-23T21:00:46Z")

</div>

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 :

```auto
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 :

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![marcucci](https://avatars.discourse-cdn.com/v4/letter/m/57b2e6/32.png) [@marcucci](https://discourse.processing.org/u/marcucci)\
**Post date:** [January 23, 2020, 10:24pm UTC](https://discourse.processing.org/t/how-to-create-an-drawing-evolution-for-a-clock/17288/4 "2020-01-23T22:24:15Z")

</div>

![Capture d’écran 2020-01-23 à 23.22.27](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9b40829a47ab39d2688b82a379a4dbf0aed219d7.jpeg)

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [January 23, 2020, 11:23pm UTC](https://discourse.processing.org/t/how-to-create-an-drawing-evolution-for-a-clock/17288/5 "2020-01-23T23:23:36Z")

</div>

Beautiful sketches, @marcucci, and welcome.

> Please help us to **help you** by editing your original code post and [formatting your code](https://discourse.processing.org/faq#format-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.

---

<div class="post-metadata">

**Author:** ![marcucci](https://avatars.discourse-cdn.com/v4/letter/m/57b2e6/32.png) [@marcucci](https://discourse.processing.org/u/marcucci)\
**Post date:** [January 24, 2020, 12:10am UTC](https://discourse.processing.org/t/how-to-create-an-drawing-evolution-for-a-clock/17288/6 "2020-01-24T00:10:01Z")

</div>

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

```auto
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

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 24, 2020, 7:31am UTC](https://discourse.processing.org/t/how-to-create-an-drawing-evolution-for-a-clock/17288/7 "2020-01-24T07:31:42Z")

</div>

You have to merge this

One setup and one draw one after another

Show your attempt, the entire code

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [January 24, 2020, 10:07pm UTC](https://discourse.processing.org/t/how-to-create-an-drawing-evolution-for-a-clock/17288/8 "2020-01-24T22:07:35Z")

</div>

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?