//properties of displays
const display = {
    W: 1200,
    H: 500
};

const simDisplay = {
    borderLeft: 0,
    borderUp: 0,
    W: 800,
    H: display.H
};

let simCanvas;

let magneticDipoles = [];

let abstractDipole = {x: 300, y: 0, px: simDisplay.W / 2, py: simDisplay.H / 2}
let mu = {x: 1, y: 1}


function setup() {
    outerCanvas = createCanvas(display.W, display.H);
    outerCanvas.parent('simwrapper');

    simCanvas = createGraphics(simDisplay.W, simDisplay.W)

    backgroundColor = color(20);

    setMagneticDipoles(abstractDipole);
}

function draw() {
    background(backgroundColor);

    simCanvas.clear();
    drawMagneticVectors();
    drawAbstractMagnet();
    image(simCanvas, 0, 0);
}

const vectorSpacing = 30;
const vectorPadding = 20;

const scaling = 200
const fMax = 0.0002;

function drawMagneticVectors() {

    let magneticVectorMin = Bvector({px: simDisplay.W, py: 0});
    let fMin = Math.sqrt(magneticVectorMin.x*magneticVectorMin.x + magneticVectorMin.y*magneticVectorMin.y);

    let saturationOffset = 255 * fMin / (fMax + fMin);
    let saturationScalar = (255 - saturationOffset) / fMax;

    simCanvas.noStroke();
    for (let x = vectorPadding; x <= simDisplay.W - vectorPadding; x += vectorSpacing) {
        for (let y = vectorPadding; y <= simDisplay.H - vectorPadding; y += vectorSpacing) {
            let magneticVector = Bvector({px: x, py: y});

            let fieldStrength = Math.sqrt(magneticVector.x*magneticVector.x + magneticVector.y*magneticVector.y);

            let colorSaturation = Math.min(Math.max(fieldStrength * saturationScalar + saturationOffset, 0), 255);

            let angle = Math.atan2(magneticVector.y, magneticVector.x);
            let cosa = Math.cos(angle);
            let sina = Math.sin(angle);

            // Rotate points by angle
            p1 = createVector(-sina * 3, cosa * 3);
            p2 = createVector(-sina  * -3, cosa * -3);
            p3 = createVector(cosa * 10, sina * 10);

            simCanvas.fill(255, 255, 255, colorSaturation);
            simCanvas.triangle(x + p1.x, y + p1.y, x + p2.x, y + p2.y, x + p3.x, y + p3.y);
            simCanvas.fill(255, 0, 0, colorSaturation);
            simCanvas.triangle(x - p1.x, y - p1.y, x - p2.x, y - p2.y, x - p3.x, y - p3.y);
        }
    }
}

const abstractMagnetWidth = 50

function drawAbstractMagnet() {
    let adipole = abstractDipole;
    let length = sqrt(adipole.x*adipole.x + adipole.y*adipole.y);
    let step = {x: adipole.x / length, y: adipole.y / length};
    let pStep = {x: step.y, y: -step.x}

    let x1 = (step.x * length + pStep.x * abstractMagnetWidth) / 2
    let x2 = (step.x * length - pStep.x * abstractMagnetWidth) / 2
    let y1 = (step.y * length + pStep.y * abstractMagnetWidth) / 2
    let y2 = (step.y * length - pStep.y * abstractMagnetWidth) / 2

    simCanvas.fill('grey')

    simCanvas.stroke(255)
    simCanvas.beginShape()
    simCanvas.vertex(x1 + adipole.px, y1 + adipole.py)
    simCanvas.vertex(x2 + adipole.px, y2 + adipole.py)
    simCanvas.vertex(-x1 + adipole.px, -y1 + adipole.py)
    simCanvas.vertex(-x2 + adipole.px, -y2 + adipole.py)
    simCanvas.endShape(CLOSE)
}

function Bvector(r) {
    let B = {x: 0, y:0};

    magneticDipoles.forEach(md => {
        let nr = {px: r.px - md.px, py: r.py - md.py};
        let rl = Math.sqrt(nr.px*nr.px + nr.py*nr.py)

        let r3 = Math.pow(rl, 3);
        let mudotr = md.x * nr.px / rl + md.y * nr.py / rl;
        B.x += (3 * mudotr * nr.px / rl - md.x) / (r3 * magneticDipoles.length);
        B.y += (3 * mudotr * nr.py / rl - md.y) / (r3 * magneticDipoles.length);
    });


    return B;
}

const dipoleDistance = 10;

function setMagneticDipoles(adipole) {
    magneticDipoles = [];
    let length = sqrt(adipole.x*adipole.x + adipole.y*adipole.y);
    let step = {x: adipole.x / length, y: adipole.y / length};
    let startPos = {px: adipole.px - step.x * length / 2, py: adipole.py - step.y * length / 2};

    magneticDipoles.push({x: step.x, y: step.y, px: startPos.px, py: startPos.py})
    magneticDipoles.push({x: step.x, y: step.y, px: startPos.px + step.x * length, py: startPos.py + step.y * length})

    for (let k = 0; k <= length; k += dipoleDistance) {
        magneticDipoles.push({x: step.x * 1000, y: step.y * 1000, px: startPos.px + step.x * k, py: startPos.py + step.y * k})
    }
}