Pages

Wednesday, March 29, 2017

Creating interactive 3D models in your browser with Solvespace

Interactive 3D model

It may be convenient to view a interactive model made in Solvespace using a webbrowser. For instance if you want to share the model with someone who hasn't Solvespace installed. Luckily Solvespace has an option just for this under File -> Export Triangle Mesh. Now in the dialog window select Three.js-compatible mesh with viewer (html). Save the file. An html file is now available that can be viewed in the browser (I only had succes with Firefox, Chrome wouldn't show me the model). The html file created by Solvespace consist for a large part on Javascript and relying on the Three.js Javascript library. All the points, edges and faces of the 3D model are included in this file.

Screenshot of the html file created by Solvespace and opened in the Firefox browser.

When the html file is opened the 3D model can be rotated (left mouse button), moved (right mouse button) and zoomed (scroll wheel). The options are activated by a mouse click in the frame. Clicking on the scroll wheel deactivates these options.

One step further

This can be taken one step further. The model can be integrated in a website. The simplest way is to use the <iframe> tag in html. Below is a simple example where cube.html is the file that has been generated by Solvespace.

<!DOCTYPE html>
<html>
    <head>
    <title>
    This is a cube
    </title>
    </head>
    <body>
        <iframe src="cube.html", height="600", width="800"></iframe>
    </body>
</html>

That's it, the interactive model will show up in the webpage which is a pretty cool Solvespace feature. BTW: I didn't bother demonstrating it in Blogger because I think it's to much of a hassle editing the template.

For this tutorial I used Solvespace 2.3 on OSX.

Solvespace is open source (GPLv3 license) and is available for Window, OSX and Linux. It is developed by Jonathan Westhues and maintained by Whitequark and others. It can be downloaded here: http://solvespace.com/download.pl.

Friday, March 17, 2017

Creating a mathematical rose in OpenSCAD

Introduction

In my previous blog post I explained how to create complex 2D shapes in OpenSCAD. Once a mathematical expression for a shape is known it's possible to translate it to OpenSCAD script. The Carthesian coordinates of mathematical rose, a rose shaped sinusoid, can be expressed by x = cos(kθ)cos(θ) and y = cos(kθ)sin(θ). If k is an integer a the shape will be relatively simple but is k is a fracture more complex shapes are created.

One of the shapes that can be created with the rose_points function (linear_extrude is used to create a 3D shape).

Writing the script

All the points needed to create the rose will be generated in the function rose_points. Rose
_points returns these points in a list. The function will have the form:

function rose_points(k,n,radius) = [...]

The parameters k and n will determine the shape of the rose. If n = 1 the curve will a simple rose shape but if n > 1 more complex shapes are drawn. Here is a link to all the possible shapes when varying k and n. The syntax of OpenSCAD for lists allows us to use if and for elements to construct a list. In the case of our function we can use these elements.

step = 1;
function rose_points(k, n , radius) = k%2 == 0 && n%2 ==1 ? [for (theta = [0 : step : 360 * n]) [radius * cos(k/n*theta) *sin(theta), radius * cos(k/n*theta) * cos(theta)]] : [for (theta = [0 : step : 180 * n]) [radius * cos(k/n*theta) * sin(theta), radius * cos(k/n*theta) * cos(theta)]];

a=rose_points(5,7,100);
color("red") polygon(a);

The function looks intimidating at first due to the list comprehensions.  The key is to just break it apart. The two parts between square brackets contain lists of points (generated by a for loop). The rest is an if, then, else statement: if k is even and n is uneven then [] else []. More information on the syntax for a list (list comprehensions) can be found here.

The function isn't perfect. With some combination of k and n (e.g. 6 and 2) nothing is displayed on the screen. The reason is that with this combination all points are repeated prompting the polygon function of OpenSCAD to draw nothing. In this cases it helps to change the range of theta.

Caveat: List comprehensions as shown in the rose_points function are only possible with OpenSCAD v2015.03 and above.

OpenSCAD is open source (GPLv2 license) and is well maintained by Marius Kintel et al. Besides the stable releases for Windows, OSX and Linux, development snapshots are available. I recommend using these development snapshots since they have all the latest features. 

Shape created with k = 2 and n = 1.

Shape created with k =8 and n = 7.


Saturday, March 4, 2017

Getting creative with OpenSCAD

Introduction

OpenSCAD is software to create solid 3D CAD Models but other than most 3D CAD programs a model can be created with a programming language. Although OpenSCAD is often used to create models for 3D printing it also very capable as a tool for creative coding. Creative coding is more about being expressive than being functional.

Sierpinski triangle made in OpenSCAD (recursive algorithm).


Creative coding

I've been using OpenSCAD for over a year now for my 3D printing projects but as of late I'm exploring the creative possibilities of this programming language. It all started when I was watching another episode of The Coding Train, a great and often hilarious YouTube channel from Daniel Schiffman. In this show Daniel Schiffman takes on coding challenges. These coding challenges can be a physics simulation, data visualization or computer vision. While watching the show I was wondering which tool would be suitable to take on these challenges myself. Schiffman is mainly using Processing and P5.js which aren't in my skill set. I have a basic understanding of Python but not enough to start coding these challenges. OpenSCAD has become the programming tool that I'm most familiar with so I figured to give it a try.

OpenSCAD is pretty well equipped for creative coding. No need to import additional modules or libraries to draw onto the screen. It also comes with ready to use 2D and 3D primitives, geometric transformations and boolean operations for 2D and 3D primitives. OpenSCAD is a functional programming language as opposed to most common programming languages such as Python, C and Java which are imperative languages. In OpenSCAD variable keeps one value so i  = i + 1 won't work and f(x) will always produce the same result for a given x (as in mathematics). Once you get your head around that working with OpenSCAD becomes easy.

OpenSCAD doesn't disappoint for creative coding. Although some challenges didn't seem possible with OpenSCAD, because of the limited animation features of the program (or my lack of understanding of these features, others could be easily achieved with it. Below are examples of challenges that I did with OpenSCAD.


Mathematical rose pattern made in OpenSCAD.

Phyllotaxis pattern made in OpenSCAD.

Openhome.cc

Along the way I discovered that I'm not the only one using OpenSCAD for creative programming. I like to mention the website openhome.cc which has an excellent OpenSCAD section. This section not only explains the underlying fundamentals of OpenSCAD but also has creative chapters about spirals, turtle graphics and maze.

OpenSCAD is open source (GPLv2 license) and is well maintained by Marius Kintel et al. Besides the stable releases for Windows, OSX and Linux, development snapshots are available. I recommend using these development snapshots since they have all the latest features.