//DRAG & DROPs       
        
draggable = new PlainDraggable(document.getElementById('atata'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};

draggable = new PlainDraggable(document.getElementById('Liquid'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};

draggable = new PlainDraggable(document.getElementById('M'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};

draggable = new PlainDraggable(document.getElementById('Otherness'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
//draggable.snap = {step: 30};

draggable = new PlainDraggable(document.getElementById('pic'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};

draggable = new PlainDraggable(document.getElementById('Resurgence'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};

draggable = new PlainDraggable(document.getElementById('pic2'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};
draggable = new PlainDraggable(document.getElementById('pic3'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};
draggable = new PlainDraggable(document.getElementById('pic4'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};
draggable = new PlainDraggable(document.getElementById('pic5'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};
draggable = new PlainDraggable(document.getElementById('pic6'));
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'}
// draggable.snap = {step: 30};

//P5 DRAWING

// var numberOfRows; //determine the number of rows we want
// var numberOfColumns; //determine the number of columns we want

// var xStep; //determine the size of the gap between two points on the x axis
// var yStep; //determine the size of the gap between two points on the y axis

// var positions = []; //an array of positions where we will store each of our Vectors


function setup() {

    
canvas = createCanvas(windowWidth, windowHeight);
canvas.position(0, 0);
canvas.style('z-index', '-10');  
background(0,0,0,0);


// numberOfColumns = 10; //we want 16 columns
// numberOfRows = 10; //we want 9 rows

// xStep = windowWidth/numberOfColumns; //to make sure they are evenly spaced, we divide the width and height by numberOfColumns
// yStep = windowHeight/numberOfRows; //and numberOfRows respectively

// for(var x = 0; x < width; x += xStep){ //start at the first column, where x = 0

//     for(var y = 0; y < height; y += yStep){ //go through all the rows (y = 0, y = yStep * 1, y  = yStep * 2, etc.)
    
//     var p = createVector(x, y); //we create a vector at this location
    
//     positions.push(p); // and then we put the vector into the array
    
//     }
//     //at the end of the inner for loop, we go back to the first loop, and we increment x
//     //now our column is going to be x = xStep*1, and we populate all the rows with the inner for loop
//     //and again, and again until x > width
// }


}

function draw() {

fill(0,0,0); 

// for(var i = 0; i < positions.length; i++){ //go through all our positions
//     ellipse(positions[i].x, positions[i].y, 2000, 2); //put a circle at each of them
// }
// for(var i = 0; i < positions.length; i++){ //go through all our positions
//     ellipse(positions[i].x, positions[i].y, 2, 2000); //put a circle at each of them
// }


if (mouseIsPressed === true) {
    stroke(0);
    strokeWeight(3)
    line(mouseX, mouseY, pmouseX, pmouseY);
}
}