Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tree: 85e34be7ce
Fetching contributors…

Cannot retrieve contributors at this time

148 lines (118 sloc) 3.859 kB
<!doctype html>
<html lang="en">
<head>
<title>Smooth Doodle - Spline2D - toxiclibs.js examples</title>
<meta name="author" content="Kyle Phillips">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link href="layout.css" type="text/css" rel="stylesheet"/>
<!-- Date: 2011-01-09 -->
<script type="text/javascript" src="../build/toxiclibs.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
window.onload = init;
var canvas, ctx,spline;
var points, lastSplineVertices;
var sampleDistance = 50;
function init(){
canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
spline = new toxi.Spline2D();
points = [];
$("#distance").change(function(){
console.log($(this));
sampleDistance = $(this).val();
updateLabels();
});
$("#tightness").change(function(){
spline.setTightness($(this).val());
updateLabels();
});
$("#clear").click(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
});
window.onmousemove = function(e){
update(e.pageX,e.pageY);
}
updateLabels();
}
function updateLabels(){
$("label[for='distance']").html("sample distance: "+sampleDistance);
$("label[for='tightness']").html("spline tightness: "+spline.tightness.toString().slice(0,4));
}
function update(mouseX,mouseY){
var numP=points.length;
var currP=new toxi.Vec2D(mouseX,mouseY);
if (numP>0) {
var prevP=points[numP-1];
if (currP.distanceTo(prevP)>sampleDistance) {
points.push(currP);
ctx.strokeStyle = "rgba(0,0,0,0.5)";
ctx.beginPath();
ctx.arc(currP.x,currP.y,3,0,Math.PI*2);
ctx.stroke();
ctx.closePath();
spline.add(currP);
if (numP > 1) {
var lastP = points[numP-2];
var p = points[numP-1];
line(lastP.x,lastP.y,p.x,p.y);
ctx.strokeStyle = "rgba(0,0,0,0.5)";
ctx.arc(p.x,p.y,7,0,Math.PI*2);
}
// need at least 4 vertices for a spline
if (numP>3) {
ctx.strokeStyle = "rgba(0,0,0,.125)";
// sample the curve at a higher resolution
// so that we get extra 8 points between each original pair of points
var vertices=spline.computeVertices(8);
// draw the smoothened curve
ctx.beginPath();
var numRecent = Math.max(vertices.length-64,0);
for(var i=numRecent;i<vertices.length;i++) {
var v = vertices[i];
if(i == numRecent){
ctx.moveTo(v.x,v.y);
}
else {
ctx.lineTo(v.x,v.y);
}
}
ctx.stroke();
ctx.closePath();
lastVertices = vertices;
}
}
}
else {
points.push(currP);
}
}
function line(x1,y1,x2,y2){
ctx.beginPath();
ctx.strokeStyle = "rgba(255,0,0,0.25)";
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
ctx.closePath();
}
document.ontouchmove = function(e){
e.preventDefault(); //prevents scrolling
for(var i=0;i<e.touches.length;i++){
update(e.touches[i].pageX,e.touches[i].pageY);
}
}
</script>
</head>
<body class="full_page">
<div class="controls">
<div style="float:left;width: 150px;"><input id="distance" type="range" min="5" max="200" value="50"/><br/><label for="distance">distance</label></div>
<div style="float:left;width: 150px;"><input id="tightness" type="range" min="0.001", max="0.5" step="0.025" value="0.25" /><br/><label for="tightness">spline tightness</label></div>
<input id="clear" type="button" value="clear"/>
</div>
<canvas id="myCanvas" width="200" height="200">
your browser doesnt support canvas
</canvas>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.