xxxxxxxxxx311
//sliders variableslet controller_1;let sliderNew;let slider = [];let xPos;//building variableslet building = { x: 250, y: 350, sizeH: 200, sizeV: 600, sizeInternalV: 0, sizeInternalH: 0, paddingTop: 50, paddingBottom: 50, paddingLeft: 50, paddingRight: 50, nWindowH: 5, nWindowV: 4, gapWindowH: 10, gapWindowV: 30,};let font_1 = "SuisseIntlMono-Regular.otf", suisseMono;function preload() { suisseMono = loadFont(font_1);}function setup() { createCanvas(windowWidth, windowHeight); xPos = width - 200; building.x = xPos / 3; //setup sliders for (let s = 0; s < 9; s++) { sliderNew = new ControllerSlider( xPos, 50 + (s * height) / 9.5, xPos, 50 + (s * height) / 9.5, 20, 240, "CONTROLLO " + s ); slider.push(sliderNew); } //name of the slider + random values slider[0].name = "FINESTRE ORIZZONTALI"; slider[0].x = xPos + random(-120, 120); slider[1].name = "FINESTRE VERTICALI"; slider[1].x = xPos + random(-120, 120); slider[2].name = "GAP ORIZZONTALE"; slider[2].x = xPos + random(-120, 120); slider[3].name = "GAP VERTICALE"; slider[3].x = xPos + random(-120, 120); slider[4].name = "POSIZIONE VERTICALE"; slider[4].x = xPos + random(-120, 120); slider[5].name = "DIMENSIONE VERTICALE"; slider[5].x = xPos + random(-10, 120); slider[6].name = "POSIZIONE ORIZZONTALE"; slider[6].x = xPos + random(-120, 120); slider[7].name = "DIMENSIONE ORIZZONTALE"; slider[7].x = xPos + random(-10, 120); slider[8].name = "ALTEZZA PALAZZO"; slider[8].x = xPos + random(-120, 120);}//randomize functionfunction mousePressed() { if ( mouseX < xPos - 200 && mouseX > 0 && mouseY > height - 80 && mouseY < height ) { slider[0].x = xPos + random(-120, 120); slider[1].x = xPos + random(-120, 120); slider[2].x = xPos + random(-120, 120); slider[3].x = xPos + random(-120, 120); slider[4].x = xPos + random(-120, 120); slider[5].x = xPos + random(-10, 120); slider[6].x = xPos + random(-120, 120); slider[7].x = xPos + random(-10, 120); slider[8].x = xPos + random(-120, 120); } return false;}function draw() { //change cursor if ( mouseX < xPos - 200 && mouseX > 0 && mouseY > height - 80 && mouseY < height ) { cursor(CROSS); } else { cursor(ARROW); } background(255); //setup font textFont(suisseMono); //UI stroke(0); line(xPos - 200, 0, xPos - 200, height); fill(0); rectMode(CORNER); rect(0, height - 80, xPos - 200, 80); fill(255); textAlign(CENTER, CENTER); textSize(16); text("RANDOMIZE", building.x, height - 40); //controller mapping building.nWindowH = round( controllerMap(building.nWindowH, slider[0], "x", 1, 4) ); building.nWindowV = round( controllerMap(building.nWindowV, slider[1], "x", 1, 5) ); building.gapWindowV = controllerMap( building.gapWindowV, slider[3], "x", 0, 10 ); building.gapWindowH = controllerMap( building.gapWindowH, slider[2], "x", 0, 10 ); building.paddingTop = controllerMap( building.paddingTop, slider[4], "x", -building.paddingBottom / 2, building.paddingBottom / 2 ); building.paddingBottom = controllerMap( building.paddingBottom, slider[5], "x", building.sizeV, 10 ); building.paddingLeft = controllerMap( building.paddingLeft, slider[6], "x", -building.paddingRight / 2, building.paddingRight / 2 ); building.paddingRight = controllerMap( building.paddingRight, slider[7], "x", building.sizeH, 0 ); building.sizeV = controllerMap(building.sizeV, slider[8], "x", 200, 500); building.y = controllerMap(building.sizeV, slider[8], "x", 450, 300); //DRAWING //building fill(0); noStroke(); rectMode(CENTER); rect(building.x, building.y, building.sizeH + 2, building.sizeV); rect( building.x, building.y + building.sizeV / 2 + 10, building.sizeH + 50, 20 ); rect(building.x, building.y - building.sizeV / 2, building.sizeH + 30, 10); fill(255); rectMode(CORNER); rect( building.x, building.y + building.sizeV / 2, 20, constrain(building.paddingBottom * (building.paddingTop / 80), -200, 0) ); //calculate inner dimension building.sizeInternalV = building.sizeV - building.paddingBottom; building.sizeInternalH = building.sizeH - building.paddingRight; //windows rectMode(CENTER); fill(255); stroke(0); for (let i = 0; i < building.nWindowH; i++) { for (let j = 0; j < building.nWindowV; j++) { let k, h, s; h = building.sizeInternalH / building.nWindowH; v = building.sizeInternalV / building.nWindowV; k = ceil(i / 2) * -(((i % 2) + 1) * 2 - 3); s = ceil(j / 2) * -(((j % 2) + 1) * 2 - 3); if (building.nWindowH % 2 == 0) { if (building.nWindowV % 2 == 0) { rect( building.paddingLeft + building.x + h * k + h / 2, building.paddingTop + building.y + v * s + v / 2, max(0, h - building.gapWindowH), max(0, v - building.gapWindowV) ); } else { rect( building.paddingLeft + building.x + h * k + h / 2, building.paddingTop + building.y + v * s, max(0, h - building.gapWindowH), max(0, v - building.gapWindowV) ); } } else { if (building.nWindowV % 2 == 0) { rect( building.paddingLeft + building.x + h * k, building.paddingTop + building.y + v * s + v / 2, max(0, h - building.gapWindowH), max(0, v - building.gapWindowV) ); } else { rect( building.paddingLeft + building.x + h * k, building.paddingTop + building.y + v * s, max(0, h - building.gapWindowH), max(0, v - building.gapWindowV) ); } } } } //displaying sliders for (let s = 0; s < slider.length; s++) { slider[s].display(); slider[s].grab(); }}//controller mapping function//value is the target variable//controller is the controller object//direction accepts "x" and "y" (it's a string) as the value for horizontal and vertical movement//min and max are the min and max values of the target variable//when using slider controller, input "x" as the directionfunction controllerMap(value, controller, direction, min, max) { let controllerDirection = controller[direction]; if (direction === "x") { value = map( controllerDirection, controller.boxX - controller.boxSize / 2, controller.boxX + controller.boxSize / 2, min, max, true ); } else if (direction === "y") { value = map( controllerDirection, controller.boxY - controller.boxSize / 2, controller.boxY + controller.boxSize / 2, min, max, true ); } return value;}//responsive functionfunction windowResized() { resizeCanvas(windowWidth, windowHeight);}