Viewing Program

Program Data

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

Title	Animated 3D 3X3X3 and 2X2X2 Rubiks Cube!!
ID	5792237061586944
Created	1 years ago, 1700187038018
Updated	1 years ago, 1700516002974
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Animated 3D 3X3X3 and 2X2X2 Rubiks Cube!!</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--just somthing I am working on--> <style> @keyframes fadeIn { from { opacity: 100%; } to { opacity: 0%; } } /.transhelp{ position:fixed; left:0px; top:0px; width:800%; height:800%; background:white; animation: fadeIn 1s; animation-iteration-count: line; }/ </style> <!--Animation--> <style> @keyframes findabetternome{ /* you can add as many of these as you want / 0%{ transform:translateX(369px) translateY(308px) rotateX(431deg) rotateY(19deg) ; / you replace this code with whatever you want it to start off as / } 25%{ transform:translateX(269px) translateY(408px) rotateX(94deg) rotateY(100deg) ; / you replace this code with whatever you want it to do by the end / } 50%{ transform:translateX(269px) translateY(408px) rotateX(31deg) rotateY(309deg) ; / you replace this code with whatever you want it to do by the end / } 75%{ transform:translateX(269px) translateY(408px) rotateX(110deg) rotateY(269deg) ; / you replace this code with whatever you want it to do by the end / } 100%{ transform:translateX(369px) translateY(308px) rotateX(431deg) rotateY(19deg) ; / you replace this code with whatever you want it to start off as there is a better way but this way is easyer to learn / } } </style> <!--page one--> <style> .cube{ position: fixed; perspective: 2636px; transform-style: preserve-3d; animation: findabetternome 5s; animation-iteration-count: infinite; } .s{ position: fixed; transform-style: preserve-3d; width: 300px; height: 300px; background: black; color: rgb(255,242,0); } .s:before{ position: fixed; content: ""; transform-style: preserve-3d; width: 5px; height: 5px; box-shadow: 48px 48px 0 42px, 147px 48px 0 42px, 247px 48px 0 42px, 48px 246px 0 42px, 48px 147px 0 42px, 148px 147px 0 42px, 247px 147px 0 42px, 148px 246px 0 42px, 247px 246px 0 42px; } .s:nth-child(1){ transform: translateZ(-300px); color: white; } .s:nth-child(2){ transform: rotateX(90deg) translateY(-150px) translateZ(150px); color: rgb(42,196,75); } .s:nth-child(3){ transform: rotateX(90deg) translateY(-150px) translateZ(-150px); color: rgb(42,75,183); } .s:nth-child(4){ transform: rotateY(90deg) translateX(150px) translateZ(-150px); color: rgb(240,48,49); } .s:nth-child(5){ transform: rotateY(90deg) translateX(150px) translateZ(150px); color: rgb(252,129,0); } </style> <!--page two--> <style> .cube2{ position: fixed; left:00px; top:59px; perspective: 2555px; transform-style: preserve-3d; animation: findabetternome 5s; animation-iteration-count: infinite; } .v{ position: fixed; transform-style: preserve-3d; width: 300px; height: 300px; background: black; color: rgb(252, 248, 10); } .v:before{ position: fixed; content: ""; width: 5px; height: 5px; box-shadow: 63px 76px 0 55px, 194px 77px 0 55px, 207px 225px 0 55px, 67px 228px 0 55px; } .v:nth-child(1){ transform: translateZ(-300px); color: white; } .v:nth-child(2){ transform: rotateX(90deg) translateY(-150px) translateZ(150px); color: rgb(6, 24, 184); } .v:nth-child(3){ transform: rotateX(90deg) translateY(-150px) translateZ(-150px); color: rgb(3, 148, 13); } .v:nth-child(4){ transform: rotateY(90deg) translateX(150px) translateZ(-150px); color: rgb(240,48,49); } .v:nth-child(5){ transform: rotateY(90deg) translateX(150px) translateZ(148px); color: rgb(252,129,0); } </style> <!--buttons--> <style> #p1 button{ right:-120px; } #p2 button{ left:-120px; } button{ border:none; color:white; font-size:40px; text-shadow: -2px 2px 2px rgb(0, 0, 0); background:linear-gradient(30deg,rgb(255, 43, 0), rgb(255, 255, 255),rgb(0, 255, 4),rgb(238, 250, 0), rgb(255, 145, 10), rgb(0, 0, 255)); position:fixed; top:5px; width:168px; height:50px; border-radius: 20px; } </style> <!--the background--> <style> img{ position:fixed; width:80px; transform: rotateZ(26deg); margin-left:-147px; margin-top:-19px; } body{ overflow:hidden; } #background{ position:fixed; left:0px; top:0px; background:rgb(100, 100, 100,50%); } </style> <!----> <style> .div{ color:white; font-size:105%; position:fixed; overflow-y:auto; overflow-x:hidden; right:5px; padding:5px; width:150px; height:90px; background-color:rgba(100,100,100,50%); top:50px; } a{ color:rgb(245, 150, 8); } </style> </head> <body> <script> for(var i = 0;i < 10;i++){ for(var j = 0;j < 9;j++){ var newimg = $("<img>"); newimg.attr("src","https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Rubiks_cube.svg/1957px-Rubiks_cube.svg.png"); newimg.css("left",i100+"px"); newimg.css("top",j100+"px"); // newimg.css("top",j50+"px"); // append prepend after $("body").append(newimg); } } </script> <!--the background--> <div id = "background"></div> <script> var background = $("#background"); background.css("width",window.innerWidth+"px") background.css("height",window.innerHeight+"px") </script> <!--page one--> <div id = "p1" class = "page"style = "transform: scale(0.7);"> <div class="cube"> <div class="s"></div> <div class="s"></div> <div class="s"></div> <div class="s"></div> <div class="s"></div> <div class="s"></div> </div> <button id = "p2"class = "button">next</button> <div class = "transhelp"></div> </div> <!--page two--> <div id = "p2"class = "page"style = "transform: scale(0.7);"> <div class="cube2"> <div class="v"></div> <div class="v"></div> <div class="v"></div> <div class="v"></div> <div class="v"></div> <div class="v"></div> </div> <button id = "p1"class = "button">back</button> <div class = "transhelp"></div> </div> <script type='application/javascript'> (function(){/We use an Immediately Invoked Function Expression/ const navigateTo = (page) => {/page is our argument/ /Remember: querySelectorAll returns an array/ const pages = document.querySelectorAll('.page'); /"The Polar method" of iteration/ for(let i = pages.length; i--;){ pages[i].style.display = 'none';/hide all pages/ if(pages[i].id===page){/If the argument matches.../ pages[i].style.display = 'block';/reveal this page/ } } window.scroll(0, 0);/scroll to top/ } const buttons = document.querySelectorAll('.button');/Select button class elements/ for(let i = buttons.length; i--;){/for all buttons.../ /Add an 'click' listener which navigates to the element's id/ buttons[i].addEventListener('click', () => navigateTo(buttons[i].id)); } navigateTo('p1');/Default navigate to 'home' page/ })(); </script> <script> var rubikscube = $("cube"); //alert(window.location.href); document.body.addEventListener("mousemove", function(e) { rubikscube.css("transform","translateX(401px) translateY(308px) rotateX(431deg) rotateY(19deg) ;") }) </script> <script> var trueOrFalse = true; var programURL = "https://www.kasandbox.org/computer-programming/exec/webpage?lang=en&v=231120-1238-e17b96257956&host=www.khanacademy.org"; var myProgramURL = window.location.href; if(myProgramURL === programURL){ trueOrFalse = false; } if(window.innerHeight < 600){ var newdiv = $("<div>"); newdiv.addClass("div"); newdiv.html("<p>This program is a spin-off of <a href = \"https://www.khanacademy.org/computer-programming/animated-3d-3x3x3-and-2x2x2-rubiks-cube/5792237061586944\">Animated 3D 3X3X3 and 2X2X2 Rubiks Cube!!</a> by <a href = \" https://www.khanacademy.org/profile/kaid_1063463007130342809105382/\">Vicioustrex</a>. If you like this, be sure to check out the original too</p>"); // newimg.css("top",j50+"px"); // append prepend after $("body").append(newdiv); } </script> <script type="thumbnail.js" name="thumbnail"> set(document.getElementsByName('ski')[0]) size(600, 600) const img = loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Rubiks_cube.svg/1957px-Rubiks_cube.svg.png', 600, 600) const img2 = loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Rubiks_cube.svg/1957px-Rubiks_cube.svg.png', 80, 80) imageMode(0) textAlign(1, 1) draw = () => { clear() for(let i = 0;i<10;i++){ for(let j = 0;j<10;j++){ pushMatrix(); translate(i100,j*100); rotate(50); image(img2, 0, 0) popMatrix(); } } fill(100,100,100,120); noStroke(); rect(0,0,8000,8000); image(img, 0, 0) } </script> <canvas style = 'display: none;' name = 'ski'></canvas> <script src = 'https://cdn.jsdelivr.net/gh/thelegendski/ski.js@1.7.1/main.js'></script> <script src = 'https://cdn.jsdelivr.net/gh/thelegendski/thumbnail.js@1.1.2/main.js'></script> </body> </html>
Folds	1,398
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIvEpIClCgw
Votes	45
Spin-Offs	15
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	{"id":"4720941114392576","title":"3D Rubik's Cube","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Vicioustre𝑥 BBB#
Author Name	Vicioustrex
Author ID	kaid_1063463007130342809105382
Author Profile Access	PUBLIC

Archive Data

Added	23 days ago, 1734465171483
Updated	23 days ago, 1734465171483
Source Deleted	unknown