Muji UI

let canvas

​

let circleX = 100;

let circleY = 100;

let diameter = 15;

​

let grid = 25

let step = 1

let half_step = 0.5

let myModule

let dragging = false

​

function setup() {

​

    canvas = createCanvas(500, 500)

    step = width / grid

    half_step = step / 2

    myModule = initModule(1, 1, 5, 5)

​

    snapAll()

​

    diameter = half_step

​

    noStroke()

​

}

​

function draw() {

​

    displayGrid()

    myModule.display()

​

}

​

function displayNode(o, room) {

​

    fill(0);

    noStroke();

​

    if (dist(o.x, o.y, mouseX, mouseY) < step * 2 / 2 ){

​

        dragging = true

​

    }

    //next step. how do i know if the mouse is over that circle? 

​

    if (dist(o.x, o.y, mouseX, mouseY) < step * 2 / 2 && mouseIsPressed) {

​

        o.x = mouseX;

        o.y = mouseY;

        noStroke()

        stroke(255, 0, 0)

        noFill()

        ellipse(o.x, o.y, 15, 15);

        fill(255, 0, 0)

        // dragging = true

        displayHalf_Grid()

​

        room.updateRoom(o, room)

​

    } else {

​

​

    }

​

    ellipse(o.x, o.y, 5, 5);

​

}

​

function mouseReleased() {

​

     dragging = false

​

    snapAll()

​

}

​

function snapAll() {

​

    if (myModule) {

        // console.log(myModule)

​

        myModule.nodes.forEach(node => {

​

            node.x = Math.round(node.x / half_step) * half_step

            node.y = Math.round(node.y / half_step) * half_step

​

        })

​

        myModule.width = myModule.nodeB.x - myModule.nodeA.x

        myModule.height = myModule.nodeB.y - myModule.nodeA.y

​

    }

​

​

}

​

​

function createNode(x, y, step, label) {

​

    let node = {

​

        x: x * step,

        y: y * step,

        label: label,

​

    }

​

    return node

​

}

​

function initModule(x1, y1, x2, y2) {

​

    let obj = {

​

        nodeA: createNode(x1, y1, step, 'a'),

        nodeB: createNode(x2, y2, step, 'b'),

        nodeC: createNode(x1, y2, step, 'c'),

        nodeD: createNode(x2, y1, step, 'd'),

        width: x2 - x1,

        height: y2 - y1,

        updateRoom: function(node, room) {

​

            let {

                nodeA,

                nodeB,

                nodeC,

                nodeD

            } = room

​

            if (node.label === 'a') {

​

                nodeD.y = nodeA.y

                nodeC.x = nodeA.x

​

            }

​

            if (node.label === 'b') {

​

                nodeD.x = nodeB.x

                nodeC.y = nodeB.y

​

            }

​

            if (node.label === 'c') {

​

                nodeB.y = nodeC.y

                nodeA.x = nodeC.x

​

            }

​

            if (node.label === 'd') {

​

                nodeA.y = nodeD.y

                nodeB.x = nodeD.x

​

            }

​

            room.width = nodeB.x - nodeA.x

            room.height = nodeB.y - nodeA.y

​

​

        },

​

        display: function() {

​

            stroke(0)

            strokeWeight(1)

            fill(255, 100)

            rect(this.nodeA.x, this.nodeA.y, this.width, this.height);

            displayNode(this.nodeA, this)

            displayNode(this.nodeB, this)

            displayNode(this.nodeC, this)

            displayNode(this.nodeD, this)

        }

​

    }

​

    obj.nodes = [obj.nodeA, obj.nodeB, obj.nodeC, obj.nodeD]

​

    return obj

​

}

​

​

function displayHalf_Grid() {

​

​

    stroke(0, 25)

    let cX = Math.round(mouseX / half_step) * half_step

    let cY = Math.round(mouseY / half_step) * half_step

​

    if (dist(cX, cY, mouseX, mouseY) < step && dragging) {

​

        console.log('dragging!')

        for (var x = -2; x < 3; x++) {

​

            line(x * half_step + cX, 0, x * half_step + cX, height)

​

        }

​

        for (var y = -2; y < 3; y++) {

​

            line(0, y * half_step + cY, height, y * half_step + cY)

​

        }

​

        noStroke()

​

        for (var x = -2; x < 3; x++) {

            for (var y = -2; y < 3; y++) {

​

                fill(255, 0, 0, 100)

​

                ellipse(x * half_step + cX, y * half_step + cY, 3, 3)

            }

        }

    }

}

​

function displayGrid() {

​

    background(255)

        // noStroke()

    stroke(0, 25)

​

    for (var x = 0; x < width; x += step) {

​

        line(x, 0, x, height)

​

    }

​

    for (var y = 0; y < width; y += step) {

​

        line(0, y, height, y)

​

    }

​

}

​

// for (var y = 0; y < height; y += step) {

​

//     fill(34, 155, 215)

​

//     ellipse(x, y, 5, 5)

​

// }

​

// }