WEBVTT

00:00.000 --> 00:20.500
Hi everyone, my name is Andrean De Castro, I'm a designer and I've been in creative

00:20.500 --> 00:28.880
coding for about 3 years now and today I'm gonna go through a tutorial where I create

00:28.880 --> 00:36.600
a 3D shape with motion.

00:36.600 --> 00:40.600
We can create something like this.

00:40.600 --> 00:56.040
Begin with, we're gonna create a grid.

00:56.040 --> 01:06.920
Just gonna set up my processing here.

01:06.920 --> 01:29.560
First of all, we'll create a nested loop.

01:29.560 --> 01:43.600
And we just have to initialize calls and rows.

01:43.600 --> 01:51.600
Can be any number we want.

01:51.600 --> 02:06.000
Afterwards, I'm gonna put them into this push and pop, which we can draw an ellipse

02:06.000 --> 02:11.000
here with i and j.

02:11.000 --> 02:30.040
And we'll say, we'll create some space between them so we can see the grid.

02:30.040 --> 02:42.200
It works but I kinda want a way to create the grid where it's gonna fit the size of

02:42.200 --> 02:44.640
the screen.

02:44.640 --> 02:52.240
And I have a way to do that by using the map function.

02:52.240 --> 03:04.360
So we can create, we can map i to the number of rows and we want that between 0 and the

03:04.360 --> 03:05.360
width.

03:05.360 --> 03:11.080
And that should be a comma.

03:11.080 --> 03:35.080
And we can do that for y as well.

03:36.080 --> 03:39.360
Sorry, that has to be j.

03:39.360 --> 03:49.560
This ensures that our grid will always fit the size of our canvas.

03:49.560 --> 03:55.920
And now we can maybe add some motion to it.

03:55.920 --> 04:00.880
We can call it flow wave, for example.

04:00.880 --> 04:07.880
We're gonna use the sine function.

04:07.880 --> 04:16.840
And we want to times it by how big we want the wave to be.

04:16.840 --> 04:24.480
And we can apply that to the x and y.

04:25.080 --> 04:33.000
Okay, we can see there's a wave but it's not moving.

04:33.000 --> 04:36.160
So now we need to add a time variable.

04:36.160 --> 04:39.240
Create that quickly.

04:39.240 --> 04:53.520
T, float t for time and I'm gonna create a speed which can be 0.05.

04:53.560 --> 05:03.440
And outside the loop here, we can do time equals speed, so t plus equals speed.

05:03.440 --> 05:11.120
And we can add that to the wave.

05:11.120 --> 05:14.560
Nice.

05:14.600 --> 05:25.600
And we can play around with this by just changing up the numbers here, creating a bigger wave,

05:25.600 --> 05:28.600
for example.

05:28.600 --> 05:31.600
Great.

05:31.600 --> 05:42.560
Now you can get really creative with this, but for the sake of this tutorial, we're gonna

05:42.600 --> 05:49.160
turn this 2D grid into a 3D sphere.

05:49.160 --> 06:01.080
And for this 3D sphere, we're gonna take this parametric equation, which x, y, and z will

06:01.080 --> 06:09.360
equals the radius times the sine theta times cosine phi.

06:09.360 --> 06:27.280
And where theta varies from 0 to pi and phi varies from 0 to 2 pi.

06:27.280 --> 06:38.400
So with that, we won't really need x and y anymore, so we can get rid of that.

06:38.440 --> 06:42.440
So we'll just vary this.

06:42.440 --> 06:55.440
And first we'll initialize theta, which is pi, divided by the number of calls, let's

06:55.440 --> 06:56.440
say.

06:56.440 --> 07:07.440
And float phi, which would be 2 pi divided by the number of rows.

07:07.480 --> 07:25.480
And we'll create x, which would be the radius times sine.

07:25.520 --> 07:37.520
And we'll do j times theta times cosine of i times phi.

07:37.520 --> 07:48.520
We have to create an integer called g radius, which is the radius, how big we want the sphere

07:48.520 --> 07:49.520
to be.

07:49.520 --> 07:53.520
So we can just say 400.

07:53.560 --> 08:00.560
And we have to do this for y and z.

08:06.560 --> 08:13.560
This is sine, and this has to be cosine.

08:17.560 --> 08:18.560
Nice.

08:18.600 --> 08:23.600
And then we have to remember to use the P3D renderer.

08:26.600 --> 08:35.600
And push and pop becomes push matrix and pop matrix when using the P3D renderer.

08:37.600 --> 08:44.600
And now we want to put x, y, and z, and we can put it into translate.

08:44.640 --> 08:54.640
We can do fill 255, no strokes.

08:56.640 --> 09:05.640
We're going to use the sphere built-in function, and we'll do the sphere detail maybe 20.

09:06.640 --> 09:12.640
And the sphere itself, how big we want the sphere to be, maybe 5.

09:14.640 --> 09:15.640
Nice.

09:15.640 --> 09:29.640
We can see it works, but it's kind of in the corner of the canvas, so we can fix that by

09:29.640 --> 09:35.640
translating it into the middle of our canvas.

09:40.640 --> 09:41.640
Great.

09:41.680 --> 09:50.680
But we can kind of see it from a top point of view, like a bird's view.

09:52.680 --> 09:59.680
We can actually import a library called peasy, which would be here.

10:01.680 --> 10:10.680
And with peasy cam, we can control the shape, how we want to see the shape.

10:11.680 --> 10:21.680
The peasy cam is like a camera within P3D, so we can kind of have like a 360 view of

10:21.680 --> 10:25.680
the shape, and we can control it using our mouse.

10:28.680 --> 10:34.680
And we can just call cam new peasy cam.

10:34.720 --> 10:47.720
This, and this can be just kind of how zoomed in we want it on initial click.

10:51.720 --> 10:52.720
Great.

10:52.720 --> 10:58.720
But now because we're using peasy cam, we don't need to translate it into the middle

10:58.760 --> 11:03.760
anymore, just because it translates into the middle for us.

11:03.760 --> 11:05.760
We can get rid of this.

11:10.760 --> 11:11.760
And yeah.

11:11.760 --> 11:14.760
Now here we have a simple sphere.

11:17.760 --> 11:22.760
And we can try adding back the wave to it.

11:22.800 --> 11:32.800
So we can do that by, let's say, let's create a float called gWave, which is wave

11:32.800 --> 11:37.800
at the radius, gRadius.

11:49.800 --> 11:50.800
Perfect.

11:50.840 --> 11:52.840
Kind of works.

11:55.840 --> 11:58.840
Let's change some values here.

12:04.840 --> 12:05.840
Okay.

12:07.840 --> 12:08.840
Maybe.

12:18.840 --> 12:19.840
Okay.

12:20.840 --> 12:23.840
Now we can kind of see the wave working.

12:23.840 --> 12:27.840
And you can do a lot with this.

12:27.840 --> 12:32.840
Change the values, how big we want it.

12:32.840 --> 12:37.840
We can play around with the number of spheres.

12:37.840 --> 12:47.840
But now, instead of using shapes, I want to use switch that out, and I want to use type

12:47.840 --> 12:48.840
instead.

12:50.840 --> 12:54.840
We need to create a string.

12:54.840 --> 12:58.840
Let's call it s.

13:03.840 --> 13:09.840
And this will act as our row.

13:11.840 --> 13:15.840
And we have to create an array of string.

13:15.840 --> 13:19.840
I'll call it sentence, sen for short.

13:20.840 --> 13:30.840
And I'm going to split the string s here, so we can get all the individual letters.

13:31.840 --> 13:40.840
And I'm going to create a float called sen l, which stands for sentence length.

13:41.840 --> 13:47.840
So we can get the length of the string.

13:47.880 --> 13:51.880
So we won't need rows anymore.

13:52.880 --> 14:00.880
And everything that was rows before, we replace it with sen l.

14:07.880 --> 14:12.880
And we don't need to use sphere anymore.

14:12.920 --> 14:16.920
Instead, we're going to use text.

14:16.920 --> 14:21.920
So I'm just going to align the text in the center.

14:21.920 --> 14:25.920
Text size 18, let's say.

14:25.920 --> 14:29.920
And text.

14:31.920 --> 14:37.920
We need an array, which we put i.

14:42.920 --> 14:46.920
It worked.

14:47.920 --> 14:53.920
Oh, we can actually see that it's backwards here, so we can just reverse this.

14:53.920 --> 14:56.920
So minus 2 instead of 2.

14:56.920 --> 15:00.920
And that should fix the problem.

15:00.920 --> 15:06.920
But with using text, we can use our own fonts.

15:06.960 --> 15:14.960
And we can do that by just creating our own, by using pfont here.

15:14.960 --> 15:18.960
We'll call it font.

15:18.960 --> 15:26.960
And with font, we can create font, and we can load in any of our text.

15:26.960 --> 15:32.960
You can do that by maybe importing, adding a file, sorry.

15:33.000 --> 15:37.000
Processing has some built-in typefaces.

15:37.000 --> 15:45.000
But for now, I'm going to use a font I've already added to my sketch.

15:45.000 --> 15:49.000
And that's Active Grow Text.

15:49.000 --> 15:53.000
And you can, of course, use any typeface you want.

15:55.000 --> 15:59.000
And here, it can be any number, but

15:59.040 --> 16:05.040
we just want it to be bigger than what we would want to use.

16:05.040 --> 16:11.040
So here, we can call text font,

16:11.040 --> 16:17.040
font, and let's say 18.

16:17.040 --> 16:21.040
Great.

16:21.040 --> 16:25.040
Yep.

16:25.080 --> 16:29.080
And of course, you can load in any fonts you want.

16:29.080 --> 16:33.080
But now, we can kind of see it's working.

16:37.080 --> 16:41.080
And I'll create a slight adjustment just to make this motion look better.

16:41.080 --> 16:45.080
I want the angle to go along with the wave.

16:45.080 --> 16:49.080
So we can do that by using rotateX.

16:49.080 --> 16:53.080
So...

16:53.120 --> 16:57.120
I'm adding a wave to it.

16:57.120 --> 17:01.120
Just so

17:01.120 --> 17:05.120
the letters would rotate on the x-axis

17:05.120 --> 17:09.120
with the wave.

17:15.120 --> 17:19.120
And to clean this globe up a bit,

17:19.160 --> 17:23.160
we can kind of calculate the radius

17:23.160 --> 17:27.160
and change the text size according to the size

17:27.160 --> 17:31.160
of the radius. Just so

17:31.160 --> 17:35.160
it will be smaller at the top where the radius is smaller, and it will get bigger

17:35.160 --> 17:39.160
as soon as we get to the wider parts in the middle.

17:39.160 --> 17:43.160
So we can

17:43.160 --> 17:47.160
create a float, let's call it thisRadius.

17:47.200 --> 17:51.200
And we'll calculate the size of the radius

17:51.200 --> 17:55.200
by taking

17:55.200 --> 17:59.200
the radius and timesing it by sine

17:59.200 --> 18:03.200
theta times

18:03.200 --> 18:07.200
j.

18:07.200 --> 18:11.200
And we can create a text, we can create a float

18:11.200 --> 18:15.200
called, we can call it textSize

18:15.240 --> 18:19.240
and it will be 2 times pi

18:19.240 --> 18:23.240
times this radius

18:23.240 --> 18:27.240
and I want to divide it by

18:31.240 --> 18:35.240
the sum terms length, so sine alpha and

18:35.240 --> 18:39.240
maybe 1.5.

18:45.240 --> 18:49.240
Okay.

18:49.240 --> 18:53.240
There's a bit of an error

18:53.240 --> 18:57.240
and we can just fix that by adding 0.1

18:57.240 --> 19:01.240
because processing doesn't like it if your text

19:01.240 --> 19:05.240
is 0, it has to be bigger than 0.

19:05.240 --> 19:09.240
Nice, and now we see

19:09.240 --> 19:13.240
it worked. The

19:13.280 --> 19:17.280
shape looks more filled

19:17.280 --> 19:21.280
and yeah.

19:21.280 --> 19:25.280
And now we can do a lot with this, we can play around maybe

19:25.280 --> 19:29.280
with the size, like before.

19:35.280 --> 19:39.280
And we can play around with maybe the number of texts.

19:39.320 --> 19:43.320
Columns

19:43.320 --> 19:47.320
the more we add the more detailed it will be

19:47.320 --> 19:51.320
and yeah

19:51.320 --> 19:55.320
I hope that was helpful, I hope you learned something new

19:55.320 --> 19:59.320
and happy coding.

20:09.280 --> 20:13.320
Thanks for watching!