You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
3.8 KiB
JavaScript
105 lines
3.8 KiB
JavaScript
|
|
//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);
|
|
}
|
|
}
|