Add rounding and spacing at the bottom of images
This commit is contained in:
@@ -25,7 +25,7 @@ module hingeBodyHalf() {
|
|||||||
|
|
||||||
Oh no! there now a gap between our `pin` and `hingeBodyHalf`
|
Oh no! there now a gap between our `pin` and `hingeBodyHalf`
|
||||||
|
|
||||||
<Image img={pivotGap} style={{backgroundSize: 'contain'}} />
|
<Image img={pivotGap} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
Here's the fix for that:
|
Here's the fix for that:
|
||||||
|
|
||||||
@@ -54,7 +54,7 @@ Also notice that've we increased the length of the `cylinder` too so that it rea
|
|||||||
|
|
||||||
Much better
|
Much better
|
||||||
|
|
||||||
<Image img={clearancePivot} style={{backgroundSize: 'contain'}} />
|
<Image img={clearancePivot} style={{backgroundSize: 'contain'}} className="pb-8" />
|
||||||
|
|
||||||
We still have more work to do on the pin though. We want to re-use the pin to "subtract" its shape from the other of the hinge, basically we can use our current pint to make a hole.
|
We still have more work to do on the pin though. We want to re-use the pin to "subtract" its shape from the other of the hinge, basically we can use our current pint to make a hole.
|
||||||
Lets make a temporary new module called `pin2` in this new module and we're going to introduce a new function `rotate` to re-orientate the pin
|
Lets make a temporary new module called `pin2` in this new module and we're going to introduce a new function `rotate` to re-orientate the pin
|
||||||
@@ -73,7 +73,7 @@ hingeBodyHalf();
|
|||||||
pin2();
|
pin2();
|
||||||
```
|
```
|
||||||
|
|
||||||
<Image img={rotate} style={{backgroundSize: 'contain'}} />
|
<Image img={rotate} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
This is not where we want to leave our pin, but it's a good way to introduce `rotate` as well as using multiple modifiers, i.e. we're using both `translate` and `rotate` together here.
|
This is not where we want to leave our pin, but it's a good way to introduce `rotate` as well as using multiple modifiers, i.e. we're using both `translate` and `rotate` together here.
|
||||||
`rotate` is similar to `translate` in that it takes an argument `[x, y, z]` but instead of moving, it rotates about each of those axes. In the above example of `[0, 45, 0]` it's as if were were to put a pin into the object along the `y` axis and then rotate 45 degrees around that pin.
|
`rotate` is similar to `translate` in that it takes an argument `[x, y, z]` but instead of moving, it rotates about each of those axes. In the above example of `[0, 45, 0]` it's as if were were to put a pin into the object along the `y` axis and then rotate 45 degrees around that pin.
|
||||||
@@ -84,7 +84,7 @@ Notice the order that we applied the `rotate` and `transform` we applied the `ro
|
|||||||
This might seem counter intuitive because `translate` is on top, but nesting operations should be read from the most nest outward in openscad.
|
This might seem counter intuitive because `translate` is on top, but nesting operations should be read from the most nest outward in openscad.
|
||||||
Here's the correct way to read the above code:
|
Here's the correct way to read the above code:
|
||||||
|
|
||||||
<Image img={readScad} style={{backgroundSize: 'contain'}} />
|
<Image img={readScad} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
The same thing applies to `hingeBodyHalf` that should read as follows:
|
The same thing applies to `hingeBodyHalf` that should read as follows:
|
||||||
|
|
||||||
|
|||||||
@@ -30,7 +30,7 @@ offset(1){
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
<Image img={offset1} style={{backgroundSize: 'contain'}} />
|
<Image img={offset1} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
## Double Offset
|
## Double Offset
|
||||||
|
|
||||||
@@ -42,12 +42,12 @@ offset(-1)offset(1){
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
<Image img={offset2} style={{backgroundSize: 'contain'}} />
|
<Image img={offset2} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
## Triple Offset
|
## Triple Offset
|
||||||
|
|
||||||
It gets even better, we can double our negative value and apply a third offset to get external fillets as well, to better understand what's happening here let overlay the shapes after each offset.
|
It gets even better, we can double our negative value and apply a third offset to get external fillets as well, to better understand what's happening here let overlay the shapes after each offset.
|
||||||
|
|
||||||
<Image img={offset3} style={{backgroundSize: 'contain'}} />
|
<Image img={offset3} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
In essence we over expand, then under expand before finally expanding back to the original dimensions, but we have gained fillets in the process, it like kneading bread, the more you do it the better the bread . . . not really stick to 3 max.
|
In essence we over expand, then under expand before finally expanding back to the original dimensions, but we have gained fillets in the process, it like kneading bread, the more you do it the better the bread . . . not really stick to 3 max.
|
||||||
|
|||||||
@@ -30,12 +30,12 @@ linear_extrude(hingeLength){
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
<Image img={extrude} style={{backgroundSize: 'contain'}} />
|
<Image img={extrude} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
We do have a bit of a problem though because while want the base to go the full length of the hinge, the pivot should only go half that to make room for the other part of the hinge.
|
We do have a bit of a problem though because while want the base to go the full length of the hinge, the pivot should only go half that to make room for the other part of the hinge.
|
||||||
Red scribbles shows what we want to remove.
|
Red scribbles shows what we want to remove.
|
||||||
|
|
||||||
<Image img={differenceMarkup} style={{backgroundSize: 'contain'}} />
|
<Image img={differenceMarkup} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
The best way around this problem is to extrude the base again separately so to stretch further than the pivot.
|
The best way around this problem is to extrude the base again separately so to stretch further than the pivot.
|
||||||
|
|
||||||
@@ -61,7 +61,7 @@ linear_extrude(hingeLength){
|
|||||||
// highlight-end
|
// highlight-end
|
||||||
```
|
```
|
||||||
|
|
||||||
<Image img={extrude2} style={{backgroundSize: 'contain'}} />
|
<Image img={extrude2} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
## Math Operations
|
## Math Operations
|
||||||
|
|
||||||
@@ -78,7 +78,7 @@ translate([pivotRadius,0,0]){
|
|||||||
|
|
||||||
within both of the `linear_extrude`s, at first it might seem like we could remove it from first `linear_extrude` since it only goes half the `hingeLength` but this would cause us to loose our internal fillet.
|
within both of the `linear_extrude`s, at first it might seem like we could remove it from first `linear_extrude` since it only goes half the `hingeLength` but this would cause us to loose our internal fillet.
|
||||||
|
|
||||||
<Image img={noFillet} style={{backgroundSize: 'contain'}} />
|
<Image img={noFillet} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
As it needs to be within `offset` group for this fillet to work.
|
As it needs to be within `offset` group for this fillet to work.
|
||||||
|
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ module plateHoles() {
|
|||||||
plateHoles();
|
plateHoles();
|
||||||
```
|
```
|
||||||
|
|
||||||
<Image img={hole1} style={{backgroundSize: 'contain'}} />
|
<Image img={hole1} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
## Basic Loop
|
## Basic Loop
|
||||||
|
|
||||||
@@ -90,7 +90,7 @@ module plateHoles() {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
<Image img={hole2} style={{backgroundSize: 'contain'}} />
|
<Image img={hole2} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
And just like that we have three evenly spaced `cylinders`!
|
And just like that we have three evenly spaced `cylinders`!
|
||||||
|
|
||||||
@@ -117,11 +117,11 @@ module plateHoles() {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
<Image img={hole3} style={{backgroundSize: 'contain'}} />
|
<Image img={hole3} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
Awesome, it obvious that the hole spacing is related to the length of the hinge now, we can even increase the amount of holes with mountingHoleCount=4; and it looks correct:
|
Awesome, it obvious that the hole spacing is related to the length of the hinge now, we can even increase the amount of holes with mountingHoleCount=4; and it looks correct:
|
||||||
|
|
||||||
<Image img={hole4} style={{backgroundSize: 'contain'}} />
|
<Image img={hole4} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
Though we still have the problem if the holes sitting right on the edge.
|
Though we still have the problem if the holes sitting right on the edge.
|
||||||
We defined `mountingHoleEdgeOffset` earlier lets now use it in the `mountingHoleMoveIncrement` calculation.
|
We defined `mountingHoleEdgeOffset` earlier lets now use it in the `mountingHoleMoveIncrement` calculation.
|
||||||
@@ -146,7 +146,7 @@ module plateHoles() {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
<Image img={hole5} style={{backgroundSize: 'contain'}} />
|
<Image img={hole5} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
We subtract `2*mountingHoleEdgeOffset` from the `hingeLength` because we are limiting the amount of space the holes can spread out in, it `2*` the offset because we want that space of both sides, but clearly we don't have a gap on each side yet, but this is just a matter of where the first hole starts, so the last step for our `for` loop is to shift it over a little:
|
We subtract `2*mountingHoleEdgeOffset` from the `hingeLength` because we are limiting the amount of space the holes can spread out in, it `2*` the offset because we want that space of both sides, but clearly we don't have a gap on each side yet, but this is just a matter of where the first hole starts, so the last step for our `for` loop is to shift it over a little:
|
||||||
|
|
||||||
@@ -167,7 +167,7 @@ module plateHoles() {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
<Image img={hole6} style={{backgroundSize: 'contain'}} />
|
<Image img={hole6} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
Fantastic! now that we have our holes place, we need to use `difference` to actually cut the holes into the part, but where to do it?? We could use difference in both the mail and female parts but that would require doing the same thing twice. The best place to do it is in `hingeBodyHalf` since this module is common to both sides of the hinge:
|
Fantastic! now that we have our holes place, we need to use `difference` to actually cut the holes into the part, but where to do it?? We could use difference in both the mail and female parts but that would require doing the same thing twice. The best place to do it is in `hingeBodyHalf` since this module is common to both sides of the hinge:
|
||||||
|
|
||||||
@@ -206,4 +206,4 @@ We're using `difference` here as planned, but we've also introduced a new operat
|
|||||||
|
|
||||||
Here's the result!
|
Here's the result!
|
||||||
|
|
||||||
<Image img={finishedHinge} style={{backgroundSize: 'contain'}} />
|
<Image img={finishedHinge} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ module pin2() {
|
|||||||
pin2();
|
pin2();
|
||||||
```
|
```
|
||||||
|
|
||||||
<Image img={transparentRotate} style={{backgroundSize: 'contain'}} />
|
<Image img={transparentRotate} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
The `%` character before `hingeBodyHalf()` makes it transparent so that we can see `pin2` within it, and one thing becomes obvious with this view is that a `rotate` of `175` is no right, it needs to be `180`! The `%` character is a "debugging" step, which means it's not going to end up in our final code, it's just helpful in the mean time. There are other characters that can be useful, the full list is
|
The `%` character before `hingeBodyHalf()` makes it transparent so that we can see `pin2` within it, and one thing becomes obvious with this view is that a `rotate` of `175` is no right, it needs to be `180`! The `%` character is a "debugging" step, which means it's not going to end up in our final code, it's just helpful in the mean time. There are other characters that can be useful, the full list is
|
||||||
|
|
||||||
@@ -52,7 +52,7 @@ difference() {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
<Image img={difference} style={{backgroundSize: 'contain'}} />
|
<Image img={difference} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
There we, go a hole! The way conceptualise how `difference` works is to think of it as subtracting the second child from the first. "child" simply means nested with `difference` so in the above example `pin2` is the second child that we are subtracting from `hingeBodyHalf`.
|
There we, go a hole! The way conceptualise how `difference` works is to think of it as subtracting the second child from the first. "child" simply means nested with `difference` so in the above example `pin2` is the second child that we are subtracting from `hingeBodyHalf`.
|
||||||
|
|
||||||
@@ -67,4 +67,4 @@ module pin2() {
|
|||||||
|
|
||||||
Fixed!
|
Fixed!
|
||||||
|
|
||||||
<Image img={removeArtifact} style={{backgroundSize: 'contain'}} />
|
<Image img={removeArtifact} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|||||||
@@ -68,7 +68,7 @@ pin(45);
|
|||||||
pin(120);
|
pin(120);
|
||||||
```
|
```
|
||||||
|
|
||||||
<Image img={multiRotate} style={{backgroundSize: 'contain'}} />
|
<Image img={multiRotate} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
Earlier I said that the syntax was for modules was `module yourName() { /* your code */ }`, lets revise that to `module yourName(yourArguments) { /* your code that uses arguments */ }`.
|
Earlier I said that the syntax was for modules was `module yourName() { /* your code */ }`, lets revise that to `module yourName(yourArguments) { /* your code that uses arguments */ }`.
|
||||||
As you can see we're using the argument `rotateY` within `rotate` so that that we can change `pin`'s ordination each time we use it by as demonstrated by using `0`, `45` and `120`.
|
As you can see we're using the argument `rotateY` within `rotate` so that that we can change `pin`'s ordination each time we use it by as demonstrated by using `0`, `45` and `120`.
|
||||||
@@ -95,7 +95,7 @@ difference() {
|
|||||||
|
|
||||||
And now we can use the pin as both the hole and the shaft, above is the hole, both looks like the following:
|
And now we can use the pin as both the hole and the shaft, above is the hole, both looks like the following:
|
||||||
|
|
||||||
<Image img={bothHalves} style={{backgroundSize: 'contain'}} />
|
<Image img={bothHalves} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
We're still not done with `pin` though! one more thing. Technically we can use the same module `pin` for the hole and shaft, but practically we can't because we haven't added any clearance between the two.
|
We're still not done with `pin` though! one more thing. Technically we can use the same module `pin` for the hole and shaft, but practically we can't because we haven't added any clearance between the two.
|
||||||
If we tried to print these together they would print solid.
|
If we tried to print these together they would print solid.
|
||||||
@@ -120,7 +120,7 @@ module pin(rotateY, radiusOffset) {
|
|||||||
|
|
||||||
The new argument allows us to increase the radius of the pin, here's an exaggerated example:
|
The new argument allows us to increase the radius of the pin, here's an exaggerated example:
|
||||||
|
|
||||||
<Image img={exaggeratedClearance} style={{backgroundSize: 'contain'}} />
|
<Image img={exaggeratedClearance} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
That's too much clearance just to demonstrate the principle, in reality we'll use the `clearance` variable that we've already defined with a value of `0.2`. we're ready to put the hinge together now, lets make two modules `hingeHalfMale` and `hingeHalfFemale` which will just be assemblies of modules we've already made.
|
That's too much clearance just to demonstrate the principle, in reality we'll use the `clearance` variable that we've already defined with a value of `0.2`. we're ready to put the hinge together now, lets make two modules `hingeHalfMale` and `hingeHalfFemale` which will just be assemblies of modules we've already made.
|
||||||
|
|
||||||
@@ -148,7 +148,7 @@ module hingeHalfMale() {
|
|||||||
hingeHalfMale();
|
hingeHalfMale();
|
||||||
```
|
```
|
||||||
|
|
||||||
<Image img={transparentAssembly} style={{backgroundSize: 'contain'}} />
|
<Image img={transparentAssembly} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
Well done, it's really coming together (I made the female hinge transparent so we can see how it fits together).
|
Well done, it's really coming together (I made the female hinge transparent so we can see how it fits together).
|
||||||
The only thing left to do is add mounting holes on the plates.
|
The only thing left to do is add mounting holes on the plates.
|
||||||
|
|||||||
@@ -89,7 +89,7 @@ hingeBodyHalf();
|
|||||||
pin();
|
pin();
|
||||||
```
|
```
|
||||||
|
|
||||||
<Image img={pivot} style={{backgroundSize: 'contain'}} />
|
<Image img={pivot} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
A couple notes about the above.
|
A couple notes about the above.
|
||||||
|
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ import bigRadius from '../../static/img/openscad-tutorial/big-radius.png';
|
|||||||
|
|
||||||
Designing parts in OpenSCAD is a matter of combining shapes and iterating until you get what you want, so with that in mind lets start with this from this perspective focusing just on one half of the hinge, let look at the blue half.
|
Designing parts in OpenSCAD is a matter of combining shapes and iterating until you get what you want, so with that in mind lets start with this from this perspective focusing just on one half of the hinge, let look at the blue half.
|
||||||
|
|
||||||
<Image img={profile} style={{backgroundSize: 'contain'}} />
|
<Image img={profile} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
We can see at the very least some circles and rectangles will be of use, so lets start there.
|
We can see at the very least some circles and rectangles will be of use, so lets start there.
|
||||||
|
|
||||||
@@ -25,7 +25,7 @@ square([15,3]);
|
|||||||
|
|
||||||
`circle(5);` gives us a circle with a radius of `5` and `square` is the 2d version of `cube` . Here we've given it dimensions of 15 and 2 for x and y respectively (or width and height if you prefer) .
|
`circle(5);` gives us a circle with a radius of `5` and `square` is the 2d version of `cube` . Here we've given it dimensions of 15 and 2 for x and y respectively (or width and height if you prefer) .
|
||||||
|
|
||||||
<Image img={circleCube} style={{backgroundSize: 'contain'}} />
|
<Image img={circleCube} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
## Translate
|
## Translate
|
||||||
|
|
||||||
@@ -39,7 +39,7 @@ translate([0,5,0]){
|
|||||||
square([15,3]);
|
square([15,3]);
|
||||||
```
|
```
|
||||||
|
|
||||||
<Image img={translate} style={{backgroundSize: 'contain'}} />
|
<Image img={translate} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
`translate` is little different to the modules we've see so far is instead of ending with a semicolon `;` it ends with `{ children }` in the case above it has one child, the `circle`. `tranlates` shifts its children around, we're using it to shift it up by `5`. We put `5` in the second position in the square braces is because we want to shift it along the Y axis, if you're ever not sure which axis you need to shift something just try each until you find the one you're after.
|
`translate` is little different to the modules we've see so far is instead of ending with a semicolon `;` it ends with `{ children }` in the case above it has one child, the `circle`. `tranlates` shifts its children around, we're using it to shift it up by `5`. We put `5` in the second position in the square braces is because we want to shift it along the Y axis, if you're ever not sure which axis you need to shift something just try each until you find the one you're after.
|
||||||
|
|
||||||
@@ -57,7 +57,7 @@ translate([5,0,0]){
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
<Image img={unroundedProfile} style={{backgroundSize: 'contain'}} />
|
<Image img={unroundedProfile} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
I'm sure you can see the profile of the hinge coming together, that's great, but before we move forward we should quickly reflect on what we've done so far.
|
I'm sure you can see the profile of the hinge coming together, that's great, but before we move forward we should quickly reflect on what we've done so far.
|
||||||
|
|
||||||
|
|||||||
@@ -106,7 +106,7 @@ Lets reflect on what you've achieved
|
|||||||
By diligently using variables instead of hardcoding values, you have create some code that is not only much easier to read and re-use, but it's now parametric by default, which means we can change the value of the variables and the model adjusts
|
By diligently using variables instead of hardcoding values, you have create some code that is not only much easier to read and re-use, but it's now parametric by default, which means we can change the value of the variables and the model adjusts
|
||||||
Here are some variations:
|
Here are some variations:
|
||||||
|
|
||||||
<Image img={parametric} style={{backgroundSize: 'contain'}} />
|
<Image img={parametric} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
### Composed of many small well named modules
|
### Composed of many small well named modules
|
||||||
|
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ We're going to learn:
|
|||||||
|
|
||||||
We're going to achieve that by making this cute print-in-place hinge, print in place means that there will be no assembly step, both parts of the hinge will be printed pre-assembled.
|
We're going to achieve that by making this cute print-in-place hinge, print in place means that there will be no assembly step, both parts of the hinge will be printed pre-assembled.
|
||||||
|
|
||||||
<Image img={hinge} style={{backgroundSize: 'contain'}} />
|
<Image img={hinge} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
This tutorial makes no assumption about previous knowledge, which means it's fine you you haven't done any programming before, we'll walk you through it.
|
This tutorial makes no assumption about previous knowledge, which means it's fine you you haven't done any programming before, we'll walk you through it.
|
||||||
If you have done some programming before and prefer a more concise guide that focuses more on OpenSCAD syntax you might prefer the Definitive OpenSCAD Primer instead.
|
If you have done some programming before and prefer a more concise guide that focuses more on OpenSCAD syntax you might prefer the Definitive OpenSCAD Primer instead.
|
||||||
@@ -27,7 +27,7 @@ If you have done some programming before and prefer a more concise guide that fo
|
|||||||
If you came here from "[getting started](/docs)" then you would have already got a shape on screen with `cube([10,10,10]);`.
|
If you came here from "[getting started](/docs)" then you would have already got a shape on screen with `cube([10,10,10]);`.
|
||||||
If you came from elsewhere, open the OpenSCAD desktop app or go to our [online editor](https://cadhub.xyz/dev-ide/openScad), and add `cube([10,10,10]);` to get the following cube:
|
If you came from elsewhere, open the OpenSCAD desktop app or go to our [online editor](https://cadhub.xyz/dev-ide/openScad), and add `cube([10,10,10]);` to get the following cube:
|
||||||
|
|
||||||
<Image img={plainCube} style={{backgroundSize: 'contain'}} />
|
<Image img={plainCube} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
OpenSCAD has a number of modules available that allow us to make shapes and cube is one of them.
|
OpenSCAD has a number of modules available that allow us to make shapes and cube is one of them.
|
||||||
Modules take the form `moduleName(moduleParameters);` or `moduleName(moduleParameters){children}`.
|
Modules take the form `moduleName(moduleParameters);` or `moduleName(moduleParameters){children}`.
|
||||||
@@ -35,7 +35,7 @@ Using the `cube` as an example, it take the first form where the moduleName is `
|
|||||||
|
|
||||||
Try changes the line to `cube([10,10,20]);`. You should see the cube grow twice as tall as it was previously
|
Try changes the line to `cube([10,10,20]);`. You should see the cube grow twice as tall as it was previously
|
||||||
|
|
||||||
<Image img={tallCube} style={{backgroundSize: 'contain'}} />
|
<Image img={tallCube} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
That's because the `[10,10,20]` is giving the cube's dimensions in each axis, the order is `[x, y, z]`, and as we've seen the `z` axis is the vertical axis.
|
That's because the `[10,10,20]` is giving the cube's dimensions in each axis, the order is `[x, y, z]`, and as we've seen the `z` axis is the vertical axis.
|
||||||
|
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ Then select OpenSCAD. Note that [CadQuery](https://cadquery.readthedocs.io/en/la
|
|||||||
|
|
||||||
You should now see the OpenSCAD IDE (integrated development environment)
|
You should now see the OpenSCAD IDE (integrated development environment)
|
||||||
|
|
||||||
<Image img={ide} style={{backgroundSize: 'contain'}} />
|
<Image img={ide} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
Here we should see the default code in the editor on the left-hand-side, the editor is where we design our CAD parts and we'll cover that more soon. You will also see the result will show up on the right-hand-side (along with the console which gives us extra information). You can click and drag inside the viewer to change the perspective, though the image will only update once you let go of the mouse.
|
Here we should see the default code in the editor on the left-hand-side, the editor is where we design our CAD parts and we'll cover that more soon. You will also see the result will show up on the right-hand-side (along with the console which gives us extra information). You can click and drag inside the viewer to change the perspective, though the image will only update once you let go of the mouse.
|
||||||
|
|
||||||
@@ -31,10 +31,10 @@ You can also move the object with with right-click and drag, and scrolling will
|
|||||||
|
|
||||||
For that we'll need to learn about the OpenSCAD language. For now, try replacing all of the existing code with `cube([10,10,10]);` and then hit `ctrl + s` to tell CadHub to render a new image. You should see a cube appear!
|
For that we'll need to learn about the OpenSCAD language. For now, try replacing all of the existing code with `cube([10,10,10]);` and then hit `ctrl + s` to tell CadHub to render a new image. You should see a cube appear!
|
||||||
|
|
||||||
<Image img={cube} style={{backgroundSize: 'contain'}} />
|
<Image img={cube} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
Don't worry if you don't understand the specifics of what happen here, we'll give you the whole run down next in our introductory tutorial, where you'll learn the basics of OpenSCAD by making a hinge.
|
Don't worry if you don't understand the specifics of what happen here, we'll give you the whole run down next in our introductory tutorial, where you'll learn the basics of OpenSCAD by making a hinge.
|
||||||
|
|
||||||
<Image img={hinge} style={{backgroundSize: 'contain'}} />
|
<Image img={hinge} className="mb-8 bg-contain rounded-md overflow-hidden" />
|
||||||
|
|
||||||
Already familiar with OpenSCAD? no worries, you can skip ahead to learn more about how to host a OpenSCAD project on CadHub
|
Already familiar with OpenSCAD? no worries, you can skip ahead to learn more about how to host a OpenSCAD project on CadHub
|
||||||
|
|||||||
@@ -1,2 +1,5 @@
|
|||||||
const webConfig = require('../app/web/tailwind.config.js')
|
const webConfig = require('../app/web/tailwind.config.js')
|
||||||
module.exports = webConfig
|
module.exports = {
|
||||||
|
...webConfig,
|
||||||
|
purge: ['./src/**/*.html', './src/**/*.js', './src/**/*.ts', './src/**/*.tsx', './blog/**/*.md', './blog/**/*.mdx', './docs/**/*.md', './docs/**/*.mdx'],
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user