Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	(Working) 3D Rubik's Cube
ID	6309220034494464
Created	4 years ago, 1614882052306
Updated	4 years ago, 1620955398411
Code	/** Sub page: https://www.khanacademy.org/computer-programming/spencerkuans-sub-page/5722708460388352 To-do: * add click and drag rotating functionality - probably won't * make camera rotatable - I might do this * fix bugs - done-ish? * add key to randomize cube - done! Possible other stuff to add: * overview map. Something like https://ruwix.com/pics/blindfolded-tutorial/flipped-cube-blindfolded.jpg * directions for solving a 3x3 with beginners method */ / This is based on an earlier 3d Rubik's cube program that I made. Sorry if it lags a lot. I'm sure there are more efficient and cleaner ways to do something like this. If anyone has any ideas for reducing lag, they would be greatly appreciated. You can rotate the faces of the cube clockwise with the following keys: * r - right face * l - left face * f - front face * b - back face * u - top face * d - bottom face * space bar - shuffle Hold down the shift key to rotate the faces counter-clockwise. / //patch for memeory leak with the new keyword. Credit to @MatthiasSaihttam. /jshint ignore:start/ PJSCodeInjector.instances = {length: 0, push: function () {}}; /jshint ignore:end/ smooth(); var font = createFont("monospace"); textFont(font); stroke(0, 0, 0, 100); //3d engine stuff: { //creates a vertex at x, y, z var Vertex = function(x,y,z){ this.x = x; this.y = y; this.z = z; }; //rotates the vertex Vertex.prototype.rotateZ = function(t){ var x = this.x cos(t) - this.y * sin(t); var y = this.y * cos(t) + this.x * sin(t); this.y = y; this.x = x; /* This function was based on https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/programming-3d-shapes/a/rotating-3d-shapes / }; Vertex.prototype.rotateX = function(t){ var y = this.y cos(t) - this.z * sin(t); var z = this.z * cos(t) + this.y * sin(t); this.y = y; this.z = z; }; Vertex.prototype.rotateY = function(t){ var x = this.x * cos(t) - this.z * sin(t); var z = this.z * cos(t) + this.x * sin(t); this.x = x; this.z = z; }; Vertex.prototype.rotate = function(rx,ry,rz){ this.rotateX(rx); this.rotateY(ry); this.rotateZ(rz); }; //translates the vertex Vertex.prototype.translate = function(x,y){ this.x += x; this.y += y; }; //gets the vertex Vertex.prototype.get = function(){ return new Vertex(this.x, this.y, this.z); }; //finds the distance between two vertices Vertex.prototype.dist = function(vertex){ return sqrt(Math.pow(vertex.x - this.x, 2) + Math.pow(vertex.y - this.y, 2) + Math.pow(vertex.z - this.z, 2)); }; //creates a 2d vertex var Vertex2d = function(x,y){ this.x = x; this.y = y; }; //creates a face (collection of vertices) var Face = function(vertices, color){ this.vertices = vertices; this.color = color; }; //creates a camera object var Camera = function(x,y,z,rx,ry,rz){ this.x = x; this.y = y; this.z = z; this.rx = rx; this.ry = ry; this.rz = rz; }; //creates a shape, which is a collection of faces var Shape = function(vertices, faces){ this.vertices = vertices; this.faces = faces; }; //rotates the shape Shape.prototype.rotate = function(x,y,z){ for(var i = 0; i < this.vertices.length; i++){ this.vertices[i].rotateX(x); this.vertices[i].rotateY(y); this.vertices[i].rotateZ(z); } }; //translates the shape Shape.prototype.translate = function(x,y,z){ for(var i = 0; i < this.vertices.length; i++){ this.vertices[i].x += x; this.vertices[i].y += y; this.vertices[i].z += z; } }; //returns a new combined shape Shape.prototype.combine = function(shape){ var vertices = shape.vertices.concat(this.vertices); var faces = shape.faces.concat(this.faces); return new Shape(vertices, faces); }; //a cube is a type of shape var Cube = function(center, width, color){ var w = width/2; this.center = center; this.width = width; var vertices = [ new Vertex(center.x+w, center.y+w, center.z+w), new Vertex(center.x+w, center.y+w, center.z-w), new Vertex(center.x+w, center.y-w, center.z+w), new Vertex(center.x+w, center.y-w, center.z-w), new Vertex(center.x-w, center.y+w, center.z+w), new Vertex(center.x-w, center.y+w, center.z-w), new Vertex(center.x-w, center.y-w, center.z+w), new Vertex(center.x-w, center.y-w, center.z-w) ]; var faces = [ new Face([vertices[0], vertices[1], vertices[3],vertices[2]], color), new Face([vertices[1], vertices[5], vertices[7],vertices[3]], color), new Face([vertices[4], vertices[0], vertices[2],vertices[6]], color), new Face([vertices[5], vertices[4], vertices[6], vertices[7]], color), new Face([vertices[0], vertices[4], vertices[5], vertices[1]], color), new Face([vertices[2], vertices[3], vertices[7], vertices[6]], color), ]; Shape.call(this, vertices, faces); }; Cube.prototype = Shape.prototype; //a cuboid is another type of shape var Cuboid = function(center, width, height, depth, color){ this.center = center; this.width = width; var w = width/2; var h = height/2; var d = depth/2; var vertices = [ new Vertex(center.x+w, center.y+h, center.z+d), new Vertex(center.x+w, center.y+h, center.z-d), new Vertex(center.x+w, center.y-h, center.z+d), new Vertex(center.x+w, center.y-h, center.z-d), new Vertex(center.x-w, center.y+h, center.z+d), new Vertex(center.x-w, center.y+h, center.z-d), new Vertex(center.x-w, center.y-h, center.z+d), new Vertex(center.x-w, center.y-h, center.z-d) ]; var faces = [ new Face([vertices[0], vertices[1], vertices[3],vertices[2]], color), new Face([vertices[1], vertices[5], vertices[7],vertices[3]], color), new Face([vertices[4], vertices[0], vertices[2],vertices[6]], color), new Face([vertices[5], vertices[4], vertices[6], vertices[7]], color), new Face([vertices[0], vertices[4], vertices[5], vertices[1]], color), new Face([vertices[2], vertices[3], vertices[7], vertices[6]], color), ]; Shape.call(this, vertices, faces); }; Cuboid.prototype = Shape.prototype; //a scene contains the objects, faces, and the camera var Scene = function(perspective, camera){ this.perspective = perspective; this.camera = camera; this.objects = []; this.allFaces = []; }; //adds an object to the scene Scene.prototype.addObject = function(object){ this.objects.push(object); for(var i = 0; i < object.faces.length; i++){ this.allFaces.push(object.faces[i]); } }; //clears the scene Scene.prototype.clear = function(){ this.objects = []; this.allFaces = []; }; //draws the shapes in the scene Scene.prototype.render = function(){ var camera = this.camera; //sort the faces from furthest to closest this.allFaces.sort(function(a,b){ var a = a.vertices; var b = b.vertices; var averageA = 0; var averageB = 0; for(var i = 0; i < a.length; i++){ var d = a[i].dist(camera); averageA += d; } averageA /= a.length; for(var i = 0; i < b.length; i++){ var d = b[i].dist(camera); averageB += d; } averageB /= b.length; return averageB - averageA; }); for(var l = 0; l < this.allFaces.length; l++){ //get 3d coordinates for the face var coords3d = this.allFaces[l].vertices; //calc 2d coordinates for face var coords2d = this.projectPoints(coords3d, this.perspective, this.camera); //draw the face fill(this.allFaces[l].color); beginShape(); for(var i = 0; i < coords2d.length; i++){ / I need to try to implement backface culling around here. / if(coords3d[i].z > this.camera.z){ continue; } vertex(coords2d[i].x, coords2d[i].y); } vertex(coords2d[0].x, coords2d[0].y); endShape(); } }; //projects a 3d vertex into a 2d point Scene.prototype.projectPoint = function(vertex){ if(this.perspective){ var d = vertex.dist(this.camera); return new Vertex2d((vertex.x/d1200), (vertex.y/d1200)); }else { return new Vertex2d(vertex.x, vertex.y); } }; //projects multiple points from 3d to 2d Scene.prototype.projectPoints = function(vertices, perspective, camera){ var newPoints = []; for(var i = 0; i < vertices.length; i++){ newPoints.push(this.projectPoint(vertices[i], perspective, camera)); } return newPoints; }; //finds the distance from the cam to a vertex Scene.prototype.distToVert = function(vertex){ return vertex.dist(this.camera); }; //} //this just finds the mouse movement var mouseMove = (function(){ var lastX = mouseX; var lastY = mouseY; return { get x(){ var moveX = mouseX-lastX; lastX = mouseX; return moveX; }, get y(){ var moveY = mouseY-lastY; lastY = mouseY; return moveY; } }; }()); var showStats = function(data){ var string = String(data); pushMatrix(); resetMatrix(); fill(0, 0, 0); textSize(15); text(string, 10, height-10); popMatrix(); }; //The Rubik's cube translate(width/2, height/2); //make a new scene var scene = new Scene(true, new Camera(0,0,1300,0,0,0)); var cubePosition = []; var animations = { animations: [], animate: function(){ for(var i = 0; i < this.animations.length; i++){ this.animations[i].animate(); if(this.animations[i].stop()){ this.deleteAnimation(i); } } }, deleteAnimation: function(index){ this.animations.splice(index, 1); }, addAnimation: function(callBack, stop){ this.animations.push({ animate: callBack, stop: stop }); } }; var sceneRotation = { x: -20, y: -30, z:-8 }; //add the cube faces for(var x = -1; x <= 1; x++){ cubePosition[x+1] = []; for(var y = -1; y <= 1; y++){ cubePosition[x+1][y+1] = []; for(var z = -1; z <= 1; z++){ if(x === 0 && y === 0 && z === 0){ continue; } var piece = new Cube(new Vertex(x125, y125, z125), 125, color(50, 50, 50)); if(x === -1){ piece = piece.combine(new Cuboid(new Vertex(-190, y125, z125), 5, 110, 110, color(255, 88, 0))); }else if (x === 1){ piece = piece.combine(new Cuboid(new Vertex(190, y125, z125), 5, 110, 110, color(183, 18, 52))); } if(y === -1){ piece = piece.combine(new Cuboid(new Vertex(x125, -190, z125), 110, 5, 110, color(255, 255, 255))); }else if (y === 1){ piece = piece.combine(new Cuboid(new Vertex(x125, 190, z125), 110, 5, 110, color(255, 213, 0))); } if(z === -1){ piece = piece.combine(new Cuboid(new Vertex(x125, y125, -190), 110, 110, 5, color(0, 70, 173))); }else if (z === 1){ piece = piece.combine(new Cuboid(new Vertex(x125, y125, 190), 110, 110, 5, color(0, 155, 72))); } scene.addObject(piece); cubePosition[x+1][y+1][z+1] = piece; } } } for(var i = 0; i < scene.objects.length; i++){ scene.objects[i].rotate(sceneRotation.x, sceneRotation.y, sceneRotation.z); } var getCubes = function(gx, gy, gz){ var cubes = []; for(var x = 0; x < 3; x++){ for(var y = 0; y < 3; y++){ for(var z = 0; z < 3; z++){ if((x === gx \|\| gx === null)&& (y === gy \|\| gy === null)&& (z === gz \|\| gz === null)){ cubes.push(cubePosition[x][y][z]); } } } } return cubes; }; var rotateCube = function(face, amount){ var rx = 0; var ry = 0; var rz = 0; var gx = null; var gy = null; var gz = null; var indicator = true; switch(face){ case "r": rx = amount; gx = 2; indicator = false; break; case "l": rx = -amount; gx = 0; break; case "u": ry = amount; gy = 0; indicator = false; break; case "d": ry = -amount; gy = 2; break; case "f": rz = amount; gz = 2; indicator = false; break; case "b": gz = 0; rz = -amount; break; default: return; } var pieces = getCubes(gx, gy, gz); var copy = [ Object.assign({}, pieces[0]), Object.assign({}, pieces[1]), Object.assign({}, pieces[2]), Object.assign({}, pieces[3]), [], Object.assign({}, pieces[5]), Object.assign({}, pieces[6]), Object.assign({}, pieces[7]), Object.assign({}, pieces[8]) ]; if(amount === 0){ }if((Math.sign(amount) === 1 && indicator) \|\| (Math.sign(amount) === -1 && !indicator)){ Object.assign(pieces[0], copy[6]); Object.assign(pieces[1], copy[3]); Object.assign(pieces[2], copy[0]); Object.assign(pieces[3], copy[7]); //Object.assign(pieces[4], copy[4]); Object.assign(pieces[5], copy[1]); Object.assign(pieces[6], copy[8]); Object.assign(pieces[7], copy[5]); Object.assign(pieces[8], copy[2]); }else{ Object.assign(pieces[0], copy[2]); Object.assign(pieces[1], copy[5]); Object.assign(pieces[2], copy[8]); Object.assign(pieces[3], copy[1]); //Object.assign(pieces[4], copy[4]); Object.assign(pieces[5], copy[7]); Object.assign(pieces[6], copy[0]); Object.assign(pieces[7], copy[3]); Object.assign(pieces[8], copy[6]); } animations.animations.push({ counter: 0, amount: abs(amount), animate: function(){ for(var i = 0; i < pieces.length; i++){ pieces[i].rotate(0, 0, -sceneRotation.z); pieces[i].rotate(0, -sceneRotation.y, 0); pieces[i].rotate(-sceneRotation.x, 0, 0); pieces[i].rotate(rx/20, ry/20, rz/20); pieces[i].rotate(sceneRotation.x, sceneRotation.y, sceneRotation.z); } this.counter += this.amount/20; }, stop: function(){ return this.counter >= this.amount; } }); }; var shuffle = { shuffling: false, count: 0, start: function(){ this.shuffling = true; }, update: function(){ if(this.shuffling){ fill(0, 0, 0); textSize(40); text("Shuffling... ", -120, -250); if(animations.animations.length === 0){ var sides = ["r", "l", "u", "d", "f", "b"]; var side = sides[Math.floor(Math.random()sides.length)]; var turn = (Math.round(Math.random())2-1)90; rotateCube(side, turn); this.count ++; if(this.count > 10){ this.shuffling = false; this.count = 0; } } } } }; var updateScreen = function(){ background(235, 235, 235); scene.render(); shuffle.update(); animations.animate(); }; draw = function() { try{ updateScreen(); showStats(this.__frameRate.toFixed()); }catch(e){} }; keyPressed = function(){ var theKey = key.toString().toLowerCase(); var shift = (theKey !== key.toString()); if(animations.animations.length === 0 && ["r", "l", "u", "d", "f", "b", " "].includes(theKey)){ if(theKey === " "){ shuffle.start(); }else if(shift){ rotateCube(theKey, -90); }else{ rotateCube(theKey, 90); } } };
Folds	48,327,330,345,347,355,364,383,384,388,420,422,424,438,440,535,537,561,570,575,576,589
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgN2XvMaaCww
Votes	209
Spin-Offs	7
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	SpencerKuan
Author Name	SpencerKuan
Author ID	kaid_266759593901575482747326
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739456324440
Updated	10 months ago, 1739456328558
Source Deleted	unknown