garciadelcastillo/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Sets

Sketchpad implements the possibility of working with lists of Objects as operators. Please note Sets are currently under severe redevelopment, and behavior may change any time soon.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <div id="sketchpadDiv">
      <canvas id="sketchpadCanvas"></canvas>
    </div>
  </body>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="http://www.garciadelcastillo.es/sketchpad/sketchpad.js"></script>
  <script type="text/javascript" src="sketch.js"></script>
</html>

## sketch.js
// Create new instance of Sketchpad in target Canvas
var pad = new Sketchpad('sketchpadCanvas');

// Create some Lines and Circles
var A = new pad.Node(128, 100),
    B = new pad.Node(256, 300),
    C = new pad.Node(512, 100),
    D = new pad.Node(384, 300),
    E = new pad.Node(320, 100),
    AB = pad.Line.between(A, B),
    DC = pad.Line.between(D, C),  // note orientation change here
    circleE = pad.Circle.centerRadius(E, 50);

// Create a Set of numbers with 100 steps from 0 to 1
var divs = pad.Set.range(0, 1, 100);

// Use those values to create Point Sets along Lines and Circles
var ABpts = pad.Point.along(AB, divs),
    DCpts = pad.Point.along(DC, divs),
    circleEpts = pad.Point.along(circleE, divs);

// Apply new Style
pad.currentStyle( new pad.Style({ stroke: 'rgba(127, 127, 127, 0.3' }) );

// Create Line Sets between Point Sets
var lineToLine = pad.Line.between(ABpts, DCpts),
    lineToCircle = pad.Line.between(DCpts, circleEpts);

## styles.css
body {
  margin: 0;
  padding: 0;
}

#sketchpadDiv {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#sketchpadCanvas {
  position: absolute;
}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
	<div id="sketchpadDiv">
	<canvas id="sketchpadCanvas"></canvas>
	</div>
	</body>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="http://www.garciadelcastillo.es/sketchpad/sketchpad.js"></script>
	<script type="text/javascript" src="sketch.js"></script>
	</html>
	// Create new instance of Sketchpad in target Canvas
	var pad = new Sketchpad('sketchpadCanvas');

	// Create some Lines and Circles
	var A = new pad.Node(128, 100),
	B = new pad.Node(256, 300),
	C = new pad.Node(512, 100),
	D = new pad.Node(384, 300),
	E = new pad.Node(320, 100),
	AB = pad.Line.between(A, B),
	DC = pad.Line.between(D, C), // note orientation change here
	circleE = pad.Circle.centerRadius(E, 50);

	// Create a Set of numbers with 100 steps from 0 to 1
	var divs = pad.Set.range(0, 1, 100);

	// Use those values to create Point Sets along Lines and Circles
	var ABpts = pad.Point.along(AB, divs),
	DCpts = pad.Point.along(DC, divs),
	circleEpts = pad.Point.along(circleE, divs);

	// Apply new Style
	pad.currentStyle( new pad.Style({ stroke: 'rgba(127, 127, 127, 0.3' }) );

	// Create Line Sets between Point Sets
	var lineToLine = pad.Line.between(ABpts, DCpts),
	lineToCircle = pad.Line.between(DCpts, circleEpts);
	body {
	margin: 0;
	padding: 0;
	}

	#sketchpadDiv {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 1px solid #000;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

	#sketchpadCanvas {
	position: absolute;
	}