A linearly interpolated spline

Developer
Darby Rathbone
Size
2,328 Kb
Views
36,432
  1. A linearly interpolated spline Previews
  2. A linearly interpolated spline HTML Codes
  3. A linearly interpolated spline JS Codes

How do I make an a linearly interpolated spline?

Its a quadratic curve or a bezier with as many points as you want... pretty easy. What is a a linearly interpolated spline? How do you make a a linearly interpolated spline? This script and codes were developed by Darby Rathbone on 03 October 2022, Monday.

A linearly interpolated spline Previews
IQ Test

A linearly interpolated spline - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>a linearly interpolated spline</title>
</head>
<body> <script src="js/index.js"></script>
</body>
</html>

A linearly interpolated spline - Script Codes JS Codes

var lerp = function (d, p1, p2) { return ( (p1 - p2) * d ) + p2;
}
var Vertex = (function (x, y) { this.x = x; this.y = y; this.array = [x, y]; return this;
});
Vertex.prototype = { lerpTo: function (d, other) { return new Vertex(lerp(d, other.x, this.x), lerp(d, other.y, this.y)); }, dist: function(other){ return Math.sqrt((this.x-other.x)*(this.x-other.x)+(this.y-other.y)*(this.y-other.y)); }, midpoint: function(other){ return new Vertex((this.x+other.x)/2.0,(this.y+other.y)/2.0); }
};
var Spline = (function(segments, dist){ this.segments = segments; this.distance = dist; this.startpoint = this.segments[0]; var points = []; // for (var k = 0;k<this.segments.length;k+=3.0) // { var k = 0; for (var j = 0;j<1.0;j+=dist){ var point = new Vertex(this.segments[k].x,this.segments[k].y); point = this.breakdown(this.segments,j)[0]; points.push(new Vertex(point.x,point.y)); } // } this.points = points; return this;
});
Spline.prototype = { breakdown: function(points,d){ var p = []; for (var i = 0;i<points.length-1;i++){ p.push(points[i].lerpTo(d,points[i+1])); } if (p.length > 1){ p = this.breakdown(p,d); } return p; }, draw: function(context){ context.beginPath(); context.moveTo(this.points[0].x,this.points[0].y); for (var i = 1;i<this.points.length;i++){ context.lineTo(this.points[i].x,this.points[i].y); } context.stroke(); context.closePath(); }
};
var aVert = [new Vertex(0, 0), new Vertex(300, 400), new Vertex(253,130)];
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
canvas.style.border = "solid 3px black";
var ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
var count = 0; ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "rgb(0,0,0)";
ctx.beginPath(); ctx.moveTo(aVert[0].x, aVert[0].y);
var distance = aVert[0].dist(aVert[2]);
distance = Math.round(distance);
var TestSpline = new Spline(aVert,.01);
function drawpoints(a){ a.forEach(function(e){ ctx.fillRect(e.x,e.y,5,5); }); /*for(var i = 0;i<a.length-1;i++){ ctx.moveTo(a[i].x,a[i].y); ctx.lineTo(a[i+1].x,a[i+1].y); } ctx.stroke();*/
}
document.onclick=( function(event){ ctx.clearRect(0,0,canvas.width,canvas.height); aVert.push(new Vertex(event.pageX,event.pageY)); TestSpline = new Spline(aVert,1/(4*aVert.length)); TestSpline.draw(ctx);
drawpoints(aVert);
});
drawpoints(aVert);
TestSpline.draw(ctx); ctx.closePath();
A linearly interpolated spline - Script Codes
A linearly interpolated spline - Script Codes
Home Page Home
Developer Darby Rathbone
Username blackkbot
Uploaded October 03, 2022
Rating 3
Size 2,328 Kb
Views 36,432
Do you need developer help for A linearly interpolated spline?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Darby Rathbone (blackkbot) Script Codes
Name
Sudoku grid
Drag, drop and snap
Sphere detail
3d hand
Balls
JsLint
Webworker with an editable textbox
Java style console
Golden ratio
Graphing equations
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!