![]() However, I want my puzzle to only have one possible solution, and a circular outline is the exact opposite of that. Two concentric circles to start with (left) and adding a spirograph pattern on top (right) I’ve played with the math for spirographs in JavaScript quite often (I sell pen plots with spirograph designs), so I grabbed my code from those projects to create a spirograph. I then added a spirograph pattern on top that will be etched out of the wood and puzzle pieces. attr ( "transform", `translate( $ )` ) //Add a circleĬonst outside_radius = width / 2 * 0.8 const outside = svg. append ( "g" ) //add a group and offset it to the center of the SVG Append and SVG to the body in D3.js styleĬonst width = 1000 const height = 1000 const svg = d3. I started very simple, a black circe to represent the wooden outline, with a hatched circle for the interior where you’d place the puzzle pieces. My working set-up with the browser (and devTools open) on the left and the JS file in Visual Studio Code along the right Within my folder with the index.html I run live-server in the terminal, and it opens up a webpage in my default browser that will automatically refresh on saving any file in the folder. I make use of Node.js and it’s quite easy to install a live server with npm install -g live-server (the -g makes it globally accessible on my laptop, not just in one repository). I prefer working with a live server so whenever I make changes to my JavaScript and save the file, the web browser running the live server automatically refreshes. I create a folder with a simple index.html and an empty JavaScript file. I think you can see it as parametric modelling in 2D because you fix every aspect of the design through code. You write JavaScript that creates the SVG in a web browser. It’s the core of my work and I feel very comfortable using it. JavaScript & D3.jsĭ3.js is a JavaScript library mainly used for the creation of data visualizations (on the web) as an SVG. For this week however I started my 2D vector approach with JavaScript + D3.js and finished it in Adobe Illustrator. I’ve tried InkScape in the past, but didn’t like it. I have experience with Adobe Illustrator and Affinity Designer and feel comfortable enough with both to create designs. You can output the image as a png.ĢD raster program ‘Tatasui Sketches’ on my iPad Vector based pencil, pen, brush) along the left, a color in the bottom right, the layer in the top right and right below the layer you can set the thickness and opacity of your chosen tool. Just select the type of tool you want to use (e.g. It’s extremely straightforward and minimal. I use this app very often to create sketches of my data visualizations.īelow you can see the the app in use. I already sketched my final project in 2D (top-view) and 3D (rough top-side) in a raster based tool during the previous week, with my iPad Pro, Apple Pen, and an app called Tayasui Sketches. I’m therefore not going to very deeply into how the 2D (and especially raster-based) tools work. Raster basedīecause I already have experience with 2D raster and vector-based tools through my daily work, I want to focus on the 3D modelling aspect this week. Typical tools for vector based drawing are Adobe Illustrator, InkScape, or when using JavaScript, you can create vector images as well, with svg being the most standard file type of vectors. And they are the type of “drawing” that is needed to work with laser- and vinyl-cutters. ![]() A big advantage is that the vectors can be scaled without losing any detail. These use mathematical formulas and paths to define each shape. However, you can also create visuals using vector based programs. Typical file types are png, jpeg, and gif. Typical programs for raster based drawing are Adobe Photoshop, GIMP, and you can even draw (raster-based images) with JavaScript using the HTML5 Canvas. In an extreme case pixel art is a beautiful example of raster based drawing. To model in 2D you can use a raster based program, which makes use of the concept of a rectangular field of pixels and you basically define the color and transparency of each pixel. The rendering result from Fusion 360 2D Modelling Showing some final renders and animations of my 3D models for the tl dr and hopefully showing you why the rest of this very long blog could be interesting to read (⌐■_■) An animation of puzzle pieces falling into my 'puzzle box' Model (raster, vector, 2D, 3D, render, animate, simulate, …) a possible final project, compress your images and videos, and post it on your class page.Modelling in both 2D and 3D, preferably parametrically. This week we’ve gotten an introduction into computer-aided design.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |