Highlighted Code:

noStroke();
for (let i = ringRadius.length - 1; i >= 0; i--) {
  if (i >= ringsGrown) {
    continue;
  }
  if (year[i] <= zayedLastYear) {
    fill(zayedWood[0]);
  } else {
    fill(laterWood[0]);
  }
  ellipse(centreX, centreY, ringRadius[i] * 2, ringRadius[i] * 2);
}

I think this is the one I’d want to show you first, because its the thing the entire thing relies on and it might not be obvious just looking at it but it is.

So this is everyone of those 54 rings, each of them is a filled circle and they are drawn the biggest first and then each circle covers up the middle and the one before it. So whats left of each is circle is only the small thin band around its edge and that band is what you use to read it as a ringe. And its also how a real trunk works! The old wood is on the inside, the old on the outside.

Thats why I made the loop go backwards here, if it counted up the way loops normally do then the small circles would go down first andthen get completely buried by the big ones and you’d just have a big brown circle.

The continue is the animation itself, so any ring thats further out than the tree thats grown, gets skipped so the trunk just fills in from the middle and goes outwards.

ringsGrown = (frameCount - framesAtStart) / framesPerRing;

if (ringsGrown >= ringRadius.length) {
  ringsGrown = ringRadius.length;
  stillGrowing = false;
}

function mousePressed() {
  ringsGrown = 0;
  stillGrowing = true;
  framesAtStart = frameCount;
}

This is also a huge part of the animation. frameCouint essentially counts every frame since the sketch starts and so it divides it by the ‘frames per ring’ gives it a slow and steady build up. The reason I take framesAtStart away is replaying, frame count is never going to reset so on a second run it might be at 4000 and if I dont subtract it the tree would appear grown instantly. The mouse pressed part is essentially setting framesAtStart to whatever the frame count is at that time and puts it back at zero and restarts it again.

let distanceFromCentre = dist(mouseX, mouseY, centreX, centreY);

let found = -1;
for (let i = 0; i < ringRadius.length; i++) {
  if (found === -1 && ringRadius[i] >= distanceFromCentre) {
    found = i;
  }
}


noFill();
stroke(paper[0]);
strokeWeight(1.6);
ellipse(centreX, centreY, ringRadius[found] * 2, ringRadius[found] * 2);


noStroke();
fill(ink[0]);
rect(width - 262, 156, 166, 54, 4);
fill(paper[0]);
text(year[found], width - 248, 182);
text(addCommas(population[found]) + " people", width - 248, 200);

Once the tree finished growing you could hove over the rings and it tells you the year and the population at that time, I think I’m really proud of this cause the aesthetic it came out as was really nice.

So it only needs to know how far your mouse is from the middle and not which directio your in, cause all of the rings are circles around the same centre so pixels that are 240 out from the middle is 2020 regardless of whether your above the trunk or off to the left.

The loop then starts to go outwards and goes from the centre and finds the first ring that reaches past the mouse. That ring is essentially the one your on. Found starts at -1 which essentially means nothing was found yet at the time and the found === -1 check essentailly stops the loop from overwriting the answer constantly once it already has one.

After that it draws the ring again in a white color so you can see which ring you picked and fills the box in with year and the population.

The box stays in the same corner instead of following the mouse, before I had issues that for some reason it would follow the mouse and kept covering everything and was a mess.

Stuff we didn’t cover:

– Continue: I used it in a for loop, essentially skips the rest of the lap and jumps straight to the next one. I got this after AI helped me with finding the concept of Continue, it doesn’t even have a page for it, I had to look up a tutorial online for Java. Its a nice tutorial, its pretty old though.

– Return: although we did use it in the class, I don’t believe we used it in the context I was using it in. I used it to leave a function early, kind of similar to how I’d do it with python.

How was this made?

• So essentially the three arrays line up with eachother, the year, the population and ringRadius. The fourth one is all three is in the same year. Arrays are the columns and the index is the row and its the parrallel arrays I learned from last assignment on my own.

  The trunk essentially draws from the outside in, so it goes biggest circle first and each one covers the middle of the last, so any of the circle you see is at the band at the edge and the band is the ring. This was to take on the effect of wood, new wood outwards, old ones inwards.

  The animation is one line so as I said before, ringsGrown is framecount minus framesAtStart divided by framesPerRing so it goes from 0 to 55 andthen it stops andthen everything just ignores rings past that specific number.

  I then also brought in the font which is Rakkas, its a nice arabic one that has a nice arabic font even when english is being typed up. It looks nice.

  References: Data is directly from the World Bank, and the idea I used behind this is from the science of reading tree rings which is dendrochronology.

  Use of AI: I used ChatGPT to help me find bugfixes, learn from certain stuff and understand many specific concepts.

• Reflection

• I think the hardest part of this wasn’t just the drawing. I think its coming up and formulating how the entire idea is going to come together and what maps onto what. The code that turns the data into the picture is literally four lines and everything else is literally labels and colours. All the thinking went into choosing that the radius should be the population and that one choice is what makes the gaps come out as the growth of the tree itself and also what causes the 2020 problem where I wasn’t able to highlight it at all.

  I think what I’d change is that it would still be one number over time and that a country isn’t just one number. I think I’d want to change something about who and not just how many. And I think one day I’d want to go back and give the portrait a try one day, it was just sad it didn’t work out.