Skip to content

Instantly share code, notes, and snippets.

@funvill

funvill/index.html

Created April 27, 2014 17:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save funvill/11351377 to your computer and use it in GitHub Desktop.
Save funvill/11351377 to your computer and use it in GitHub Desktop.
Download ZIP
Instructable - Javascript generated laser cut jewellery
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Javascript generated laser cut pendants</title>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="raphael.export.js"></script>
</head>
<body>
<div id="canvas"></div>
<script>
window.onload = function () {
// Defined units of measurement in Pixels.
var ONE_MM_IN_PX = 4 ;
var ONE_CM_IN_PX = 38 ;
// Brushes
var BRUSH_CUT_FIRST = {fill: "none", stroke: "#000000", "stroke-width": "1" } ;
var BRUSH_CUT_SECOND = {fill: "none", stroke: "#0000FF", "stroke-width": "1" } ;
var BRUSH_ETCH = {fill: "none", stroke: "#00FF00", "stroke-width": "5" } ;
// Make a working area that is 15cm x 15cm.
var CANVAS_HEIGHT = ONE_CM_IN_PX*15;
var CANVAS_WIDTH = ONE_CM_IN_PX*15;
// Create the Raphael object to hold the SVG elements.
// I like to start away from the top left conner to give the image a margin.
// http://raphaeljs.com/reference.html#Raphael
var paper = Raphael(100, 100, CANVAS_WIDTH, CANVAS_HEIGHT);
// Draw some circles on the page.
/**
* Paper.ellipse(x, y, rx, ry)
* Parameters
* x - x coordinate of the centre
* y - y coordinate of the centre
* rx - horizontal radius
* ry - vertical radius
*
* http://raphaeljs.com/reference.html#Paper.ellipse
*/
paper.ellipse( ONE_CM_IN_PX, ONE_CM_IN_PX, ONE_CM_IN_PX, ONE_CM_IN_PX).attr( BRUSH_CUT_FIRST );
paper.ellipse( ONE_CM_IN_PX, ONE_CM_IN_PX*2, ONE_CM_IN_PX, ONE_CM_IN_PX).attr( BRUSH_CUT_FIRST );
paper.ellipse( ONE_CM_IN_PX*2, ONE_CM_IN_PX, ONE_CM_IN_PX, ONE_CM_IN_PX).attr( BRUSH_CUT_FIRST );
paper.ellipse( ONE_CM_IN_PX*2, ONE_CM_IN_PX*2, ONE_CM_IN_PX, ONE_CM_IN_PX).attr( BRUSH_CUT_FIRST );
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment