This is what I have, there are 3 canvases, the green and blue arrows are the electric field for the charge, I don’t know how to make the third canvas (with opacity 0 in the image) rotate a specific amount of degrees depending on the electric force being exerted on the arrows.
javascript:
//distance between the canvas and the charges(x and y)
//x is the green one and y is the blue one
let distanceX = getDistanceBetweenElements(canvas1, x)/100;
let distanceY = getDistanceBetweenElements(canvas1, y)/100;
//Electric force
let f1 = k*((q1*q2)/Math.pow(distanceX,2));
let f2 = k*((q1*q2)/Math.pow(distanceY,2));
//Electric field
let e1 = (k*q1)/Math.pow(distanceX,2);
let e2 = (k*q2)/Math.pow(distanceY,2);
One of the thing that i have is the rotation angle of the blue and green arrows
function angle(cx, cy, ex, ey){
const dy = ey - cy;
const dx = ex - cx;
const rad = Math.atan2(dy, dx);
const deg = rad * 180 / Math.PI;
return deg;
}
//Funcion getPositionAtCenter
function getPositionAtCenter(element) {
const {top, left, width, height} = element.getBoundingClientRect();
return {
x: left + width / 2,
y: top + height / 2
};
}
//Funcion getDistanceBetweenElements
function getDistanceBetweenElements(a, b) {
const aPosition = getPositionAtCenter(a);
const bPosition = getPositionAtCenter(b);
return Math.hypot(aPosition.x - bPosition.x, aPosition.y - bPosition.y);
}
let Q1x = getPositionAtCenter(document.getElementById('x')).x;
let Q1y = getPositionAtCenter(document.getElementById('x')).y;
let Q2x = getPositionAtCenter(document.getElementById('y')).x;
let Q2y = getPositionAtCenter(document.getElementById('y')).y;
const rekt = canvas1.getBoundingClientRect();
const anchorX= rekt.left + rekt.width / 2;
const anchorY= rekt.top + rekt.height / 2;
let angleDeg1 = angle(Q1x, Q1y, anchorX, anchorY);
let angleDeg2 = angle(Q2x, Q2y, anchorX, anchorY);
//rotation angle if the green charge is positive or negative
let positivo1 = angleDeg1+180;
let negativo1 = angleDeg1;
//rotation angle if the blue charge is positive or negative
let positivo2 = angleDeg2 + 180;
let negativo2 = angleDeg2;