Comp.Tutorial = class extends React.Component { render() { return (

Setting up a basic ripsaw app is simple. Just include a div with a ’ripsaw-app’ id that will contain ripsaw’s dynamically generated canvas. All magic happens within.

index.html
{
                  `
                
                
                	ripsaw example
                	
                

                
                	

                	
                	
                
                
                `
                }

On the JavaScript side, all information about the geometry of the product is stored in a RIPSAW.masterPiece object. The Bezier2D constructor sets up this object as a 2d bezier spline using the "fork" template.

ripsaw-app.js
{`var geometry = RIPSAW.textAssets.shapeLibrary["fork"];

              // set masterpiece
              RIPSAW.masterPiece = new RIPSAW.Bezier2D(geometry);

              // scale geometry into (-0.5, -0.5) - (+0.5, +0.5) rectangle
              RIPSAW.masterPiece.normalize();

              // create canvas and add mouse event listeners
              RIPSAW.init();

              // run application (setInterval)
              RIPSAW.launch();
              `}

Finally, add some css to make sure that the container div fills the screen. But then again, you don’t have to. ripsaw scales the app to any size container - so feel free to experiment ~

style.css
{`body { margin: 0; }

              #ripsaw-app {
              	position: absolute;
              	top: 0;
              	bottom: 0;
              	width: 100%;
              }
              `}

Like so!

There is much room for customization. Add a new fresh color scheme and change to a new template.

ripsaw-app.js
{ `var geometry = RIPSAW.textAssets.shapeLibrary["moustache"];

              RIPSAW.masterPiece = new RIPSAW.Bezier2D(geometry).normalize();

              // set new color scheme
              RIPSAW.colors.schemes.fresh: [
                  [178, 88, 79],   // 0: background
                  [230, 255, 95],  // 1: title
                  [255, 22, 0],    // 2: subtitle
                  [20, 105, 204],  // 3: misc text
                  [92, 132, 178],  // 4: control handle endpoints
                  [61, 103, 196],  // 5: control handle midpoint
                  [95, 90, 113],   // 6: nav bounding boxes
                  [255, 255, 255]  // 7: curve strokes
              ];

              // set new color scheme as active
              RIPSAW.colors.activeScheme = "fresh";

              // change container ID
              RIPSAW.containerID = 'new-wrapper';

              RIPSAW.init().launch();
              ` }
) } componentDidMount() { var geometry = RIPSAW.textAssets.shapeLibrary['fork'] RIPSAW.masterPiece = new RIPSAW.Bezier2D(geometry) RIPSAW.masterPiece.normalize() RIPSAW.init() RIPSAW.launch() } } Comp.Tutorial.Part1 = function() { var TutorialNav = Comp.TutorialNav return (

Setting up a basic ripsaw app is simple. Just include a div with a ’ripsaw-app’ id that will contain ripsaw’s dynamically generated canvas. All magic happens within.

index.html
{ htmlCode }

On the JavaScript side, all information about the geometry of the product is stored in a RIPSAW.masterPiece object. The Bezier2D constructor sets up this object as a 2d bezier spline using the "fork" template.

ripsaw-app.js
{ jsCode }

Finally, add some css to make sure that the container div fills the screen. But then again, you don’t have to. ripsaw scales the app to any size container - so feel free to experiment ~

style.css
{cssCode}

~ like so!

) } Comp.Tutorial.Part2 = function() { var TutorialNav = Comp.TutorialNav return (

There is much room for customization. Add a new fresh color scheme and change to a new template.

ripsaw-app.js
{`
var geometry = RIPSAW.textAssets.shapeLibrary["moustache"];

RIPSAW.masterPiece = new RIPSAW.Bezier2D(geometry)
	.normalize();

// set new color scheme
RIPSAW.colors.schemes.fresh: [
    [178, 88, 79],   // 0: background
    [230, 255, 95],  // 1: title
    [255, 22, 0],    // 2: subtitle
    [20, 105, 204],  // 3: misc text
    [92, 132, 178],  // 4: control handle endpoints
    [61, 103, 196],  // 5: control handle midpoint
    [95, 90, 113],   // 6: nav bounding boxes
    [255, 255, 255]  // 7: curve strokes
];

// set new color scheme as active
RIPSAW.colors.activeScheme = "fresh";

// change container ID
RIPSAW.containerID = 'new-wrapper';

RIPSAW.init().launch();
`}
) } Comp.Tutorial.Part3 = function() { var jsCode = ` RIPSAW.masterPiece = new RIPSAW.Bezier2D("M138,108C116,38,281,98,290,145s-64,44-76,115S51,316,91,230S148,142,138,108z") .normalize(); RIPSAW.init().launch(); ` var text = 'Best of all, you can use your own creation as a template. Just initialize masterPiece with the path attribute of an SVG Bezier path (as drawn with the pen tool in Adobe Illustrator).' var TutorialNav = Comp.TutorialNav return (

{text}

ripsaw-app.js
{ jsCode }
) } Comp.Tutorial.Part4 = function() { var TutorialNav = Comp.TutorialNav return (

ripsaw.js apps go a long way.

they have their own navigation and support for app tutorials in a single DOM element, the ripsaw canvas.

Coming up soon in this tutorial series:


~ 3d demos

~ more and better design experiments

~ export to desktop 3d modeling software (Rhino, SketchUp) and 3d printers (MakerBot)

) }