forked from OpeningDesign/Bonsai_Tutorials
236 lines
4.6 KiB
Text
236 lines
4.6 KiB
Text
1
|
|
00:00:00,000 --> 00:00:07,200
|
|
If we open this drawing here, the one we've been working on, we scroll down to the layer
|
|
|
|
2
|
|
00:00:07,200 --> 00:00:09,060
|
|
underneath the slab.
|
|
|
|
3
|
|
00:00:09,060 --> 00:00:13,200
|
|
That layer is the gravel layer, the compacted gravel.
|
|
|
|
4
|
|
00:00:13,200 --> 00:00:20,100
|
|
We don't have a pattern yet in our assets folder for gravel.
|
|
|
|
5
|
|
00:00:20,100 --> 00:00:24,700
|
|
So we could either make one like an Inkscape or whatever, or there's another option where
|
|
|
|
6
|
|
00:00:24,700 --> 00:00:30,180
|
|
you can actually just pull down an SVG pattern from the web.
|
|
|
|
7
|
|
00:00:30,180 --> 00:00:36,740
|
|
And so there's a number of sources out there if you just want to search SVG pattern.
|
|
|
|
8
|
|
00:00:36,740 --> 00:00:37,820
|
|
Here's a couple of sites.
|
|
|
|
9
|
|
00:00:37,820 --> 00:00:42,700
|
|
I like to use this pattern monster here.
|
|
|
|
10
|
|
00:00:42,700 --> 00:00:51,860
|
|
You can see there's various different options you can use.
|
|
|
|
11
|
|
00:00:51,860 --> 00:00:56,780
|
|
So I've kind of off camera found the one that I kind of like.
|
|
|
|
12
|
|
00:00:56,780 --> 00:01:04,860
|
|
And you can click on Inspire Me to get different pattern variations and change certain things.
|
|
|
|
13
|
|
00:01:04,860 --> 00:01:09,660
|
|
So ultimately, I settled on this pattern here.
|
|
|
|
14
|
|
00:01:09,660 --> 00:01:15,420
|
|
And so you can say Copy SVG into your clipboard.
|
|
|
|
15
|
|
00:01:15,420 --> 00:01:24,740
|
|
And then go to your patterns SVG file here in your assets folder.
|
|
|
|
16
|
|
00:01:24,740 --> 00:01:34,860
|
|
And you'll scroll through the document to kind of see the patterns essentially that
|
|
|
|
17
|
|
00:01:34,860 --> 00:01:36,980
|
|
the file is following.
|
|
|
|
18
|
|
00:01:36,980 --> 00:01:45,620
|
|
So it looks like every new pattern is surrounded by a pattern tag.
|
|
|
|
19
|
|
00:01:45,620 --> 00:01:50,080
|
|
And then every pattern has an ID and some other stuff.
|
|
|
|
20
|
|
00:01:50,080 --> 00:01:55,260
|
|
So there's certain patterns within the pattern file that we want to follow.
|
|
|
|
21
|
|
00:01:55,260 --> 00:02:02,400
|
|
So I'm going to take that copy and paste, and I'm just going to paste it in here.
|
|
|
|
22
|
|
00:02:02,400 --> 00:02:10,420
|
|
And I'm just going to format this just so it's easier to see.
|
|
|
|
23
|
|
00:02:10,420 --> 00:02:16,240
|
|
So here you can see the copy and paste already has kind of that pattern established.
|
|
|
|
24
|
|
00:02:16,240 --> 00:02:22,480
|
|
So we want to just get rid of those tags.
|
|
|
|
25
|
|
00:02:22,480 --> 00:02:28,380
|
|
And again, format it.
|
|
|
|
26
|
|
00:02:28,380 --> 00:02:30,400
|
|
And we want to give it an ID.
|
|
|
|
27
|
|
00:02:30,400 --> 00:02:34,400
|
|
So we'll say gravel.
|
|
|
|
28
|
|
00:02:34,400 --> 00:02:39,720
|
|
And it looks like all this other stuff.
|
|
|
|
29
|
|
00:02:39,720 --> 00:02:40,720
|
|
This changes scale.
|
|
|
|
30
|
|
00:02:40,720 --> 00:02:45,680
|
|
I know from working on this before, the scale is going to be way off.
|
|
|
|
31
|
|
00:02:45,680 --> 00:02:47,320
|
|
So I'm going to change it to 01.
|
|
|
|
32
|
|
00:02:47,320 --> 00:02:51,620
|
|
And I'm going to save it.
|
|
|
|
33
|
|
00:02:51,620 --> 00:03:02,060
|
|
And then in our default CSS, then we have to create a new rule to point to that pattern.
|
|
|
|
34
|
|
00:03:02,060 --> 00:03:04,220
|
|
And so I kind of made it off camera.
|
|
|
|
35
|
|
00:03:04,220 --> 00:03:05,220
|
|
Here's that rule.
|
|
|
|
36
|
|
00:03:05,220 --> 00:03:08,700
|
|
I'm just going to get rid of the comments here.
|
|
|
|
37
|
|
00:03:08,700 --> 00:03:12,460
|
|
So it's materials category slash gravel on the fill.
|
|
|
|
38
|
|
00:03:12,460 --> 00:03:18,820
|
|
And this means it's pointing to that pattern in the patterns SVG.
|
|
|
|
39
|
|
00:03:18,820 --> 00:03:21,739
|
|
So I'm going to save that.
|
|
|
|
40
|
|
00:03:21,739 --> 00:03:29,500
|
|
And so now going back to the bonsai file, if we run the drawing, hopefully that pattern
|
|
|
|
41
|
|
00:03:29,500 --> 00:03:38,140
|
|
will show up in the gravel base.
|
|
|
|
42
|
|
00:03:38,140 --> 00:03:39,579
|
|
So it did not show up.
|
|
|
|
43
|
|
00:03:39,579 --> 00:03:40,579
|
|
What did it?
|
|
|
|
44
|
|
00:03:40,579 --> 00:03:41,579
|
|
Yes, it did.
|
|
|
|
45
|
|
00:03:41,579 --> 00:03:44,540
|
|
It was just too small.
|
|
|
|
46
|
|
00:03:44,540 --> 00:03:50,820
|
|
So you just go back to your patterns file there.
|
|
|
|
47
|
|
00:03:50,820 --> 00:03:52,500
|
|
And let's just change the scale.
|
|
|
|
48
|
|
00:03:52,500 --> 00:03:54,500
|
|
I think it went too small.
|
|
|
|
49
|
|
00:03:54,500 --> 00:03:55,500
|
|
The 0.1.
|
|
|
|
50
|
|
00:03:55,500 --> 00:04:03,260
|
|
And go back and run it.
|
|
|
|
51
|
|
00:04:03,260 --> 00:04:05,180
|
|
There you go.
|
|
|
|
52
|
|
00:04:05,180 --> 00:04:11,340
|
|
So you can, just like the other fills and patterns, you can change these colors too,
|
|
|
|
53
|
|
00:04:11,340 --> 00:04:13,620
|
|
if you'd like.
|
|
|
|
54
|
|
00:04:13,620 --> 00:04:18,540
|
|
You know, that's the fill color and then the stroke color.
|
|
|
|
55
|
|
00:04:18,540 --> 00:04:26,340
|
|
So if you want to change that to red or whatever, certainly can.
|
|
|
|
56
|
|
00:04:26,340 --> 00:04:27,340
|
|
Save it and then run it again.
|
|
|
|
57
|
|
00:04:27,340 --> 00:04:28,340
|
|
See what happens.
|
|
|
|
58
|
|
00:04:28,340 --> 00:04:29,340
|
|
There you go.
|
|
|
|
59
|
|
00:04:29,340 --> 00:04:30,340
|
|
Red gravel.
|
|
|