# Bezier Fun

Developer
Size
3,319 Kb
Views
54,648

## How do I make an bezier fun?

Created just for learning purposes, using maths + bezier curve theory. Pure JSUse as you wish!. What is a bezier fun? How do you make a bezier fun? This script and codes were developed by Jeff Ibacache on 23 June 2022, Thursday.

Bezier Fun Previews

## Bezier Fun - Script Codes HTML Codes

``````<!DOCTYPE html>
<html >
<body> <div id="info"> <h1>Bezier Fun:</h1> <p>Use your MOUSE to move 'pointB'</p>
</div>
<canvas id="canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>``````

## Bezier Fun - Script Codes CSS Codes

``````* {	margin: 0;
}
canvas {	position: absolute;	width: 100%;	height: 100%;	background: #262626;
}
#info {	color: #FFF;	font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;	margin: 10px 10px 0;	padding: 8px;	background: #161616;	position: absolute;	z-index: 1;
}
#info h1 {	font-size: 18px;
}
#info p {	font-size: 11px;
}``````

## Bezier Fun - Script Codes JS Codes

``````var canvas;
var context;
var screenWidth;
var screenHeight;
var doublePI = Math.PI * 2;
var lerpValue;
var lineStep;
var pointA;
var pointB;
var controlA;
var controlB;
var mousePos;
var manual = false;
{	canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); window.onresize = function()	{	screenWidth = window.innerWidth;	screenHeight = window.innerHeight;	canvas.width = screenWidth;	canvas.height = screenHeight;	pointA.x = screenWidth >> 1;	pointA.y = screenHeight >> 1;	}; lerpValue = 0; lineStep = 0; pointA = Point.create(300, 300); pointB = Point.create(600, 300); window.onresize(); controlA = Point.create(screenWidth >> 1, screenHeight >> 1); controlB = Point.create(screenWidth >> 1, screenHeight >> 1); mousePos = Point.create(0, 0); canvas.addEventListener('mousemove', function(e)	{	if(lineStep > 1) manual = true;	mousePos.x = e.clientX;	mousePos.y = e.clientY;	}); loop();
};
window.getAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback)
{	window.setTimeout(callback, 16.6);
};
function loop()
{	render();	updatePoints();	lerpValue += 0.02;	lineStep += 0.03;	getAnimationFrame(loop);
}
function updatePoints()
{	//pointA.y += Math.sin(lineStep + Math.PI * 0.5) * 2;	if(manual)	{	pointB.x += (mousePos.x - pointB.x) * 0.1;	pointB.y += (mousePos.y - pointB.y) * 0.1;	}	else	{	pointB.x = Math.cos(lerpValue) * (screenWidth >> 1) + (screenWidth >> 1);	pointB.y = Math.sin(lerpValue) * (screenHeight >> 1) + (screenHeight >> 1);	}	controlA.x = Math.cos(lineStep) * (screenWidth >> 2) + (screenWidth >> 1);	controlA.y = Math.sin(lerpValue) * (screenHeight >> 2) + (screenHeight >> 1);	controlB.x = Math.cos(lerpValue) * (screenWidth >> 2) + (screenWidth >> 1);	controlB.y = Math.sin(lineStep) * (screenHeight >> 2) + (screenHeight >> 1);	//pointB.y += (mousePos.y - pointB.y) * 0.1;	//controlA.y += Math.sin(lineStep + Math.PI * 0.5) * 8;	//controlB.y += Math.sin(lineStep + Math.PI * 1) * 8;	//pointA.x += Math.sin(lineStep - 1) * 6;	//pointB.x += (mousePos.x - pointB.x) * 0.1;
}
function render()
{	context.globalAlpha = 1;	context.fillStyle = '#000';	context.fillRect(0, 0, screenWidth, screenHeight);	context.globalAlpha = 1;	renderPoints();	drawBezierCurve(Math.sin(lerpValue) * 0.5 + 0.5, pointA, pointB, controlA, controlB);	//drawBezierCurve(1, pointA, pointB, controlA, controlB);
}
function renderPoints()
{	drawPoint(pointA, 4, '#F00');	drawPoint(pointB, 4, '#F00');	drawPoint(controlA, 4, '#F00');	drawPoint(controlB, 4, '#F00');
}
{	context.beginPath();	context.fillStyle = color;	context.arc(point.x >> 0, point.y >> 0, radius, 0, doublePI);	context.fill();	context.closePath();
}
function drawBezierCurve(t, p1, p2, c1, c2)
{	var r1 = Point.create(lerp(t, p1.x, c1.x), lerp(t, p1.y, c1.y));	var r2 = Point.create(lerp(t, c1.x, c2.x), lerp(t, c1.y, c2.y));	var r3 = Point.create(lerp(t, c2.x, p2.x), lerp(t, c2.y, p2.y));	var r4 = Point.create(lerp(t, r1.x, r2.x), lerp(t, r1.y, r2.y));	var r5 = Point.create(lerp(t, r2.x, r3.x), lerp(t, r2.y, r3.y));	var fp = Point.create(lerp(t, r4.x, r5.x), lerp(t, r4.y, r5.y));	drawPoint(r1, 2, '#FF0');	drawPoint(r2, 2, '#FF0');	drawPoint(r3, 2, '#FF0');	drawPoint(r4, 1, '#FFF');	drawPoint(r5, 2, '#FFF');	drawPoint(fp, 2, '#0F0');	drawLine(pointA, controlA, 2);	drawLine(controlA, controlB, 2);	drawLine(controlB, pointB, 2);	drawLine(r1, r2, 2);	drawLine(r2, r3, 2);	drawLine(r4, r5, 2);	context.beginPath();	context.strokeStyle = '#AAA';	context.lineWidth = 1;	var j = 1;	for(j; j > 0; j -= 0.01)	{	var t1 = Point.create(lerp(j, p1.x, c1.x), lerp(j, p1.y, c1.y));	var t2 = Point.create(lerp(j, c1.x, c2.x), lerp(j, c1.y, c2.y));	var t3 = Point.create(lerp(j, c2.x, p2.x), lerp(j, c2.y, p2.y));	var t4 = Point.create(lerp(j, t1.x, t2.x), lerp(j, t1.y, t2.y));	var t5 = Point.create(lerp(j, t2.x, t3.x), lerp(j, t2.y, t3.y));	var tp = Point.create(lerp(j, t4.x, t5.x), lerp(j, t4.y, t5.y));	if(j == t) context.moveTo(tp.x, tp.y);	else context.lineTo(tp.x, tp.y);	}	context.stroke();	context.closePath();	context.beginPath();	context.strokeStyle = '#FFF';	var i = t;	for(i; i > 0; i -= 0.02)	{	var t1 = Point.create(lerp(i, p1.x, c1.x), lerp(i, p1.y, c1.y));	var t2 = Point.create(lerp(i, c1.x, c2.x), lerp(i, c1.y, c2.y));	var t3 = Point.create(lerp(i, c2.x, p2.x), lerp(i, c2.y, p2.y));	var t4 = Point.create(lerp(i, t1.x, t2.x), lerp(i, t1.y, t2.y));	var t5 = Point.create(lerp(i, t2.x, t3.x), lerp(i, t2.y, t3.y));	var tp = Point.create(lerp(i, t4.x, t5.x), lerp(i, t4.y, t5.y));	context.lineWidth = ((i * 30) >> 0) + 4;	if(i == t) context.moveTo(tp.x, tp.y);	else context.lineTo(tp.x, tp.y);	context.stroke();	}	context.closePath();
}
function drawLine(p1, p2, width)
{	context.strokeStyle = '#222';	context.lineWidth = 1;	context.moveTo(p1.x, p1.y);	context.lineTo(p2.x, p2.y);	context.stroke();	context.closePath();
}
function lerp(value, min, max)
{	return (max - min) * value + min;
}
//VPoint
var Point = (function()
{	//exposed methods:	var create = function(x, y)	{	var obj = Object.create(def);	obj.x = x || 0;	obj.y = y || 0;	return obj;	};	//Vec2D definition:	var def =	{	x:null,	y:null	};	return {create:create};
}());``````
 Developer Jeff Ibacache Username jeffibacache Uploaded June 23, 2022 Rating 4 Size 3,319 Kb Views 54,648
Do you need developer help for Bezier Fun?

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.

Jeff Ibacache (jeffibacache) Script Codes
 Name Size Pseudo Fluids 3,266 Kb Astral Spiral Playground 2,764 Kb Trippy Pac-Man 2,552 Kb Majesty of waves II 3,342 Kb Majesty of waves 3,174 Kb Stardust 2,629 Kb Wave 1,997 Kb Playable Canvas Asteroids 5,711 Kb Pseudo 3D Particles 2,548 Kb A Pen by Jeff Ibacache 2,359 Kb
Create amazing captions 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.