You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
1.9 KiB
91 lines
1.9 KiB
"use strict"
|
|
|
|
let debug = false,
|
|
viewPort = {x: 0, y: 0},
|
|
font;
|
|
|
|
let cube,
|
|
mode = true;
|
|
|
|
let oldMouse = {x: 0, y: 0},
|
|
rotation = {x: -Math.PI / 8, y: -Math.PI / 4};
|
|
|
|
function preload(){
|
|
font = loadFont("data/styles/font.ttf");
|
|
}
|
|
|
|
function setup(){
|
|
canvasSetup();
|
|
interfaceSetup();
|
|
cube = new Cube();
|
|
}
|
|
|
|
function draw(){
|
|
myOrbitControl();
|
|
|
|
background(65);
|
|
cube.update();
|
|
cube.show();
|
|
}
|
|
|
|
function myOrbitControl(){
|
|
if (mouseIsPressed){
|
|
let x = map(mouseY - oldMouse.y, 0, height, 0, TWO_PI),
|
|
y = map(mouseX - oldMouse.x, 0, width, 0, TWO_PI);
|
|
rotation.x -= x;
|
|
rotation.y += y;
|
|
if (abs(rotation.x) > PI / 2){
|
|
rotation.x += x;
|
|
}
|
|
}
|
|
rotateX(rotation.x);
|
|
rotateY(rotation.y);
|
|
oldMouse.x = mouseX;
|
|
oldMouse.y = mouseY;
|
|
}
|
|
|
|
function canvasSetup(){
|
|
setFrameRate(60);
|
|
setAttributes('antialias', true);
|
|
let canvas = createCanvas($("#canvasHolder").width(), $("#canvasHolder").height(), WEBGL);
|
|
canvas.parent("canvasHolder");
|
|
textFont(font);
|
|
|
|
}
|
|
|
|
function interfaceSetup(){
|
|
|
|
let buttons = Object.values($("button:not(.actions)")).slice(0, 18);
|
|
|
|
for (let b of buttons){
|
|
let axis = $(b).parent().attr("class");
|
|
let index = (floor(buttons.indexOf(b) / 2) % 3) - 1;
|
|
let dir = int($(b).attr("id"));
|
|
$(b).click(function(){
|
|
cube.rotate(axis, index, dir, PI / 32);
|
|
});
|
|
$($("." + axis)[index + 1].children).mouseover(function(){
|
|
outer:
|
|
for (let b of cube.bricks){
|
|
for (let lb of cube.getLayer(axis, index)){
|
|
if (b == lb) continue outer;
|
|
}
|
|
for (let f of b.fields){
|
|
f.dark = true;
|
|
}
|
|
}
|
|
$($("." + axis)[index + 1].children).css("background-color", "rgb(30, 30, 30)");
|
|
});
|
|
$($("." + axis)[index + 1].children).mouseleave(function(){
|
|
for (let b of cube.bricks){
|
|
for (let f of b.fields){
|
|
f.dark = false;
|
|
}
|
|
}
|
|
$($("." + axis)[index + 1].children).css("background-color", "rgb(50, 50, 50)");
|
|
});
|
|
}
|
|
|
|
$($(".actions")[0]).click(function(){cube.scramble(20);});
|
|
$($(".actions")[1]).click(() => solve());
|
|
} |