字母三角形（AlphabetTriangle）
2024/5/7 13:43:16
字母三角形（AlphabetTriangle）
- 示例
- HTML
- CSS
- JS
更多有趣示例 尽在小红砖社区
示例
HTML
<html lang="en">
<head><title>AlphabetTriangle</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><!-- CSS --><link type="text/css" rel="stylesheet" href="main.css"><!-- Three.js CDN --><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script><script src="https://cdn.jsdelivr.net/npm/threejs-extras-examples@0.73.0/examples/js/renderers/CSS2DRenderer.js"></script></head>
<body><!-- WEB GL RENDERING --><div id="container"></div><!-- MENU BAR --><div id="menu"><button id="button_labels">ID</button><button id="button_grid">GRID</button><button id="button_fixed">FIXED</button><button id="button_shuffle">SHUFFLE</button><button id="button_config">CONFIG</button></div><!-- CONFIG BAR --><span id="config" style="display: none;">Configuration<!-- Examples#01r#09r#21r#02l#03m#08m#07r#06l#14r#10r#11r#12r#13r#16l#25l#05r#17m#18l#19l#20r#24l#23r#22l#15m#04l##08r#10m#21r#02l#03m#01m#07r#06r#14r#05m#11r#12r#13r#16m#25l#15l#17m#18l#19l#20r#24l#23m#22l#09l#04l##08r#05l#21r#02l#03m#01m#07r#06r#14r#10m#11r#12r#13r#16m#25l#15l#17m#18l#19l#20r#24l#23m#22l#09l#04l##01r#25r#16r#23m#09m#05r#06l#21r#11l#08m#10l#12r#13l#02m#19r#24m#17m#18l#03l#14r#20m#07l#15r#22r#04l##12l#22m#11r#03l#15r#05l#02l#14m#20m#19l#09m#01l#06l#10r#23l#07r#17m#18l#24r#13r#08m#21r#25m#16m#04l##03m#15l#05r#09r#02l#22m#01l#14m#20m#11l#19m#13r#16r#24m#23l#07r#17m#18l#10m#06r#08r#21l#25l#12l#04l##01r#22r#16r#24m#10l#13r#12l#11m#04m#14l#20l#23r#19l#02r#06m#08m#15r#07l#09r#03m#05l#17r#21m#25l#18m##01r#22r#16r#24m#10l#13r#09r#15m#02r#25r#23m#12r#07m#21l#19l#08m#18r#04r#05r#11r#03l#06l#14l#20l#17r##01r#22r#16r#24m#10l#13r#21m#11r#03m#07m#17r#02r#12m#25r#06r#23l#18r#19l#08l#09m#04m#14r#20m#15m#05m#--><input id="input_config" type="text" style="margin-left: 10px; width: 600px;" value=""><button id="copy_config">COPY</button><button id="delete_config">DELETE</button></span><!-- AlphabetTriangle Code --><script src="figures.js"></script><script src="figureBuilder.js"></script><script src="main.js"></script>
</body>
</html>
CSS
#stats {position: absolute;top: 20px;width: 100%;text-align: center;
}
#menu {position: absolute;bottom: 20px;width: 100%;text-align: center;background-color: rgba(70,255,255,0.12);color: rgba(127,255,255,0.75);font-family: futurama;
}
#config {position: absolute;top: 20px;width: 100%;text-align: center;background-color: rgba(70,255,255,0.12);color: rgba(127,255,255,0.75);font-family: futurama;
}
button {color: rgba(127,255,255,0.7);background: transparent;outline: 1px solid rgba(127,255,255,0.75);border: 0px;padding: 5px 10px;cursor: pointer;z-index: 100;
}
button:hover {background-color: rgba(255,255,255,0.5);
}
button:active {color: #000000;background-color: rgba(0,255,255,0.75);
}
.label {color: #FFF;font-family: futurama;padding: 2px;font-size: 10px;background: rgba( 0, 0, 0, .6 );
}
JS
///////////////////////////////////////////////////////////////////////////
// CLASS Figure //////////////
// containing all 25 figures //////////////
///////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
class Figure {constructor() {this.figures = new Array(26);for(var i = 0; i<26; i+=1){this.figures[i] = new Array(2);}this.figures[ 0][0] = [ 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[ 1][0] = [ 0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,1,1,1,1,1,1,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[ 2][0] = [ 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[ 3][0] = [ 0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[ 4][0] = [ 0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[ 5][0] = [ 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[ 6][0] = [ 0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[ 7][0] = [ 0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[ 8][0] = [ 0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[ 9][0] = [ 0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[10][0] = [ 0,0,0,0,1,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[11][0] = [ 0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,1,0,0,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[12][0] = [ 0,1,0,0,1,1,0,0,0,1,1,0,0,0,0,0,1,1,1,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0]this.figures[13][0] = [ 0,0,0,0,1,1,1,1,1,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[14][0] = [ 0,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[15][0] = [ 0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[16][0] = [ 0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[17][0] = [ 0,0,0,0,0,0,1,1,1,0,0,1,1,1,1,0,0,0,1,1,1,1,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[18][0] = [ 0,0,0,0,1,0,0,0,0,1,1,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[19][0] = [ 0,0,0,0,1,0,0,0,0,1,1,1,0,0,0,0,1,1,0,0,1,0,0,0,0,0,1,1,0,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0]this.figures[20][0] = [ 0,1,0,0,1,1,0,0,0,1,1,0,0,0,0,0,0,0,1,1,1,0,0,0,0,1,0,1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0]this.figures[21][0] = [ 0,1,0,0,1,1,1,0,0,1,1,1,1,0,0,0,1,1,1,1,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]this.figures[22][0] = [ 0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0]this.figures[23][0] = [ 0,0,0,0,0,0,0,0,1,0,0,0,0,1,1,1,0,0,0,0,1,1,1,1,1,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,0,0,0]this.figures[24][0] = [ 0,0,0,0,1,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0]this.figures[25][0] = [ 0,1,0,0,1,1,1,0,0,0,1,1,1,1,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0]this.figures[ 0][1] = "EMPTY";this.figures[ 1][1] = "tg";this.figures[ 2][1] = "tj";this.figures[ 3][1] = "lg";this.figures[ 4][1] = "kg/tp"this.figures[ 5][1] = "tq";this.figures[ 6][1] = "lj";this.figures[ 7][1] = "hg/kj";this.figures[ 8][1] = "fg";this.figures[ 9][1] = "hj";this.figures[10][1] = "dg";this.figures[11][1] = "fj/lp";this.figures[12][1] = "bg/kp/lq/ty";this.figures[13][1] = "dj/kq";this.figures[14][1] = "bj/hp";this.figures[15][1] = "hq";this.figures[16][1] = "fp";this.figures[17][1] = "fq";this.figures[18][1] = "dp";this.figures[19][1] = "dq/ly";this.figures[20][1] = "bp/ky";this.figures[21][1] = "bq";this.figures[22][1] = "hy";this.figures[23][1] = "fy";this.figures[24][1] = "dy";this.figures[25][1] = "by";}rotate(id){var o = this.figures[id][0];var r = [o[48],o[35],o[47],o[46],o[24],o[34],o[33],o[45],o[44],o[15],o[23],o[22],o[32],o[31],o[43],o[42],o[ 8],o[14],o[13],o[21],o[20],o[30],o[29],o[41],o[40],o[ 3],o[ 7],o[ 6],o[12],o[11],o[19],o[18],o[28],o[27],o[39],o[38],o[ 0],o[ 2],o[ 1],o[ 5],o[ 4],o[10],o[ 9],o[17],o[16],o[26],o[25],o[37],o[36]]return r;}getFigure(id, rot, flip){var figure = this.figures[id][0];if(rot == -1){figure = this.rotate(id);}if(rot == 1){figure = this.rotate(id);figure = this.rotate(id);}return figure;}getFigureName(id){var name = this.figures[id][1];return name;}}///////////////////////////////////////////////////////////////////////////
// CLASS FigureBuilder //////////////
// organize figures in list-form and pyramide-form //////////////
// create Mesh-Data //////////////
///////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
class FigureBuilder {constructor(size, f_color, bg_color) {var tri_height = 866025403784;var tri_height = tri_height;var tri_side = 1000000000000;var tri_side_half = tri_side/2;this.tri = new THREE.Vector2();this.tri.x = tri_side_half;this.tri.y = tri_height;this.tri.normalize();this.SIZE = size * 25/100;this.F_COLOR = f_color;this.BG_COLOR = bg_color;//Construction of 1 single figure out of alternating trianglesthis.idMap = [[0,0,0],[1,0,0], [1,0,1], [1,1,0],[2,0,0], [2,0,1], [2,1,0], [2,1,1], [2,2,0],[3,0,0], [3,0,1], [3,1,0], [3,1,1], [3,2,0], [3,2,1], [3,3,0],[4,0,0], [4,0,1], [4,1,0], [4,1,1], [4,2,0], [4,2,1], [4,3,0], [4,3,1], [4,4,0],[5,0,0], [5,0,1], [5,1,0], [5,1,1], [5,2,0], [5,2,1], [5,3,0], [5,3,1], [5,4,0], [5,4,1], [5,5,0],[6,0,0], [6,0,1], [6,1,0], [6,1,1], [6,2,0], [6,2,1], [6,3,0], [6,3,1], [6,4,0], [6,4,1], [6,5,0], [6,5,1], [6,6,0],[7,0,0], [7,0,1], [7,1,0], [7,1,1], [7,2,0], [7,2,1], [7,3,0], [7,3,1], [7,4,0], [7,4,1], [7,5,0], [7,5,1], [7,6,0], [7,6,1], [7,7,0]]this.flippedSlots = [3,6,8,11,13,15,18,20,22,24];this.figure_collection = new Figure();this.figurePositions = this.createFigurePositions();this.figureRotations = this.createFigureRotations();this.slotToPositionMap = this.createSlotToPositionMap();this.positionMapForList = this.createPositionMapForList();this.listOfFigures = this.createListOfFigures();this.pyramideOfFigures = this.createPyramideOfFigures();}//Returns: [(x1,y1),(x2,y2),(x2,y2)]getTriangleCoords(row, col, mir, size, flip){var vector_l = new THREE.Vector2();var vector_r = new THREE.Vector2();var vector_s = new THREE.Vector2();var point_1 = new THREE.Vector2();var point_2 = new THREE.Vector2();var point_3 = new THREE.Vector2();vector_l.x = -this.tri.x*size*flip;vector_l.y = -this.tri.y*size*flip;vector_r.x = this.tri.x*size*flip;vector_r.y = -this.tri.y*size*flip;vector_s.x = 2*this.tri.x*size*flip;vector_s.y = 0*flip;point_1.x = vector_l.x*row + vector_s.x*col; //Top (or if mirrored) Left Toppoint_1.y = vector_l.y*row + vector_s.y*col;point_2.x = point_1.x+vector_l.x + (vector_s.x-vector_l.x)*mir; //Left Bottom (or if mirrored) Right Toppoint_2.y = point_1.y+vector_l.y + (vector_s.y-vector_l.y)*mir;point_3.x = point_1.x+vector_r.x; //Right Bottom (or if mirrored) Bottompoint_3.y = point_1.y+vector_r.y;var points = [point_1, point_2, point_3];return points;
}//returns triangles[ triangle1, triangle2, triangle3, ... ]
//with triangle[ x1,y1, x2,y2, x3,y3 , color ]
createFigure(fig_id, size, x, y, rot, flip){var triangles = [];var figure = this.figure_collection.getFigure(fig_id, rot, flip);var vector_pos = new THREE.Vector2();vector_pos.x = x;vector_pos.y = y;var vector_h = new THREE.Vector2();vector_h.x = 0;vector_h.y = this.tri.y*7*size;var tri_center_vector = new THREE.Vector2();tri_center_vector.x = 0;tri_center_vector.y = (0 + vector_h.y + vector_h.y)/3;for (var id = 0; id < 49; id++) {var idMapEl = this.idMap[id];var points = this.getTriangleCoords(idMapEl[0],idMapEl[1],idMapEl[2], size, flip);var point1 = new THREE.Vector2();var point2 = new THREE.Vector2();var point3 = new THREE.Vector2();// tri_center_vector centers the Figure to its barycenterif(flip==1){point1.x = points[0].x + vector_pos.x;point1.y = points[0].y + vector_pos.y + tri_center_vector.y;point2.x = points[1].x + vector_pos.x;point2.y = points[1].y + vector_pos.y + tri_center_vector.y;point3.x = points[2].x + vector_pos.x;point3.y = points[2].y + vector_pos.y + tri_center_vector.y;}else{point1.x = points[0].x + vector_pos.x;point1.y = points[0].y + vector_pos.y - tri_center_vector.y;point2.x = points[1].x + vector_pos.x;point2.y = points[1].y + vector_pos.y - tri_center_vector.y;point3.x = points[2].x + vector_pos.x;point3.y = points[2].y + vector_pos.y - tri_center_vector.y;}var value = figure[id];var color = this.F_COLOR;if(value == 0){ color = this.BG_COLOR; }var triangle = [];triangle.push(point1.x);triangle.push(point1.y);triangle.push(point2.x);triangle.push(point2.y);triangle.push(point3.x);triangle.push(point3.y);triangle.push(color);triangles.push(triangle);}return triangles;
}createOutline(size, x, y, rot, flip){var triangles = [];var vector_pos = new THREE.Vector2();vector_pos.x = x;vector_pos.y = y;var vector_h = new THREE.Vector2();vector_h.x = 0;vector_h.y = this.tri.y*7*size;var side = this.tri.x*3.5;var tri_center_vector = new THREE.Vector2();tri_center_vector.x = 0;tri_center_vector.y = (0 + vector_h.y + vector_h.y)/3;var idMapEl = this.idMap[0];var points = this.getTriangleCoords(idMapEl[0],idMapEl[1],idMapEl[2], size*7, flip);var point1 = new THREE.Vector2();var point2 = new THREE.Vector2();var point3 = new THREE.Vector2();// tri_center_vector centers the Figure to its barycenterif(flip==1){point1.x = points[0].x + vector_pos.x;point1.y = points[0].y + vector_pos.y + tri_center_vector.y;point2.x = points[1].x + vector_pos.x;point2.y = points[1].y + vector_pos.y + tri_center_vector.y;point3.x = points[2].x + vector_pos.x;point3.y = points[2].y + vector_pos.y + tri_center_vector.y;}else{point1.x = points[0].x + vector_pos.x;point1.y = points[0].y + vector_pos.y - tri_center_vector.y;point2.x = points[1].x + vector_pos.x;point2.y = points[1].y + vector_pos.y - tri_center_vector.y;point3.x = points[2].x + vector_pos.x;point3.y = points[2].y + vector_pos.y - tri_center_vector.y;}var color = 0.90;var triangle = [];triangle.push(point1.x);triangle.push(point1.y);triangle.push(point2.x);triangle.push(point2.y);triangle.push(point3.x);triangle.push(point3.y);triangle.push(color);triangles.push(triangle);return triangles;
}//returns figures[ triangles1, triangles2, triangles3, ... ]
//with triangles[ triangle1, triangle2, triangle3, ... ]
//with triangle[ x1,y1, x2,y2, x3,y3 , color ]
createListOfFigures(){ //Local Positions for each Figure -> must be transformed to right positions
var figure_list = [];
var center_x = 0;
var center_y = 0;
for(var id = 1; id <= 25; id++){figure_list.push(this.createFigure( id, this.SIZE, center_x, center_y, 0, 1));
}
return figure_list;
}createPositionMapForList(){
var positionMapForList = new Array(25);
var center_x = -4*8*this.SIZE / 2;
var center_y = 4*8*this.SIZE / 2;
for(var fig_id = 1; fig_id <= 25; fig_id++){positionMapForList[fig_id-1] = [center_x + ((fig_id-1)%5) * 8 * this.SIZE, center_y - (parseInt((fig_id-1)/5)) * 8 * this.SIZE, 0];
}
return positionMapForList;
}//Pyramide of Figures
createPyramideOfFigures(){
var figure_pyramide = new Array(25);
for(var id = 1; id <= 25; id++){var layers = new Array();layers.push( this.createFigure( this.getFigureForSlot(id), this.SIZE, 0, 0, this.getFigureRotation(id), 1) );layers.push( this.createOutline( this.SIZE, 0, 0, this.getFigureRotation(id), 1) );figure_pyramide[id-1] = layers;
}
return figure_pyramide;
}createSlotToPositionMap(){
var side = 7*(this.tri.x)*this.SIZE;
var fside = 2*side;
var height = 7*(this.tri.y)*this.SIZE;
var flipoffset = -(0 + height + height)/3 + height;
var center_x = 0;
var center_y = 5*height/2;
var slotToPositionMap = new Array(25);
slotToPositionMap[ 0] = [ center_x - side*0 + fside*0 , center_y - height*0 ]; // #row 0 #Slot 1
slotToPositionMap[ 1] = [ center_x - side*1 + fside*0 , center_y - height*1 ]; // #row 1 #Slot 2
slotToPositionMap[ 3] = [ center_x - side*1 + fside*1 , center_y - height*1 ]; // #Slot 4
slotToPositionMap[ 4] = [ center_x - side*2 + fside*0 , center_y - height*2 ]; // #row 2 #Slot 5
slotToPositionMap[ 6] = [ center_x - side*2 + fside*1 , center_y - height*2 ]; // #Slot 7
slotToPositionMap[ 8] = [ center_x - side*2 + fside*2 , center_y - height*2 ]; // #Slot 9
slotToPositionMap[ 9] = [ center_x - side*3 + fside*0 , center_y - height*3 ]; // #row 3 #Slot 10
slotToPositionMap[11] = [ center_x - side*3 + fside*1 , center_y - height*3 ]; // #Slot 12
slotToPositionMap[13] = [ center_x - side*3 + fside*2 , center_y - height*3 ]; // #Slot 14
slotToPositionMap[15] = [ center_x - side*3 + fside*3 , center_y - height*3 ]; // #Slot 16
slotToPositionMap[16] = [ center_x - side*4 + fside*0 , center_y - height*4 ]; // #row 4 #Slot 17
slotToPositionMap[18] = [ center_x - side*4 + fside*1 , center_y - height*4 ]; // #Slot 19
slotToPositionMap[20] = [ center_x - side*4 + fside*2 , center_y - height*4 ]; // #Slot 21
slotToPositionMap[22] = [ center_x - side*4 + fside*3 , center_y - height*4 ]; // #Slot 23
slotToPositionMap[24] = [ center_x - side*4 + fside*4 , center_y - height*4 ]; // #Slot 25
//#MIRROR
slotToPositionMap[ 2] = [ center_x - side*1 + side*1 , center_y - height*1 + flipoffset ]; // #row 1 #Slot 3
slotToPositionMap[ 5] = [ center_x - side*2 + side*1 , center_y - height*2 + flipoffset ]; // #row 2 #Slot 6
slotToPositionMap[ 7] = [ center_x - side*2 + side*3 , center_y - height*2 + flipoffset ]; // #Slot 8
slotToPositionMap[10] = [ center_x - side*3 + side*1 , center_y - height*3 + flipoffset ]; // #row 3 #Slot 11
slotToPositionMap[12] = [ center_x - side*3 + side*3 , center_y - height*3 + flipoffset ]; // #Slot 13
slotToPositionMap[14] = [ center_x - side*3 + side*5 , center_y - height*3 + flipoffset ]; // #Slot 15
slotToPositionMap[17] = [ center_x - side*4 + side*1 , center_y - height*4 + flipoffset ]; // #row 4 #Slot 18
slotToPositionMap[19] = [ center_x - side*4 + side*3 , center_y - height*4 + flipoffset ]; // #Slot 20
slotToPositionMap[21] = [ center_x - side*4 + side*5 , center_y - height*4 + flipoffset ]; // #Slot 22
slotToPositionMap[23] = [ center_x - side*4 + side*7 , center_y - height*4 + flipoffset ]; // #Slot 24return slotToPositionMap;
}slotXPosition(slot){ return this.slotToPositionMap[slot-1][0]; }
slotYPosition(slot){ return this.slotToPositionMap[slot-1][1]; }
getFigureForSlot(slot){ return this.figurePositions[slot-1]; }
setFigureForSlot(slot, fig_id){ this.figurePositions[slot-1] = fig_id; }
getFigureRotation(fig_id){ return this.figureRotations[fig_id-1]; }
setFigureRotation(fig_id, fig_rot){ this.figureRotations[fig_id-1] = fig_rot; }
getIfFlipped(slot){ return this.flippedSlots.includes(slot); }getSlotForFigure(fig_id){
for(var slot = 1; slot<=25; slot+=1){if(this.getFigureForSlot(slot) == fig_id){return slot;}
}
return 1; //ERROR
}rotateFigure(slot){
var rot = this.getFigureRotation(slot);
rot -= 1;
if(rot == -2){ rot = 1; }
this.setFigureRotation(slot,rot);
}switchSlotFigures(slot1, slot2){
var sf1 = this.getFigureForSlot(slot1);
var sf2 = this.getFigureForSlot(slot2);
this.setFigureForSlot(slot1, sf2);
this.setFigureForSlot(slot2, sf1);
}//https://stackoverflow.com/questions/2464902/determine-if-a-point-is-inside-a-triangle-formed-by-3-points-with-given-latitude
pointInTriange(P, A, B, C) {
// Compute vectors
function vec(from, to) { return [to[0] - from[0], to[1] - from[1]]; }
var v0 = vec(A, C);
var v1 = vec(A, B);
var v2 = vec(A, P);
// Compute dot products
function dot(u, v) { return u[0] * v[0] + u[1] * v[1]; }
var dot00 = dot(v0, v0);
var dot01 = dot(v0, v1);
var dot02 = dot(v0, v2);
var dot11 = dot(v1, v1);
var dot12 = dot(v1, v2);
// Compute barycentric coordinates
var invDenom = 1.0 / (dot00 * dot11 - dot01 * dot01);
var u = (dot11 * dot02 - dot01 * dot12) * invDenom;
var v = (dot00 * dot12 - dot01 * dot02) * invDenom;
// Check if point is in triangle
return (u >= 0) && (v >= 0) && (u + v < 1);
}getCorners(slot) {
//var corners = [[0.0, 0.0],[0.5, 0.0],[0.0, 0.5]];
var cx = this.slotXPosition(slot);
var cy = this.slotYPosition(slot);
var side = 7*(this.tri.x)*this.SIZE;
var fside = 2*side;
var height = 7*(this.tri.y)*this.SIZE;
var tri_center_vector = new THREE.Vector2();
//tri_center_vector.x = 0;
//tri_center_vector.y = (0 + height + height)/3;
tri_center_vector.y = 0;
var x1 = 0 + cx;
var y1 = 0 + cy + tri_center_vector.y;
var x2 = -fside + cx;
var y2 = height + cy + tri_center_vector.y;
var x3 = fside + cx;
var y3 = height + cy + tri_center_vector.y;var corners = [[x1,y1],[x2,y2],[x3,y3]];
return corners;
}getSlotForXY(x,y) {
for(var slot = 1; slot <= 25; slot += 1){var P = [x, y];var corners = this.getCorners(slot);var A = [corners[0][0],corners[0][1]];var B = [corners[1][0],corners[1][1]];var C = [corners[2][0],corners[2][1]];if(this.pointInTriange(P, A, B, C)){return slot;}
}
return null;
}createFigurePositions(){
var p01 = 1; var p02 = 2; var p03 = 3; var p04 = 4; var p05 = 5;
var p06 = 6; var p07 = 7; var p08 = 8; var p09 = 9; var p10 = 10;
var p11 = 11; var p12 = 12; var p13 = 13; var p14 = 14; var p15 = 15;
var p16 = 16; var p17 = 17; var p18 = 18; var p19 = 19; var p20 = 20;
var p21 = 21; var p22 = 22; var p23 = 23; var p24 = 24; var p25 = 25;var FigurePositions = [p01,p02,p03,p04,p05,p06,p07,p08,p09,p10,p11,p12,p13,p14,p15,p16,p17,p18,p19,p20,p21,p22,p23,p24,p25
];return FigurePositions;
}setConfiguration(positions, rotations){
this.figurePositions = positions;
this.figureRotations = rotations;
}getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {// Pick a remaining element...randomIndex = Math.floor(Math.random() * currentIndex);currentIndex -= 1;// And swap it with the current element.temporaryValue = array[currentIndex];array[currentIndex] = array[randomIndex];array[randomIndex] = temporaryValue;
}
return array;
}setRandomConfiguration(){
var ids = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25];
this.figurePositions = this.shuffle(ids);
}permuteConfiguration(){
}createFigureRotations(){
var figureRotations = new Array();
for(var i = 0; i<25; i+=1){figureRotations.push(0);
}
return figureRotations;
}getCoord(array_ref, fig_id, layer, triangle_index, coord_index){var coord;if(array_ref==0){ coord = this.listOfFigures[fig_id-1][triangle_index][coord_index]; }if(array_ref==1){ coord = this.pyramideOfFigures[fig_id-1][layer][triangle_index][coord_index]; }return parseFloat(coord);
}getName(fig_id){return this.figure_collection.getFigureName(fig_id);
}//Mesh_Group 0 -> List of Figures
//Mesh_Group 1 -> Pyramide of Figures - Grid
//Mesh_Group 2 -> Pyramide of Figures - Outline
toPositionBuffer(fig_id, mesh_group){
var triangles, array_ref, layer;
if(mesh_group == 0){ triangles = 49; array_ref = 0; layer = null;}
if(mesh_group == 1){ triangles = 49; array_ref = 1; layer = 0;}
if(mesh_group == 2){ triangles = 1; array_ref = 1; layer = 1;}
var positions = new Float32Array( triangles * 3 * 3 );
for ( var t = 0; t < triangles; t += 1 ) {var i = t*9;positions[ i + 0 ] = this.getCoord(array_ref, fig_id, layer, t, 0); //Point 1 -> xpositions[ i + 1 ] = this.getCoord(array_ref, fig_id, layer, t, 1); //Point 1 -> ypositions[ i + 2 ] = parseFloat(0); //Point 1 -> zpositions[ i + 3 ] = this.getCoord(array_ref, fig_id, layer, t, 2); //Point 2 -> xpositions[ i + 4 ] = this.getCoord(array_ref, fig_id, layer, t, 3); //Point 2 -> ypositions[ i + 5 ] = parseFloat(0); //Point 2 -> zpositions[ i + 6 ] = this.getCoord(array_ref, fig_id, layer, t, 4); //Point 3 -> xpositions[ i + 7 ] = this.getCoord(array_ref, fig_id, layer, t, 5); //Point 3 -> ypositions[ i + 8 ] = parseFloat(0); //Point 3 -> z
}
return positions;
}toNormalBuffer(fig_id){
var normals = new Float32Array( 49 * 3 * 3 );
for ( var t = 0; t < 49; t += 1 ) {var i = t*9;normals[ i + 0 ] = parseFloat(0);normals[ i + 1 ] = parseFloat(0);normals[ i + 2 ] = parseFloat(1);normals[ i + 3 ] = parseFloat(0);normals[ i + 4 ] = parseFloat(0);normals[ i + 5 ] = parseFloat(1);normals[ i + 6 ] = parseFloat(0);normals[ i + 7 ] = parseFloat(0);normals[ i + 8 ] = parseFloat(1);
}
return normals;
}toColorBuffer(fig_id){
var colors = new Float32Array(49 * 3 * 3 );
var color = new THREE.Color();
for ( var t = 0; t < 49; t += 1 ) {var i = t*9;var c = this.listOfFigures[fig_id-1][t][6];color.setRGB(c[0], c[1], c[2]);colors[ i + 0 ] = color.r;colors[ i + 1 ] = color.g;colors[ i + 2 ] = color.b;colors[ i + 3 ] = color.r;colors[ i + 4 ] = color.g;colors[ i + 5 ] = color.b;colors[ i + 6 ] = color.r;colors[ i + 7 ] = color.g;colors[ i + 8 ] = color.b;
}
return colors;
}
}///////////////////////////////////////////////////////////////////////////
// MAIN CODE //////////////
// Use Mesh-Data from FigureBuilder //////////////
// Rendering & Program Logic //////////////
// Interaction with Figures //////////////
// "Saving/Loading" via Config Button //////////////
///////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////Size of All Figures
var SIZE = 100;
//Background
var HEX_BACKGROUND = 0x151515;
//Scene Light
var HEX_AMBIENT_LIGHT = 0xff00ff;
var HEX_DIRECT_LIGHT = 0x000000;
//Front and Background Colors of Figure
var BG_COLOR = [0,20,20];
var F_COLOR = [200,200,200];var HEX_FIGURE_AREA_COLOR = 0x011010; //0x333333;
var HEX_FIGURE_AREA_HOVERED = 0x333333; //0xff6666; //Color when hovered
var HEX_FIGURE_AREA_EMISSIVE = 0x000000;
var HEX_FIGURE_OUTLINE = 0x333333;
var HEX_FIGURE_GRID = 0x101010;//Button Colors
var BUTTON_INACTIVE_COLOR = "transparent";
var BUTTON_ACTIVE_COLOR = "rgba(0,255,255,0.5)";
//Button States
var GRID_ACTIVE = true;
var FIXED_ACTIVE = true;
var SHUFFLE_ACTIVE = false;
var LABELS_ACTIVE = false;
var CONFIG_ACTIVE = false;var CONTAINER;
var STATS;
var button_labels = document.getElementById( 'button_labels' );
var button_grid = document.getElementById( 'button_grid' );
var button_fixed = document.getElementById( 'button_fixed' );
var button_shuffle = document.getElementById( 'button_shuffle' );
var button_config = document.getElementById( 'button_config' );
var config_span = document.getElementById( 'config' );
var input_config = document.getElementById( 'input_config' );
var copy_config = document.getElementById( 'copy_config' );
var delete_config = document.getElementById( 'delete_config' );
var menu = document.getElementById( 'menu' );var CAMERA, SCENE;
var RENDERER, LABEL_RENDERER;
var RAYCASTER;
var MOUSE, MOUSE_PYR;var ARRAY_LF = [];
var GROUP_L, GROUP_P, GROUP_LABEL_NR_L, GROUP_LABEL_NR_P, GROUP_LABEL_NAME;
var FB;init();
animate();
function init() {
CONTAINER = document.getElementById( 'container' );
////////////////////////////////////////////////////////////////////////////////////////
// Scene Creation
////////////////////////////////////////////////////////////////////////////////////////
CAMERA = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
CAMERA.position.z = 2750;
SCENE = new THREE.Scene();
SCENE.background = new THREE.Color( HEX_BACKGROUND );
SCENE.fog = new THREE.Fog( 0x050505, 2000, 3500 );
SCENE.add( new THREE.AmbientLight( HEX_AMBIENT_LIGHT ) );
var light1 = new THREE.DirectionalLight( HEX_DIRECT_LIGHT, 0.5 );
light1.position.set( 1, 1, 1 );
SCENE.add( light1 );
////////////////////////////////////////////////////////////////////////////////////
// Init Figures
////////////////////////////////////////////////////////////////////////////////////
FB = new FigureBuilder(SIZE, F_COLOR, BG_COLOR);
////////////////////////////////////////////////////////////////////////////////////
// Set Materials
////////////////////////////////////////////////////////////////////////////////////
var MATERIAL_AREA = new THREE.MeshPhongMaterial( {color: HEX_FIGURE_AREA_COLOR,specular: 0xffffff,shininess: 250,side: THREE.DoubleSide,vertexColors: THREE.VertexColors,emissive: HEX_FIGURE_AREA_EMISSIVE
} );var MATERIAL_GRID = new THREE.LineBasicMaterial( {color: HEX_FIGURE_GRID
} );var MATERIAL_OUTLINE = new THREE.LineBasicMaterial( {color: HEX_FIGURE_OUTLINE
} );
////////////////////////////////////////////////////////////////////////////////////
// Helper Function for Creating Meshes
////////////////////////////////////////////////////////////////////////////////////
function createMesh(buffer_positions, buffer_normals, buffer_colors, material){var geometry = new THREE.BufferGeometry();geometry.addAttribute( 'position', new THREE.BufferAttribute( buffer_positions, 3 ) );geometry.addAttribute( 'normal', new THREE.BufferAttribute( buffer_normals, 3 ) );geometry.addAttribute( 'color', new THREE.BufferAttribute( buffer_colors, 3 ) );return new THREE.Mesh( geometry, material);
}function createLine(buffer_positions, material){var geometry = new THREE.BufferGeometry();geometry.addAttribute( 'position', new THREE.BufferAttribute( buffer_positions, 3 ) );return new THREE.Line( geometry, material);
}////////////////////////////////////////////////////////////////////////////////////////
// ////
// + + + + + ////
// + + + + + ////
// + + + + + ////
// + + + + + ////
// + + + + + ////
// ////
////////////////////////////////////////////////////////////////////////////////////////
GROUP_L = new THREE.Group();
GROUP_LABEL_NR_L = new THREE.Group();
GROUP_LABEL_NR_P = new THREE.Group();
GROUP_LABEL_NAME = new THREE.Group();for(var fig_id = 1; fig_id<=25; fig_id+=1){var GROUP_LF = new THREE.Group();var MESH_LF_AREA = createMesh(FB.toPositionBuffer(fig_id, 0),FB.toNormalBuffer(fig_id),FB.toColorBuffer(fig_id),MATERIAL_AREA);var MESH_LF_GRID = createLine(FB.toPositionBuffer(fig_id, 0),MATERIAL_GRID);var local_pos = FB.positionMapForList[fig_id-1];MESH_LF_AREA.position.set(local_pos[0],local_pos[1],local_pos[2]);MESH_LF_GRID.position.set(local_pos[0],local_pos[1],local_pos[2]);GROUP_LF.add( MESH_LF_AREA );GROUP_LF.add( MESH_LF_GRID );GROUP_L.add( GROUP_LF );var PF_LABEL_DIV = document.createElement( 'div' );PF_LABEL_DIV.className = 'label';PF_LABEL_DIV.textContent = fig_id;PF_LABEL_DIV.style.marginTop = '-1em';var PF_LABEL = new THREE.CSS2DObject( PF_LABEL_DIV );GROUP_LABEL_NR_L.add( PF_LABEL );//Position depending on SlotPF_LABEL.position.set(local_pos[0],local_pos[1]-FB.SIZE*4/12,local_pos[2]);var pf_nameDiv = document.createElement( 'div' );pf_nameDiv.className = 'label';pf_nameDiv.textContent = "Figure "+FB.getName(fig_id);pf_nameDiv.style.marginTop = '-1em';var pf_name = new THREE.CSS2DObject( pf_nameDiv );GROUP_LABEL_NAME.add( pf_name );//Position depending on Slotpf_name.position.set(local_pos[0],local_pos[1]-FB.SIZE*12/4,local_pos[2]);
}////////////////////////////////////////////////////////////////////////////////////////
// ////
// + ////
// + + + ////
// + + + + + ////
// + + + + + + + ////
// + + + + + + + + + ////
// ////
////////////////////////////////////////////////////////////////////////////////////////
GROUP_P = new THREE.Group();for(var slot = 1; slot<=25; slot+=1){var GROUP_PF = new THREE.Group();var fig_id = FB.getFigureForSlot(slot);var MATERIAL_PF = new THREE.MeshPhongMaterial( {color: HEX_FIGURE_AREA_COLOR,specular: 0xffffff,shininess: 250,side: THREE.DoubleSide,vertexColors: THREE.VertexColors,opacity: 1.0,transparent: true,emissive: HEX_FIGURE_AREA_EMISSIVE} );var MESH_PF_AREA = createMesh(FB.toPositionBuffer(fig_id, 1),FB.toNormalBuffer(fig_id),FB.toColorBuffer(fig_id),MATERIAL_PF);var MESH_PF_GRID = createLine(FB.toPositionBuffer(fig_id, 1),MATERIAL_GRID);//Position in front of AreaMESH_PF_GRID.position.set( 0,0,1 );var MESH_PF_OUTLINE = createLine(FB.toPositionBuffer(fig_id, 2),MATERIAL_OUTLINE);GROUP_PF.add( MESH_PF_AREA );GROUP_PF.add( MESH_PF_GRID );GROUP_PF.add( MESH_PF_OUTLINE );GROUP_PF.scale.set(0.99,0.99,0.99);GROUP_PF.position.set(FB.slotXPosition(slot), FB.slotYPosition(slot), 0 );var flipped = FB.getIfFlipped(slot);if( flipped ){ GROUP_PF.rotation.z = Math.PI; } else { GROUP_PF.rotation.z = 0; }GROUP_PF.name = slot;GROUP_P.add( GROUP_PF );var PF_LABEL_DIV = document.createElement( 'div' );PF_LABEL_DIV.className = 'label';PF_LABEL_DIV.textContent = fig_id;PF_LABEL_DIV.style.marginTop = '-1em';var PF_LABEL = new THREE.CSS2DObject( PF_LABEL_DIV );PF_LABEL.position.set(FB.slotXPosition(slot), FB.slotYPosition(slot)-20, 0 );GROUP_LABEL_NR_P.add( PF_LABEL );
}var POS_X_LIST = -FB.SIZE * 100 * 3/15;
var POS_Y_LIST = 0;
var POS_X_PYR = FB.SIZE * 100 * 3/15;
var POS_Y_PYR = 0;
GROUP_L.position.set( POS_X_LIST, POS_Y_LIST, 0 );
GROUP_LABEL_NR_L.position.set( POS_X_LIST, POS_Y_LIST, 0 );
GROUP_LABEL_NAME.position.set( POS_X_LIST, POS_Y_LIST, 0 );
GROUP_LABEL_NR_P.position.set( POS_X_PYR, POS_Y_PYR, 0 );
GROUP_P.position.set( POS_X_PYR, POS_Y_PYR, 0 );//GROUP_P.rotation.z = Math.PI*2/3;
SCENE.add( GROUP_L );
SCENE.add( GROUP_P );
SCENE.add( GROUP_LABEL_NR_L );
SCENE.add( GROUP_LABEL_NR_P );
SCENE.add( GROUP_LABEL_NAME );//Shortcut
ARRAY_LF = GROUP_L.children;////////////////////////////////////////////////////////////////////////////////////////
// Raycasting & Mouse
////////////////////////////////////////////////////////////////////////////////////////
RAYCASTER = new THREE.Raycaster();
MOUSE = new THREE.Vector2();
MOUSE_PYR = new THREE.Vector2();
////////////////////////////////////////////////////////////////////////////////////////
// RENDERER
////////////////////////////////////////////////////////////////////////////////////////
RENDERER = new THREE.WebGLRenderer();
RENDERER.setPixelRatio( window.devicePixelRatio );
RENDERER.setSize( window.innerWidth, window.innerHeight );
CONTAINER.appendChild( RENDERER.domElement );
STATS = new Stats();
CONTAINER.appendChild( STATS.domElement );
STATS.domElement.id = "stats";
////////////////////////////////////////////////////////////////////////////////////////
// LABEL RENDERER
////////////////////////////////////////////////////////////////////////////////////////
LABEL_RENDERER = new THREE.CSS2DRenderer();
LABEL_RENDERER.setSize( window.innerWidth, window.innerHeight );
LABEL_RENDERER.domElement.style.position = 'absolute';
LABEL_RENDERER.domElement.style.top = 0;
CONTAINER.appendChild( LABEL_RENDERER.domElement );
////////////////////////////////////////////////////////////////////////////////////////
// Event Listener
////////////////////////////////////////////////////////////////////////////////////////
window.addEventListener( 'resize', onWindowResize, false );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
////////////////////////////////////////////////////////////////////////////////////////
// Init Button CSS
////////////////////////////////////////////////////////////////////////////////////////
updateButtonCSS(GRID_ACTIVE, button_grid);
updateButtonCSS(FIXED_ACTIVE, button_fixed);
updateButtonCSS(SHUFFLE_ACTIVE, button_shuffle);
updateButtonCSS(LABELS_ACTIVE, button_labels);
updateButtonCSS(CONFIG_ACTIVE, button_config);for(var i = 0; i<GROUP_LABEL_NR_L.children.length; i+=1){ GROUP_LABEL_NR_L.children[i].element.hidden = !(LABELS_ACTIVE); }
for(var i = 0; i<GROUP_LABEL_NR_P.children.length; i+=1){ GROUP_LABEL_NR_P.children[i].element.hidden = !(LABELS_ACTIVE); }
for(var i = 0; i<GROUP_LABEL_NAME.children.length; i+=1){ GROUP_LABEL_NAME.children[i].element.hidden = true; }
if(CONFIG_ACTIVE){ config_span.style.display = "inherit";
}else{ config_span.style.display = "none"; }updatePyramide();
}////////////////////////////////////////////////////////////////////////////////////////
// Update Button CSS
////////////////////////////////////////////////////////////////////////////////////////
function updateButtonCSS(status, button) {
if(status){ button.style.background = ""+BUTTON_ACTIVE_COLOR;
}else{ button.style.background = ""+BUTTON_INACTIVE_COLOR; }
}////////////////////////////////////////////////////////////////////////////////////////
// UPDATE MESHES from changed LOGIC
////////////////////////////////////////////////////////////////////////////////////////
function updatePyramide() {
for(var fig_id = 1; fig_id <= 25; fig_id += 1){var figure_in_slot = GROUP_P.children[fig_id-1]; //GROUP_P.children = [figure1, figure2, figure3, ...]var label_in_slot = GROUP_LABEL_NR_P.children[fig_id-1];var slot = FB.getSlotForFigure(fig_id);var flipped = FB.getIfFlipped(slot);var rotation = FB.getFigureRotation(fig_id);var totalr = 0;if(flipped){ totalr = Math.PI; }totalr += rotation * Math.PI*2/3;figure_in_slot.rotation.z = totalr;figure_in_slot.position.set(FB.slotXPosition(slot), FB.slotYPosition(slot), 0); //slotXPosition and slotYPosition are fixed constants for each slotfigure_in_slot.position.z = 0;label_in_slot.position.set(FB.slotXPosition(slot), FB.slotYPosition(slot), 0);
}
setConfig();
}////////////////////////////////////////////////////////////////////////////////////////
// WINDOW
////////////////////////////////////////////////////////////////////////////////////////
function onWindowResize() {
CAMERA.aspect = window.innerWidth / window.innerHeight;
CAMERA.updateProjectionMatrix();
RENDERER.setSize( window.innerWidth, window.innerHeight );
LABEL_RENDERER.setSize( window.innerWidth, window.innerHeight );
//centerFigures();
}////////////////////////////////////////////////////////////////////////////////////////
// BUTTONS / INPUTS
////////////////////////////////////////////////////////////////////////////////////////
button_grid.addEventListener( 'click', function () {
GRID_ACTIVE = !GRID_ACTIVE;
updateButtonCSS(GRID_ACTIVE, button_grid);
for(var i = 0; i<GROUP_P.children.length; i+=1){ GROUP_P.children[i].children[1].visible = GRID_ACTIVE; } //Show or Hide: PYRAMIDE GRID
for(var i = 0; i<GROUP_L.children.length; i+=1){ GROUP_L.children[i].children[1].visible = GRID_ACTIVE; } //Show or Hide: LIST GRID
}, false );button_labels.addEventListener( 'click', function () {
LABELS_ACTIVE = !LABELS_ACTIVE;
updateButtonCSS(LABELS_ACTIVE, button_labels);
for(var i = 0; i<GROUP_LABEL_NR_L.children.length; i+=1){ GROUP_LABEL_NR_L.children[i].element.hidden = !(LABELS_ACTIVE); }
for(var i = 0; i<GROUP_LABEL_NR_P.children.length; i+=1){ GROUP_LABEL_NR_P.children[i].element.hidden = !(LABELS_ACTIVE); }
}, false );button_fixed.addEventListener( 'click', function () {
FIXED_ACTIVE = !FIXED_ACTIVE;
if(FIXED_ACTIVE){ button_fixed.style.background = ""+BUTTON_ACTIVE_COLOR;updatePyramide();
}else{ button_fixed.style.background = ""+BUTTON_INACTIVE_COLOR;} //Change GRID-BUTTON CSS
}, false );button_shuffle.addEventListener( 'click', function () {
SHUFFLE_ACTIVE = !SHUFFLE_ACTIVE;
if(SHUFFLE_ACTIVE){ button_shuffle.style.background = ""+BUTTON_ACTIVE_COLOR;updatePyramide();
}else{ button_shuffle.style.background = ""+BUTTON_INACTIVE_COLOR;}
}, false );button_config.addEventListener( 'click', function () {
CONFIG_ACTIVE = !CONFIG_ACTIVE;
updateButtonCSS(CONFIG_ACTIVE, button_config);
if(CONFIG_ACTIVE){ config_span.style.display = "inherit";
}else{ config_span.style.display = "none"; }
}, false );// Default
// #1m#2m#3m#4m#5m#6m#7m#8m#9m#10m#11m#12m#13m#14m#15m#16m#17m#18m#19m#20m#21m#22m#23m#24m#25m
function loadConfig(string){
var regex = /^([#][0-9][0-9][l|m|r]){25}$/;
var figures = string.split(/['#']+/);
var config_p = Array(25);
var config_r = Array(25);
for(var slot = 1; slot<=25; slot+=1){var figure = figures[slot];var fig_id = figure.substring(0,figure.length-1);fig_id = parseInt(fig_id);var fig_rotation = figure.substring(figure.length-1,figure.length);switch(fig_rotation){case 'l': fig_rotation = -1; break;case 'm': fig_rotation = 0; break;case 'r': fig_rotation = 1; break;default: return;}config_p[slot-1] = fig_id;config_r[fig_id-1] = fig_rotation;
}if(new Set(config_p).size !== config_p.length ){return;}
for(var i=0; i<config_p.length; i+=1){var x = config_p[i];if(x<1||x>25){return;}
}FB.setConfiguration(config_p, config_r);
updatePyramide();
}function setConfig(){
var string = "#";
for(var slot = 1; slot <= 25; slot+=1){var fig_id = FB.getFigureForSlot(slot);var fig_rot = FB.getFigureRotation(fig_id);if(fig_id<=9){ string += "0"+fig_id; }else{ string += fig_id; }switch(fig_rot){case -1: string += "l"; break;case 0: string += "m"; break;case 1: string += "r"; break;}string += "#";
}
input_config.value = string;
}input_config.addEventListener( 'keydown', function (e) {
if (e.keyCode == 13) {loadConfig(input_config.value);
}
}, false );input_config.addEventListener( 'click', function (e) {
input_config.select();
}, false );copy_config.addEventListener( 'click', function () {
var copyText = document.getElementById("input_config"); // Get the text field
copyText.select(); // Select the text field
copyText.setSelectionRange(0, 99999); // For mobile devices
document.execCommand("copy"); // Copy the text inside the text field
}, false );delete_config.addEventListener( 'click', function () {
var deleteField = document.getElementById("input_config");
deleteField.value = "";
}, false );////////////////////////////////////////////////////////////////////////////////////////
// MOUSE FIGURE INTERACTION
////////////////////////////////////////////////////////////////////////////////////////
function getPickedFigure(){ return parseInt(PICKED.name, 10); }
function getHoveredFigure(){ return parseInt(HOVERED.name, 10); }
function getPickedSlot(){ return FB.getSlotForFigure(getPickedFigure()); }////////////////////////////////////////////////////////////////////////////////////////
// MOUSE ACTIONS
////////////////////////////////////////////////////////////////////////////////////////
var MOUSE_DOWN = false;
var DRAGGED = false;
var PICKED = null;
var HOVERED = null;function updateMousePyr(){
var vector = new THREE.Vector3(MOUSE.x, MOUSE.y, 0.5);
vector.unproject( CAMERA );
var dir = vector.sub( CAMERA.position ).normalize();
var distance = - CAMERA.position.z / dir.z;
var pos = CAMERA.position.clone().add( dir.multiplyScalar( distance ) );
pos.sub(PICKED.parent.position); //Position of Pyramide
MOUSE_PYR = pos;
}function onDocumentMouseMove( event ) {
if(SHUFFLE_ACTIVE){ return; }
event.preventDefault();
MOUSE.x = ( event.clientX / window.innerWidth ) * 2 - 1;
MOUSE.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// Dragging
DRAGGED = false;
if (MOUSE_DOWN){if (PICKED){updateMousePyr();//Move Picked FigurePICKED.position.x = MOUSE_PYR.x;PICKED.position.y = MOUSE_PYR.y;PICKED.position.z = 1;PICKED.children[0].material.opacity = 0.7;//Move Assigned NR LabelGROUP_LABEL_NR_P.children[getPickedFigure()-1].position.set(MOUSE_PYR.x, MOUSE_PYR.y, 0 );DRAGGED = true;}
}
// Hovering
RAYCASTER.setFromCamera( MOUSE, CAMERA );
var intersects = RAYCASTER.intersectObjects(GROUP_P.children, true); //--> RAYCASTING ON PYRAMIDE FIGURES
if ( intersects.length > 0 ) { //--> SOMETHING WAS HOVEREDvar new_hovered = intersects[intersects.length-1].object.parent; //Pick farest Layerif(HOVERED != new_hovered){ //HOVERED Object has changedif(HOVERED){ HOVERED.children[0].material.color.setHex(HEX_FIGURE_AREA_COLOR); } //Reset old HOVERED Object's colorHOVERED = new_hovered; //Set new HOVERED ObjectHOVERED.children[0].material.color.setHex(HEX_FIGURE_AREA_HOVERED); //Set new HOVERED Object's color}
}else{ //--> NOTHING WAS HOVEREDif(HOVERED){ //Reset old HOVERED Object's colorHOVERED.children[0].material.color.setHex(HEX_FIGURE_AREA_COLOR);HOVERED = null;}
}
}function onDocumentMouseDown( event ) {
if(SHUFFLE_ACTIVE){ return; }
RAYCASTER.setFromCamera( MOUSE, CAMERA );
var intersects = RAYCASTER.intersectObjects(GROUP_P.children, true);
if ( intersects.length > 0 ) {PICKED = intersects[0].object.parent; //GROUP_Pf
}
MOUSE_DOWN = true;
}function onDocumentMouseUp( event ) {
if(SHUFFLE_ACTIVE){ return; }
//ONE CLICK -> ROTATE (Save to LOGIC)
if(DRAGGED == false){if(PICKED){FB.rotateFigure(getPickedFigure());updatePyramide();}
}
if(FIXED_ACTIVE){//DRAG CLICK -> SWITCH (Save to LOGIC)if(DRAGGED == true){var slot_picked = getPickedSlot();var slot_hover = FB.getSlotForFigure(getHoveredFigure());if(slot_hover){ FB.switchSlotFigures(slot_picked,slot_hover); }updatePyramide();}
}
MOUSE_DOWN = false;
if(PICKED){PICKED.children[0].material.opacity = 1.0; //Reset Opacity After PICKED droppedPICKED = null;
}
if(HOVERED){HOVERED.children[0].material.color.setHex(HEX_FIGURE_AREA_COLOR); //Reset HOVEREDHOVERED = null;
}
DRAGGED = false;
}var t = 0;
var START = true;
function animate() {requestAnimationFrame( animate );if(START){renderStart();}else{render();}STATS.update();
}var t_s = 0.0;
function renderStart() {var zoom = t_s;var opacity = t_s;if(t_s >= 1){//Show Labelsfor(var i = 0; i<GROUP_LABEL_NAME.children.length; i+=1){ GROUP_LABEL_NAME.children[i].element.hidden = false; }//Leave Start-Animationt_s = 0.0;START = false;}//Fade in Scene and MenuSCENE.scale.set(zoom,zoom,zoom);menu.style.opacity = ""+opacity;RENDERER.render( SCENE, CAMERA );t_s += 0.01;
}function render() {var time = Date.now() * 0.0001;for (var m = 0; m < ARRAY_LF.length; m+=1) {var amp = 0.004;var t = time + m;ARRAY_LF[m].rotation.z = amp - Math.abs((t * 0.05) % (2*amp) - amp);}if(SHUFFLE_ACTIVE){t += 0.1;if(t>=1){FB.setRandomConfiguration();updatePyramide();t=0;}}RENDERER.render( SCENE, CAMERA );LABEL_RENDERER.render( SCENE, CAMERA );
}
查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
相关文章
- 数据结构学习笔记之线性表（3）
顺序表与链表的差异一、顺序表与链表的差异1、存取方式2、逻辑结构与物理结构3、增删查4、空间分配二、存储结构的选取依据1、基于存储需求进行考虑2、基于运算操作进行考虑3、基于环境进行考虑 一、顺序表与链表的差异 1、存取方式顺序表支持顺序存取与随机存取，而链表只能顺…...
2024/4/16 13:15:13 - 接口报错：Bad Base64 input character decimal或者request was rejected because no multipart boundary
接口报错： {"timestamp": "2020-07-14 16:35:00","status": 500,"error": "Internal Server Error","exception": "org.springframework.security.jwt.codec.InvalidBase64CharacterException","…...
2024/5/7 13:37:45 - 爬虫代理中的反向代理和正向代理的概念
正向代理和反向代理的概念 无论是正向代理，还是反向代理，说到底，就是代理模式的衍生版本罢了。我们都学习过代理设计模式，都知道代理模式中有代理角色和被代理角色，为什么这么说，因为这两个角色对于我们理解正向和反向代理非常重要 正向代理 意思是一个位于客户端和原始服…...
2024/4/22 6:24:31 - openssh版本升级centos7
openssh版本低漏洞 若是依赖 zlib、fips、openssl包与本文档版本一致则不需要更新，只需更新OpenSSHOpenSSH 安全限制绕过漏洞(CVE-2016-10012) OpenSSH J-PAKE授权问题漏洞(CVE-2010-4478) OpenSSH auth_password函数拒绝服务漏洞(CVE-2016-6515) OpenSSH 远程代码执行漏洞(CV…...
2024/4/21 16:14:45 - redis解决资源竞争
什么是资源竞争： 资源竞争就是比如有两个线程A和B,两个线程都对一个变量a进行加1，每个线程都要执行100次，此时a为0，理论上结束之后a为200，但是应为资源竞争的存在，a可能会小于200, 因为cpu在处理两个线程的时候, 是采用雨露均沾的方式, 可能在线程A刚刚将a值+1还没来得及…...
2024/4/25 2:45:38 - SSM学习笔记,Spring初学(一)
Spring是什么 是一个容器框架：可以管理所有的组件（类，对象） 核心为:IOC和AOP IOC概念 IOC(inversion of control) 控制反转: 即将资源的获取方式从主动获取转变为被动获取，通过容器对组件进行管理，当需要获取组件时可直接从容器中进行获取 HelloWorld 1）需先进行导包,IE…...
2024/4/9 19:11:37 - 面向对象设计的七大原则
一、依赖倒置原则定义：1、高层模块不应该依赖于低层模块，二者都应该依赖于抽象。2、抽象不应该依赖于实现细节，实现细节应该依赖于抽象。二、开发封闭原则定义：对扩展开放，对修改关闭。三、单一职责原则定义：一个类应该仅有一个引起它变化的原因。四、里氏替换原则定义：…...
2024/4/9 19:11:37 - Ubuntu18.04 解压zip文件乱码的解决方法
Ubuntu18.04 解压zip文件乱码的解决方法参考文章： （1）Ubuntu18.04 解压zip文件乱码的解决方法 （2）https://www.cnblogs.com/pipci/p/10114527.html 备忘一下。...
2024/4/14 0:45:17 - 剪绳子
题目描述给你一根长度为n的绳子，请把绳子剪成整数长的m段（m、n都是整数，n>1并且m>1，m<=n），每段绳子的长度记为k[1],...,k[m]。请问k[1]x...xk[m]可能的最大乘积是多少？例如，当绳子的长度是8时，我们把它剪成长度分别为2、3、3的三段，此时得到的最大乘积是18。…...
2024/5/6 7:27:00 - fastjson转换实体，一些参数为null的问题
今天对接阿里支付，对返回数据进行转换实体，但是使用fastjson获取阿里返回的数据转换为实体出现一些字段为null，网上没找到解决办法，也没有具体说明因为什么，做此纪录，可能只是原因之一 这是阿里返回的接口处理信息 {"alipay_trade_precreate_response":{"…...
2024/4/21 2:49:18 - union 和 union all
1. 上结论union : 不仅会表间去重，还会表内去重union all ：不去重2. 实验2.1 建表Create table adst.hyy_test1 (name string ); Create table adst.hyy_test2 (name string ) ;2.2 插入数据insert into adst.hyy_test1 values(hyy); insert into adst.hyy_test1 values(hy…...
2024/4/9 19:11:33 - go编程
变量声明 var 变量名 变量类型 var a int var b [20]int var c *int var ( d int e map[string] int )变量初始化 (var) f1 int=10 (var) f2 =10//编译器会自动推导出变量类型 f3:=10//f3应是未被声明过的变量，否则会出现编译错误变量赋值 var g int g=11多重赋值 a,b=b,a//交…...
2024/4/30 1:27:01 - 从上往下打印二叉树（Java实现）
从上往下打印二叉树一、题目描述二、解题思路三、代码 一、题目描述 从上往下打印出二叉树的每个节点，同层节点从左至右打印。 二、解题思路 二叉树的层次遍历三、代码 import java.util.ArrayList; import java.util.LinkedList; import java.util.Queue; /** public class T…...
2024/4/22 6:24:04 - AndroidUI绘制流程及原理
一 布局加载setContentView(R.layout.layout); 我们平时写好Layout布局，只需调用 setContentView(R.layout.layout);这个方法就可以把写的页面显示在屏幕上，那么这个方法背后到底做了些什么了？我们看看源码，定位到 setContentView这个方法的源码定位到Activity的setContent…...
2024/4/25 18:22:50 - 51单片机快速入门（二）——硬件预备知识
1. 51单片机的内部结构 a. CPU（中央处理器） 单片机的运算和控制核心，是单片机的指挥和执行部件。包括两个基本部分：运算器和控制器。 运算器包括：算数逻辑器件ALU、寄存器（累加器ACC、寄存器B、程序状态寄存器PSW）。 控制器包括：程序计数器PC、数据指针DPTR、堆栈指针S…...
2024/4/21 12:56:35 - 微信封号怎么解除？这些原因和解决办法你得知道
微信封号怎么解除？日常生活中，微信占据了我们使用手机的大部分时间，很多人会通过微信和朋友或者同事沟通，如果微信出现异常，对我们的生活影响非常大。 今天主要给大家分享的是微信封号，如果正常使用微信，一般不会有被封号的情况，但是如果有以下这些特殊情况，很可能你的…...
2024/4/23 11:17:32 - Linux云计算架构-文件系统详解
文章目录Linux云计算架构-文件系统详解1. 关于硬盘的一些结论2. 文件系统结构3. 如何解决磁盘空间未满，但是无法创建文件的问题？4. 如何修复服务器文件系统 Linux云计算架构-文件系统详解 1. 关于硬盘的一些结论 # 磁盘内部不是真空的，但空气很干净。 # 磁盘分扇区，是逻辑化…...
2024/4/9 19:11:27 - Repo和Git笔记
git配置本地configgit config --local user.email "you@example.com" git config --local user.name "Your Name"clone代码git clone https://xxxxgit切换分支// 同步代码 git pull // 查看远程分支和本地分支 git branch -al // 在本地创建并切换分支 git…...
2024/5/4 5:00:22 - RT-Thread OneNET通过方式3上传多组数据
RT-Thread提供的OneNET包，只能同时上传单个数据。参考官方文档，实际上协议可以将多组数据一起上传。以下只是一个实例，用于实现多组数据的推送。 static rt_err_t onenet_mqtt_get_diy_data(char **out_buff, size_t *length) {rt_err_t result = RT_EOK;cJSON *root = RT_N…...
2024/5/3 22:38:43 - B1049/A1104 数列的片段和（测试点2最新数据）
这道题我真的暴躁了，一开始自己写的代码，发现测试点2过不了然后看算法笔记的代码发现和我自己写的一样呜呜，怀疑是我哪个细节写错了核对了半天，还是不行然后搜了好多博客，发现那些代码都没发过测试点2。解决办法：只要把你的double sum改成 long double sum就行了！！！#i…...
2024/5/1 11:49:59
最新文章
- 日期判断输出
闰年判断 能够被4整除但不能被100 整除， 或者能够被400 整除 if(( year % 4 0 && year %100 ! 0) || year % 400 0)) month[2] 29;月份记录 4,6,9,11 month 30; 2 月 month 28 or 29 其他 month 31; 即：month[] { 0, 31, 28, 31, 30, 3…...
2024/5/7 13:43:07 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言，在此感激不尽。 权重和梯度的更新公式如下： w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/5/7 10:36:02 - 招投标系统简介 企业电子招投标采购系统源码之电子招投标系统 —降低企业采购成本
功能描述 1、门户管理：所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含：招标公告、非招标公告、系统通知、政策法规。 2、立项管理：企业用户可对需要采购的项目进行立项申请，并提交审批，查看所…...
2024/5/5 8:44:24 - 云计算概述报告
以下是一篇论述类文章 文章目录 I. 云计算介绍（1）云计算基本概念（2）云计算基本特征 II. 云计算发展历程（1）云计算的起源（2）云计算的发展阶段 III. 云计算特点（1ÿ…...
2024/5/7 11:36:49 - 416. 分割等和子集问题（动态规划）
题目 题解 class Solution:def canPartition(self, nums: List[int]) -> bool:# badcaseif not nums:return True# 不能被2整除if sum(nums) % 2 ! 0:return False# 状态定义：dp[i][j]表示当背包容量为j，用前i个物品是否正好可以将背包填满ÿ…...
2024/5/6 18:23:10 - 【Java】ExcelWriter自适应宽度工具类（支持中文）
工具类 import org.apache.poi.ss.usermodel.Cell; import org.apache.poi.ss.usermodel.CellType; import org.apache.poi.ss.usermodel.Row; import org.apache.poi.ss.usermodel.Sheet;/*** Excel工具类** author xiaoming* date 2023/11/17 10:40*/ public class ExcelUti…...
2024/5/6 18:40:38 - Spring cloud负载均衡@LoadBalanced LoadBalancerClient
LoadBalance vs Ribbon 由于Spring cloud2020之后移除了Ribbon，直接使用Spring Cloud LoadBalancer作为客户端负载均衡组件，我们讨论Spring负载均衡以Spring Cloud2020之后版本为主，学习Spring Cloud LoadBalance，暂不讨论Ribbon…...
2024/5/6 23:37:19 - TSINGSEE青犀AI智能分析+视频监控工业园区周界安全防范方案
一、背景需求分析 在工业产业园、化工园或生产制造园区中，周界防范意义重大，对园区的安全起到重要的作用。常规的安防方式是采用人员巡查，人力投入成本大而且效率低。周界一旦被破坏或入侵，会影响园区人员和资产安全，…...
2024/5/6 7:24:07 - VB.net WebBrowser网页元素抓取分析方法
在用WebBrowser编程实现网页操作自动化时，常要分析网页Html，例如网页在加载数据时，常会显示“系统处理中，请稍候..”，我们需要在数据加载完成后才能继续下一步操作，如何抓取这个信息的网页html元素变化&…...
2024/5/7 0:32:52 - 【Objective-C】Objective-C汇总
方法定义 参考：https://www.yiibai.com/objective_c/objective_c_functions.html Objective-C编程语言中方法定义的一般形式如下 - (return_type) method_name:( argumentType1 )argumentName1 joiningArgument2:( argumentType2 )argumentName2 ... joiningArgu…...
2024/5/6 6:01:13 - 【洛谷算法题】P5713-洛谷团队系统【入门2分支结构】
👨💻博客主页：花无缺 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 花无缺 原创 收录于专栏 【洛谷算法题】 文章目录 【洛谷算法题】P5713-洛谷团队系统【入门2分支结构】🌏题目描述🌏输入格…...
2024/5/6 7:24:06 - 【ES6.0】- 扩展运算符（...）
【ES6.0】- 扩展运算符... 文章目录 【ES6.0】- 扩展运算符...一、概述二、拷贝数组对象三、合并操作四、参数传递五、数组去重六、字符串转字符数组七、NodeList转数组八、解构变量九、打印日志十、总结 一、概述 **扩展运算符(...)**允许一个表达式在期望多个参数࿰…...
2024/5/7 1:54:46 - 摩根看好的前智能硬件头部品牌双11交易数据极度异常！——是模式创新还是饮鸩止渴？
文 | 螳螂观察 作者 | 李燃 双11狂欢已落下帷幕，各大品牌纷纷晒出优异的成绩单，摩根士丹利投资的智能硬件头部品牌凯迪仕也不例外。然而有爆料称，在自媒体平台发布霸榜各大榜单喜讯的凯迪仕智能锁，多个平台数据都表现出极度异常…...
2024/5/6 20:04:22 - Go语言常用命令详解(二)
文章目录 前言常用命令go bug示例参数说明 go doc示例参数说明 go env示例 go fix示例 go fmt示例 go generate示例 总结写在最后 前言 接着上一篇继续介绍Go语言的常用命令 常用命令 以下是一些常用的Go命令，这些命令可以帮助您在Go开发中进行编译、测试、运行和…...
2024/5/7 0:32:51 - 用欧拉路径判断图同构推出reverse合法性：1116T4
http://cplusoj.com/d/senior/p/SS231116D 假设我们要把 a a a 变成 b b b，我们在 a i a_i ai 和 a i 1 a_{i1} ai1 之间连边， b b b 同理，则 a a a 能变成 b b b 的充要条件是两图 A , B A,B A,B 同构。 必要性显然࿰…...
2024/5/6 7:24:04 - 【NGINX--1】基础知识
1、在 Debian/Ubuntu 上安装 NGINX 在 Debian 或 Ubuntu 机器上安装 NGINX 开源版。 更新已配置源的软件包信息，并安装一些有助于配置官方 NGINX 软件包仓库的软件包： apt-get update apt install -y curl gnupg2 ca-certificates lsb-release debian-…...
2024/5/6 7:24:04 - Hive默认分割符、存储格式与数据压缩
目录 1、Hive默认分割符2、Hive存储格式3、Hive数据压缩 1、Hive默认分割符 Hive创建表时指定的行受限（ROW FORMAT）配置标准HQL为： ... ROW FORMAT DELIMITED FIELDS TERMINATED BY \u0001 COLLECTION ITEMS TERMINATED BY , MAP KEYS TERMI…...
2024/5/6 19:38:16 - 【论文阅读】MAG：一种用于航天器遥测数据中有效异常检测的新方法
文章目录 摘要1 引言2 问题描述3 拟议框架4 所提出方法的细节A.数据预处理B.变量相关分析C.MAG模型D.异常分数 5 实验A.数据集和性能指标B.实验设置与平台C.结果和比较 6 结论 摘要 异常检测是保证航天器稳定性的关键。在航天器运行过程中，传感器和控制器产生大量周…...
2024/5/6 7:24:03 - --max-old-space-size=8192报错
vue项目运行时，如果经常运行慢，崩溃停止服务，报如下错误 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 因为在 Node 中，通过JavaScript使用内存时只能使用部分内存（64位系统&…...
2024/5/7 0:32:49 - 基于深度学习的恶意软件检测
恶意软件是指恶意软件犯罪者用来感染个人计算机或整个组织的网络的软件。 它利用目标系统漏洞，例如可以被劫持的合法软件（例如浏览器或 Web 应用程序插件）中的错误。 恶意软件渗透可能会造成灾难性的后果，包括数据被盗、勒索或网…...
2024/5/6 21:25:34 - JS原型对象prototype
让我简单的为大家介绍一下原型对象prototype吧！ 使用原型实现方法共享 1.构造函数通过原型分配的函数是所有对象所 共享的。 2.JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象，所以我们也称为原型对象…...
2024/5/7 11:08:22 - C++中只能有一个实例的单例类
C中只能有一个实例的单例类 前面讨论的 President 类很不错，但存在一个缺陷：无法禁止通过实例化多个对象来创建多名总统： President One, Two, Three; 由于复制构造函数是私有的，其中每个对象都是不可复制的，但您的目…...
2024/5/7 7:26:29 - python django 小程序图书借阅源码
开发工具： PyCharm，mysql5.7，微信开发者工具 技术说明： python django html 小程序 功能介绍： 用户端： 登录注册（含授权登录） 首页显示搜索图书，轮播图࿰…...
2024/5/7 0:32:47 - 电子学会C/C++编程等级考试2022年03月（一级）真题解析
C/C++等级考试（1~8级）全部真题・点这里 第1题：双精度浮点数的输入输出 输入一个双精度浮点数，保留8位小数，输出这个浮点数。 时间限制：1000 内存限制：65536输入 只有一行，一个双精度浮点数。输出 一行，保留8位小数的浮点数。样例输入 3.1415926535798932样例输出 3.1…...
2024/5/6 16:50:57 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示，配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下：1、长按电脑电源键直至关机，然后再按一次电源健重启电脑，按F8健进入安全模式2、安全模式下进入Windows系统桌面后，按住“winR”打开运行窗口，输入“services.msc”打开服务设置3、在服务界面，选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE，请勿更改元素数目。
%读入6幅图像（每一幅图像的大小是564*564） f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面，在等待界面中我们需要等待操作结束才能关机，虽然这比较麻烦，但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows，请勿关闭计算机”的提示，要过很久才能进入系统，有的用户甚至几个小时也无法进入，下面就教大家这个问题的解决方法。第一种方法：我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题，电脑时发现开机屏幕显现“正在配置Windows Update，请勿关机”(如下图所示)，而且还需求等大约5分钟才干进入系统。这是怎样回事呢？一切都是正常操作的，为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示，没过几秒后电脑自动重启，每次开机都这样无法进入系统，此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一：开机按下F8，在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况，就是电脑提示正在准备windows请勿关闭计算机，碰到这样的问题该怎么解决呢，现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法：1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后，每次关机的时候桌面上都会显示一个“配置Windows Update的界面，提示请勿关闭计算机”，每次停留好几分钟才能正常关机，导致什么情况引起的呢？出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着，别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚，只能是考虑备份数据后重装系统了。解决来方案一：管理员运行cmd：net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办？
原标题：电脑提示“配置Windows Update请勿关闭计算机”怎么办？win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢？一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ，然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ，然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间：2020-04-20 22:24:19 浏览次数：729次 区域： 南阳 > 卧龙 列举网提醒您：为保障您的权益，请不要提前支付任何费用！ 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于：钉钉，外勤365，红圈通，企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”，长时间没反应，无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了，具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面，长时间没反应，无法进入系统。这个问题原来帮其他同学也解决过，网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办？...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法，并在最后教给你1种保护系统安全的好方法，一起来看看！电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中，添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败，正在还原更改，请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候，开启电脑发现电脑显示：配置windows更新失败，正在还原更改，请勿关闭计算机。。.这要怎么办呢？下面小编就带着大家一起看看吧！如果能够正常进入系统，建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机，电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机，电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题，就是我们的win7系统在关机的时候，总是喜欢显示“准备配置windows，请勿关机”这样的一个页面，没有什么大碍，但是如果一直等着的话就要两个小时甚至更久都关不了机，非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时，一般是您正对windows进行升级，但是这个要是长时间没有反应，我们不能再傻等下去了。可能是电脑出了别的问题了，来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败，还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况，当我们打开电脑之后，发现一直停留在一个界面：“配置Windows Update失败，还原更改请勿关闭计算机”，等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57