Drawing Circles onto an Icosahedron

[00:00:00]
>> We have these geometries here. And we're pretty close to this. Actually, all we need to do differently is increase the detail of our icosahedron geometry. That's all we need to do differently in order to get this output. But what we really want is we don't wanna draw spheres on each of these points, we want to draw discs or circles.

[00:00:24]
So we're gonna create a new geometry before our for loop. We're gonna call it circle geom. And we're gonna say new THREE.CircleGeometry and the radius is gonna be one and the segments we can leave it at 32 or 64 or something like that. And then we're just gonna use that instead of the geometry for each of the points around our sphere.

[00:00:53]
And then one last little thing we need to do is make it so that we align each of these circles and we snap them onto the surface of the sphere. And to do that, we're gonna use a utility called lookAt. So we can say mesh.lookAt. And then we'll look at the center, Which is 000, and that's gonna turn each of these meshes towards the center, which is the center of the sphere.

[00:01:23]
And then the last thing maybe is to turn wireframe off and make the points whatever color you'd like the points to be. Now here I'm no longer able to see the points. And so here's where I would start to debug this. Because I would have imagined this would appear the points but maybe it's because they're being blocked by the sphere.

[00:01:45]
So maybe just to test, you don't need to copy this part, maybe just to test. I'm gonna push these out by increasing the position. But what I'm actually starting to see is that it's almost like I'm looking only at the inside of these circles. And maybe what's actually happening is that I'm only rendering one side of the circles.

[00:02:08]
So if I do in my material side is THREE.DoubleSide. Now I should see both sides of these circles. And I can do instead of that I can say front side or back side and you'll see how that would change. So this is the default is front side and it's almost like I'm looking inside of these meshes.

[00:02:30]
If I say backside, now, I'm only gonna see the outside edge, the outside face So I can move my position back down to what it was before, just on the surface of the mesh. And so that's all that I needed to do was just change the side of the material, because I was only seeing the back-facing side, or the front-facing side.

[00:02:53]
So I'm gonna flip that. And so now we actually have kind of a Yayoi Kusama type of a ball. And we can change the detail with the icosahedron back to zero, or one, or two whatever you'd like. You could even randomly set the scale. So you could do scale times Math.random().

[00:03:21]
Just for those who have not used it yet I have some utilities, part of Canvas sketch, called Canvas dash sketch dash util. It's got a lot of utilities around randomness and color and math, this might be a good opportunity to start to use some of the random utility.

[00:03:40]
If you're interested, you don't need to copy this, but if you're interested, you could require this and NPM install it. So for example, I would go into my project that I'm working on, NPM install Canvas/sketch/util. And then I could copy and paste this require statement and bring this into my sketch.

[00:04:04]
And this might be review from those who've already used this, but if not, you could always just try to. You copy this in, you'd require it in your sketch and then you can actually use this random utility to produce some more interesting random values. So instead of always a uniform randomness between zero and one, you could use this, for example, for within a range between 0.25 and one.

[00:04:30]
So that the circles don't get too small. And maybe we'll have to scale that by some small number just to make sure it's not huge. You could also use gaussian randomness. So gaussian randomness is gonna produce values that are sometimes larger than one, sometimes they're gonna be smaller than minus one as well.

[00:04:55]
They could go up to three or four, depending on the values but you'll see it's gonna produce these very drastically different modulations of randomness. So gaussian randomness is sometimes very nice for more organic changes in randomness rather than always making it uniformly between zero and one. But you'll definitely start to see, as we start to get larger and larger circles, we start to see that this sort of approach, it doesn't really work so well.

[00:05:24]
And so this is where we have to take consideration of how do we approach this in a better way where the circles are actually mapped directly onto the surface of the sphere, as opposed to just sitting there as disks on top of the sphere itself. We almost want to change the the fragment shader so that these circles are kind of drawn onto the surface.

[00:05:49]
So that we don't get this kind of ugly effect here that we're getting. So what I'm gonna do is I'm just gonna make it so that this is very, maybe uniform, I'm just gonna do, I'm just gonna leave it as a simple value like 0.1. Maybe multiply that by Math.random() again, just to keep it simple.

[00:06:11]
0.25 or something. And then I'm gonna copy and paste this file and I'm gonna show you an alternative approach again. [LAUGH] So you might be thinking we're just doing the same thing over and over again. But this is really what happens when you start to work with graphics programming.

[00:06:27]
Somebody give you a task. You start to approach that task. And then you realize your approach, although it works, it may not work perfectly. And so you have to slightly shift the approach. And that's kind of what we're working through here is just a realistic exercise, of how we go through these different approaches and how each step, it looks good until we find a bug with it until we find an issue with it and then we have to reevaluate and try to figure out what do we do next.

[00:06:56]
And so I'm just gonna go in copy and paste this file, just to have it on hand in case I want to come back to it. You might want to start renaming these just to be more descriptive. I'm gonna rename this to be circles-on-sphere.