166 lines
3.0 KiB
JavaScript
166 lines
3.0 KiB
JavaScript
var canvas = document.querySelector("canvas");
|
|
|
|
canvas.width=window.innerWidth;
|
|
canvas.height=window.innerHeight;
|
|
|
|
var c=canvas.getContext('2d');
|
|
|
|
var cross= function(l1,l2) { //y=a1*x+b1 and y=a2*x+b2
|
|
x=(l2.b-l1.b)/(l1.a-l2.a);
|
|
y=(l1.a*x+l1.b);
|
|
return [x,y];
|
|
}
|
|
|
|
|
|
function Point(x,y,radius=5,color="white") {
|
|
this.x=x;
|
|
this.y=y;
|
|
this.color=color;
|
|
this.radius=radius;
|
|
this.draw = function() {
|
|
c.beginPath();
|
|
c.arc(this.x,this.y,this.radius,0,Math.PI*2,false);
|
|
c.strokeStyle=this.color;
|
|
c.stroke();
|
|
c.fill();
|
|
}
|
|
this.contact=function(x,y) {
|
|
return Math.sqrt((this.x-x)**2+(this.y-y)**2)<=this.radius*2;
|
|
}
|
|
}
|
|
|
|
function Line(p1,p2,color="white") {
|
|
this.p1=p1;
|
|
this.p2=p2;
|
|
this.color=color;
|
|
this.update = function() { //y=ax+b => b=y-ax
|
|
this.a=(this.p2.y-p1.y)/(this.p2.x-this.p1.x);
|
|
this.b=this.p1.y-this.a*this.p1.x;
|
|
}
|
|
this.draw = function() {
|
|
x1=0;
|
|
y1=this.b;
|
|
x2=canvas.width;
|
|
y2=canvas.width*this.a+this.b;
|
|
c.beginPath();
|
|
c.moveTo(x1,y1);
|
|
c.lineTo(x2,y2);
|
|
c.strokeStyle=this.color;
|
|
c.stroke();
|
|
}
|
|
}
|
|
|
|
function Segment(p1,p2,color="white") { //y=ax+b => b=y-ax
|
|
this.x=[min(p1.x,p2.x),max(p1.x,p2.x)]
|
|
this.y=[min(p1.y,p2.y),max(p1.y,p2.y)]
|
|
this.a=(p2.y-p1.y)/(p1.x-p2.x);
|
|
this.b=p1.y-this.a*p1.x;
|
|
this.color=color;
|
|
this.draw = function() {
|
|
x1=0;
|
|
y1=this.b1;
|
|
x2=canvas.width;
|
|
y2=canvas.width*this.a+this.b;
|
|
c.beginPath();
|
|
c.moveTo(x1,y1);
|
|
c.lineTo(x2,y2);
|
|
c.strokeStyle=this.color;
|
|
c.stroke();
|
|
}
|
|
}
|
|
|
|
function Vector(x,y,color="white") {
|
|
this.x=x;
|
|
this.y=y;
|
|
this.norm=Math.sqrt(this.x**2+this.y**2);
|
|
if (this.x>0) {this.angle=Math.atan(this.y/this.x);}
|
|
else if (this.x<0) {this.angle=Math.atan(this.y/this.x)+Math.PI;}
|
|
else {this.angle=0;}
|
|
|
|
this.apply=function(p){
|
|
p.x=p.x+this.x;
|
|
p.y=p.y+this.y;
|
|
}
|
|
this.project=function(p) {
|
|
|
|
}
|
|
this.crossProduct=function(v) {
|
|
return v.x*this.x+v.y*this.y;
|
|
}
|
|
this.draw=function() {
|
|
|
|
}
|
|
}
|
|
|
|
|
|
var mouse={
|
|
x:undefined,
|
|
y:undefined,
|
|
focus:undefined
|
|
}
|
|
|
|
|
|
window.addEventListener("mousemove",
|
|
function(event) {
|
|
mouse.x=event.x;
|
|
mouse.y=event.y;
|
|
}
|
|
)
|
|
|
|
|
|
|
|
c.onclick = function() {
|
|
mouse.focus=undefined;
|
|
for(var i=0; i<points.length; i++){
|
|
if(points[i].contact(mouse.x,mouse.y)) {mouse.focus=i;}
|
|
}
|
|
console.log('Click just happened');
|
|
};
|
|
|
|
|
|
|
|
var p1=new Point(0,0);
|
|
var p2=new Point(0,1);
|
|
var p3=new Point(1,0);
|
|
var p4=new Point(1,1);
|
|
|
|
var points=[p1,p2,p3,p4];
|
|
|
|
var reverse=new Vector(0,-1);
|
|
var center=new Vector(canvas.width/2,canvas.height/2);
|
|
|
|
|
|
|
|
//alert(l1.a);
|
|
//alert(l2.a);
|
|
|
|
center.apply(p1);
|
|
center.apply(p2);
|
|
center.apply(p3);
|
|
center.apply(p4);
|
|
|
|
var l1=new Line(p1,p4);
|
|
var l2=new Line(p2,p3);
|
|
|
|
|
|
|
|
|
|
function Main(){
|
|
//mouse.click=false;
|
|
c.clearRect(0,0,canvas.width,canvas.height);
|
|
p1.draw();
|
|
p2.draw();
|
|
p3.draw();
|
|
p4.draw();
|
|
p2.x=mouse.x;
|
|
p2.y=mouse.y;
|
|
l1.update();
|
|
l2.update();
|
|
l1.draw();
|
|
l2.draw();
|
|
if(mouse.click){alert("user clicked");}
|
|
requestAnimationFrame(Main);
|
|
}
|
|
|
|
Main();
|