Star Field: Progress Report

As I mentioned in the previous blog, I was brainstorming about some ideas to celebrate Telescope's 3000th issue and pull request. Last week, I have decided to go with the idea about the Star Field with our beautiful faces😎.

Although I haven't finished implementing the whole feature completely, you can see my progress here. I had a few bugs which have to be fixed which I filed the issues for here: bug1🐛, bug2🐛. Those are interesting bugs😁, I don't recommend you to look at the star field before they get fixed, because your eyes might hurt a bit😵🤪.

Star Field Implementation

To implement this feature, I used the Coding Train's video as an inspiration and guidance resource.

I had to adapt the code from regular JavaScript to React JavaScript using a wrapper called react-p5-wrapper.

The hardest part was figuring out the images. There were 2 steps:

1. Getting the profile images of our contributors: I had to use GitHub's API to get the data. With that, I could use a list of URLs to get the images themselves. Then, I had to pass those image URLs to the p5 wrapper and load the images using the loadImage function.

2. Making those images have a round shape, because they were squared shaped originally. I was difficult because there is no explicit option to do that in p5.js. The way I solved it was playing around with the shapes that I could draw in p5.js, so that I could get rid of the corners of the square and get the circle shape.

Some more details about removing the corners:

After I got all the URLs of images, I noticed that they weren't shaped the way I needed them to. They all were square shaped. So I needed to make the profile images to be of a circle shape, because that's how they will look more like stars.

Unfortunately, in p5.js, you cannot just erase the corners that easily. I couldn't use any shapes, like triangle to draw because then I would end up with a diamond shape of an image. I would have to use something like a triangle with a curved bottom. But since there is no such shape in p5.js, I had to come up with a more complicated, BUT working😅😅, solution.

How???

So I thought, why don't I just leave the shape as is, but add an extra shape inside of that, that can colour the borders to be transparent, but not the inside?

So to me, it had to be a circle that had no filling, and a border that was thick enough to cover the corners of the square and transparent, to actually get rid of the corners.

Then, there was some math thingy involved:

const strokeWeight = innerCircleRadius * (p5.sqrt(2) - 1) * 2;
starGraphic.blendMode(starGraphic.REMOVE as typeof starGraphic.ADD);
starGraphic.stroke(0, 0, 0, 255);
starGraphic.strokeWeight(strokeWeight);
starGraphic.square(
  -strokeWeight / 2,
  -strokeWeight / 2,
  side + strokeWeight,
  innerCircleRadius + strokeWeight / 2
);

I used a square instead of the circle to position the shape more easily. The border's thickness will depend on the size of the image profile.

TA - DA

🥳🥳🥳