#codevember 16 - Angle between rects

Developer
Pedro Cacique
Size
5,818 Kb
Views
16,192
  1. #codevember 16 - Angle between rects Previews
  2. #codevember 16 - Angle between rects HTML Codes
  3. #codevember 16 - Angle between rects CSS Codes
  4. #codevember 16 - Angle between rects JS Codes

How do I make an #codevember 16 - angle between rects?

What is a #codevember 16 - angle between rects? How do you make a #codevember 16 - angle between rects? This script and codes were developed by Pedro Cacique on 20 November 2022, Sunday.

#codevember 16 - Angle between rects Previews
IQ Test

#codevember 16 - Angle between rects - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>#codevember 16 - Angle between rects</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas> <script src='js/zbopdr.js'></script> <script src="js/index.js"></script>
</body>
</html>

#codevember 16 - Angle between rects - Script Codes CSS Codes

html, body{	height: 100%;	margin: 0;
}
body{	display: flex;	justify-content: center;	align-items: center;	background-color: #f0f0f0;
}
canvas{	background-color: #fff;
}

#codevember 16 - Angle between rects - Script Codes JS Codes

var vec1, vec2, dragging;
function init(){	vec1 = new Shape(new Vector(new Point(canvas.width/2, canvas.height/2), new Point(canvas.width/2, canvas.height*0.3)), new Point(), new Color(226, 140, 140,1));	vec2 = new Shape(new Vector(new Point(canvas.width/2, canvas.height/2), new Point(canvas.width*0.8, canvas.height/2)), new Point(), new Color(140, 205, 226,1));	animate();	canvas.addEventListener('mousedown', onMouseDown);	canvas.addEventListener('mouseup', onMouseUp);
}
function animate() {	ctx.clearRect(0,0,canvas.width, canvas.height); drawVec(vec1);	drawVec(vec2);	drawArc(); requestAnimationFrame(animate);
}
function drawVec(shape){	ctx.beginPath();	ctx.lineWidth = shape.lineWidth;	ctx.strokeStyle = shape.lineColor.toRGBA();	ctx.moveTo(shape.geometry.p1.x, shape.geometry.p1.y);	ctx.lineTo(shape.geometry.p2.x, shape.geometry.p2.y);	ctx.stroke();	ctx.beginPath();	ctx.fillStyle = shape.color.toRGBA();	ctx.arc(shape.geometry.p2.x, shape.geometry.p2.y, 5, 0 , Math.PI*2 );	ctx.fill();
}
function drawArc() {	var base = new Vector( new Point(canvas.width/2, canvas.height/2), new Point(canvas.width/2 + 20, canvas.height/2));	var ang1 = vec1.geometry.angleBetween(base);	if(vec1.geometry.p2.y < base.p1.y) ang1 = Math.PI*2 - ang1;	var ang2 = vec2.geometry.angleBetween(base);	if(vec2.geometry.p2.y < base.p1.y) ang2 = Math.PI*2 - ang2;	var d1 = vec1.geometry.p1.distance(vec1.geometry.p2);	var d2 = vec2.geometry.p1.distance(vec2.geometry.p2);	var r = Math.min(d1,d2)*0.5;	ctx.beginPath();	ctx.lineWidth = 1;	ctx.strokeStyle = "#34ad70";	ctx.arc( vec1.geometry.p1.x, vec1.geometry.p1.y, r, ang1, ang2 );	ctx.stroke();	ctx.beginPath();	ctx.fillStyle = "#34ad70";	var ang = (ang1-ang2);	var ang3 = (Math.PI*2-ang);	var ang4 = ang3*180/Math.PI	if(ang4 > 360) ang4 -= Math.floor(ang4/360)*360;	ang4 = Math.round(ang4* 100) / 100;	ctx.font="10px Georgia";	var x = vec1.geometry.p1.x + r*1.5 * Math.cos(ang2 - Math.abs(ang3)/2);	var y = vec1.geometry.p1.y + r*1.5 * Math.sin(ang2 - Math.abs(ang3)/2);	ctx.fillText(ang4 + " deg",x,y);
}
function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return new Point( evt.clientX - rect.left, evt.clientY - rect.top );
}
function onMouseDown(evt) { var pt = getMousePos(canvas, evt);	if (pt.distance(vec1.geometry.p2) < 10 ) {	dragging = vec1;	canvas.addEventListener("mousemove", onMouseMove); }	if (pt.distance(vec2.geometry.p2) < 10 ) {	dragging = vec2;	canvas.addEventListener("mousemove", onMouseMove); }
}
function onMouseMove(evt) { var pt = getMousePos(canvas, evt); if (dragging != null) {	dragging.geometry.p2 = pt.clone(); }
}
function onMouseUp(evt) { dragging = null;
}
//-------
var canvas, ctx, FPS = 60;
window.onload = function(){	initCanvas();	init();
};
window.onresize = function(){	initCanvas();	init();
};
function initCanvas() {	canvas = document.getElementById("canvas");	ctx = canvas.getContext('2d');	canvas.width = window.innerWidth*0.7;	canvas.height = window.innerHeight*0.7;
}
var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { return setTimeout(callback, FPS);
};
#codevember 16 - Angle between rects - Script Codes
#codevember 16 - Angle between rects - Script Codes
Home Page Home
Developer Pedro Cacique
Username phcacique
Uploaded November 20, 2022
Rating 4
Size 5,818 Kb
Views 16,192
Do you need developer help for #codevember 16 - Angle between rects?

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!

Pedro Cacique (phcacique) Script Codes
Name
Web Theremin
Page transition
Aside Hover Menu
One page scrolling
Grid Interaction
Platform game mechanics
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!