Erno
How do I make an erno?
Something from a project that I'm trying to start.r will turn the right layer clockwise. Hold SHIFT to counterclockwise turn.. What is a erno? How do you make a erno? This script and codes were developed by Nick Colley on 12 November 2022, Saturday.
Erno Previews
Erno - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>erno</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /******************************
* STYLESHEET MA551V3 ~~~
*******************************/
html, body { height: 100%; width: 100%; background: #EEE; background: radial-gradient(#EEE, #FFF);
}
.container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 200px; height: 200px; perspective: 1000px; user-select: none;
}
.cube { width: 100%; height: 100%; position: absolute; transform: rotateY(45deg) rotateX(-15deg) rotateZ(-15deg); transform-style: preserve-3d;
}
.face { position: absolute; display: block; margin: 0; padding: 0; width: 100%; height: 100%; background: #111;
}
.face.front { transform: translateZ(100px); }
.face.right { transform: rotateY(90deg) translateZ(100px); }
.face.left { transform: rotateY(-90deg) translateZ(100px); }
.face.back {transform: translateZ(-100px); }
.face.up { transform: rotateX(90deg) translateZ(100px); }
.face.down { transform: rotateX(-90deg) translateZ(100px); }
.sticker { float: left; background: #aaa; box-shadow: 0 5px 5px rgba(255,255,255,0.1) inset, inset 0 -5px 5px rgba(0,0,0,0.1); width: 33%; height: 33%; margin: 0; padding: 0;
}
/******************************
* Rounded corners, Dayan style.
*******************************/
.sticker.tl { border-radius: 0 0 15% 0; margin-right: 0.5%;}
.sticker.tc { border-radius: 0 0 15% 15%; margin-right: 0.5%;}
.sticker.tr { border-radius: 0 0 0 15%; }
.sticker.l { border-radius: 0 15% 15% 0; margin: 0.5% 0;}
.sticker.c { border-radius: 15%; margin: 0.5%; }
.sticker.r { border-radius: 15% 0 0 15%; margin: 0.5% 0; }
.sticker.bl { border-radius: 0 15% 0 0; margin-right: 0.5%;}
.sticker.bc { border-radius: 15% 15% 0 0; margin-right: 0.5%; }
.sticker.br { border-radius: 15% 0 0 0; }
/******************************
* Official Rubik's colours
*******************************/
.cRed { background: #C41E3A; }
.cOrange { background: #FF5800; }
.cGreen { background: #009E60; }
.cBlue { background: #0051BA; }
.cYellow { background: #FFD500; }
.cWhite { background: #FFFFFF; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <label for="">Scramble:</label>
<input type='text' value='R2L2F2B2U2D2'/>
<br>
<label for="">Cube Colour:</label>
<input type="color" name="favcolor"> <div class='container'> <div class='cube'> <div class='face front'> <div class='sticker tl'></div> <div class='sticker tc'></div> <div class='sticker tr'></div> <div class='sticker l'></div> <div class='sticker c'></div> <div class='sticker r'></div> <div class='sticker bl'></div> <div class='sticker bc'></div> <div class='sticker br'></div> </div> <div class='face left'> <div class='sticker tl'></div> <div class='sticker tc'></div> <div class='sticker tr'></div> <div class='sticker l'></div> <div class='sticker c'></div> <div class='sticker r'></div> <div class='sticker bl'></div> <div class='sticker bc'></div> <div class='sticker br'></div> </div> <div class='face right'> <div class='sticker tl'></div> <div class='sticker tc'></div> <div class='sticker tr'></div> <div class='sticker l'></div> <div class='sticker c'></div> <div class='sticker r'></div> <div class='sticker bl'></div> <div class='sticker bc'></div> <div class='sticker br'></div> </div> <div class='face back'> <div class='sticker tl'></div> <div class='sticker tc'></div> <div class='sticker tr'></div> <div class='sticker l'></div> <div class='sticker c'></div> <div class='sticker r'></div> <div class='sticker bl'></div> <div class='sticker bc'></div> <div class='sticker br'></div> </div> <div class='face up'> <div class='sticker tl'></div> <div class='sticker tc'></div> <div class='sticker tr'></div> <div class='sticker l'></div> <div class='sticker c'></div> <div class='sticker r'></div> <div class='sticker bl'></div> <div class='sticker bc'></div> <div class='sticker br'></div> </div> <div class='face down'> <div class='sticker tl'></div> <div class='sticker tc'></div> <div class='sticker tr'></div> <div class='sticker l'></div> <div class='sticker c'></div> <div class='sticker r'></div> <div class='sticker bl'></div> <div class='sticker bc'></div> <div class='sticker br'></div> </div> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Erno - Script Codes CSS Codes
/******************************
* STYLESHEET MA551V3 ~~~
*******************************/
html, body { height: 100%; width: 100%; background: #EEE; background: radial-gradient(#EEE, #FFF);
}
.container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 200px; height: 200px; perspective: 1000px; user-select: none;
}
.cube { width: 100%; height: 100%; position: absolute; transform: rotateY(45deg) rotateX(-15deg) rotateZ(-15deg); transform-style: preserve-3d;
}
.face { position: absolute; display: block; margin: 0; padding: 0; width: 100%; height: 100%; background: #111;
}
.face.front { transform: translateZ(100px); }
.face.right { transform: rotateY(90deg) translateZ(100px); }
.face.left { transform: rotateY(-90deg) translateZ(100px); }
.face.back {transform: translateZ(-100px); }
.face.up { transform: rotateX(90deg) translateZ(100px); }
.face.down { transform: rotateX(-90deg) translateZ(100px); }
.sticker { float: left; background: #aaa; box-shadow: 0 5px 5px rgba(255,255,255,0.1) inset, inset 0 -5px 5px rgba(0,0,0,0.1); width: 33%; height: 33%; margin: 0; padding: 0;
}
/******************************
* Rounded corners, Dayan style.
*******************************/
.sticker.tl { border-radius: 0 0 15% 0; margin-right: 0.5%;}
.sticker.tc { border-radius: 0 0 15% 15%; margin-right: 0.5%;}
.sticker.tr { border-radius: 0 0 0 15%; }
.sticker.l { border-radius: 0 15% 15% 0; margin: 0.5% 0;}
.sticker.c { border-radius: 15%; margin: 0.5%; }
.sticker.r { border-radius: 15% 0 0 15%; margin: 0.5% 0; }
.sticker.bl { border-radius: 0 15% 0 0; margin-right: 0.5%;}
.sticker.bc { border-radius: 15% 15% 0 0; margin-right: 0.5%; }
.sticker.br { border-radius: 15% 0 0 0; }
/******************************
* Official Rubik's colours
*******************************/
.cRed { background: #C41E3A; }
.cOrange { background: #FF5800; }
.cGreen { background: #009E60; }
.cBlue { background: #0051BA; }
.cYellow { background: #FFD500; }
.cWhite { background: #FFFFFF; }Erno - Script Codes JS Codes
//Need to rewrite this code badly
$(document).ready(function(){ var shift = ""; //Input interaction $('input[type="text"]').keyup(function(){ paint(); var input = $(this).val(); //Strip chars that would be impossibru and also whitespace parseMoves(input); }); //trigger keyup $('input[type="text"]').keyup(); //Keyboard $(document).keydown(function(event){ if(!$('input[type="text"]').is(':focus')){ val = $('input').val(); switch(event.keyCode){ case 16: shift = "'"; break; case 76: parseMoves("L"+shift+""); break; case 82: parseMoves("R"+shift+""); break; case 85: parseMoves("U"+shift+""); break; case 68: parseMoves("D"+shift+""); break; case 70: parseMoves("F"+shift+""); break; case 66: parseMoves("B"+shift+""); break; } } }); $(document).keyup(function(event){ if(event.keyCode === 16){ shift = ""; } }); //Mouse interaction $(document).mousemove(function(event) { x = event.pageX; y = event.pageY; w = $(window).width() / 2; h = $(window).height() / 2; x = (x - w); y = -(y - h); $('.cube').css('transform','rotateY('+x+'deg) rotateX('+y+'deg)'); }); $('input[name="favcolor"]').change(function(){ c = $(this).val(); $('.sticker').css('box-shadow','0 5px 8px rgba(255,255,255,0.2) inset, inset 0 -5px 8px rgba(0,0,0,0.2), 0 0 0 5px '+c+' inset'); });
});
function doMove(face) { var faces, stickers; switch(face){ case 'U': faces = ['front','left','back','right'], faces2 = 'up',stickers = ['tr','tc','tl'], stickers2 = [['br','bl','tl','tr'], ['bc','l','tc','r']]; break; case 'U\'': faces = ['front','right','back','left'], faces2 = 'up', stickers = ['tl','tc','tr'], stickers2 = [['bl','br','tr','tl'], ['bc','r','tc','l']]; break; case 'D': faces = ['front','right','back','left'], faces2 = 'down', stickers = ['bl','bc','br'], stickers2 = [['br','bl','tl','tr'], ['bc','l','tc','r']]; break; case 'D\'': faces = ['front','left','back','right'], faces2 = 'down', stickers = ['br','bc','bl'], stickers2 = [['bl','br','tr','tl'], ['bc','r','tc','l']]; break; case 'R': faces = ['front','up','back','down'], faces2 = 'right', stickers = ['br','r','tr'], stickers2 = [['br','bl','tl','tr'], ['bc','l','tc','r']]; break; case 'R\'': faces = ['front','down','back','up'], faces2 = 'right', stickers = ['tr','r','br'], stickers2 = [['bl','br','tr','tl'], ['bc','r','tc','l']]; break; case 'L\'': faces = ['front','up','back','down'], faces2 = 'left', stickers = ['tl','l','bl'], stickers2 = [['bl','br','tr','tl'], ['bc','r','tc','l']]; break; case 'L': faces = ['front','down','back','up'], faces2 = 'left', stickers = ['bl','l','tl'], stickers2 = [['br','bl','tl','tr'], ['bc','l','tc','r']]; break; case 'E': faces = ['front','left','back','right'], faces2 = '', stickers = ['l','c','r']; break; case 'E\'': faces = ['front','right','back','left'], faces2 = '', stickers = ['r','c','l']; break; default: return false; } //Need some pro cube rotations //Grab current positions and remove them.# var pos = []; for(var j = 0; j<stickers.length; j++){ //How many stickers positions? pos.push([]); for(var i = 0; i<faces.length; i++){ face = $('.'+faces[i]+' > .sticker.'+stickers[j]+''); //Get the class (colour) of a sticker face str = face.attr('class'); //We only want the colour class str = str.substring(10); //Slap it into the array pos[j].push(str); //Stored nice and safely so we can remove it from the actual cube. face.removeClass(pos[j][i]); } } //Replace permuted. for(j = 0; j<stickers.length; j++){ for(var i = 0; i<faces.length; i++){ q = j; if(i === 0){ //If we're at the end of the array p = faces.length - 1; }else{ p = i-1; } if(i == faces.length - 1 || i == faces.length - 2){ //Account for rendering quirk if(j === 0) { q = 2; } if(j === 2) { q = 0; } } //Add permuted sticker face colour $('.'+faces[i]+' > .sticker.'+stickers[j]+'').addClass(pos[q][p]); } } //This is the FACE side if(faces2){ var pos2 = [[],[]]; for(var a = 0;a<stickers2.length;a++){ for(var b = 0;b<stickers2[a].length;b++){ face = $('.'+faces2+' > .sticker.'+stickers2[a][b]+''); str = face.attr('class'); str = str.substring(10); pos2[a].push(str); face.removeClass(pos2[a][b]); } for(b = 0;b<stickers2[a].length;b++){ if(b === 0){ p = stickers2[a].length - 1; }else{ p = b - 1; } $('.'+faces2+' > .sticker.'+stickers2[a][b]+'').addClass(pos2[a][p]); } } } //DID YOU SOLVE IT SON? if(isSolved()){ alert('Are you a wizard?'); } }
function paint() { //Resets the cube and gives it a solved state. $('.cGreen').removeClass('cGreen'); $('.cBlue').removeClass('cBlue'); $('.cRed').removeClass('cRed'); $('.cOrange').removeClass('cOrange'); $('.cWhite').removeClass('cWhite'); $('.cYellow').removeClass('cYellow'); $('.front').find('.sticker').addClass('cGreen'); $('.back').find('.sticker').addClass('cBlue'); $('.right').find('.sticker').addClass('cRed'); $('.left').find('.sticker').addClass('cOrange'); $('.up').find('.sticker').addClass('cWhite'); $('.down').find('.sticker').addClass('cYellow');
}
function isSolved(){ f = [$('.front').find('.cGreen'), $('.back').find('.cBlue'), $('.right').find('.cRed'), $('.left').find('.cOrange'), $('.up').find('.cWhite'), $('.down').find('.cYellow')]; for(var x = 0;x<f.length;x++){ if(f[x].length != 9){ return false; } } return true;
}
function parseMoves(input) { input = input.replace(/[^FBUDLRXYZESMfbudlrxyzesm\'2]/g,""); //Split each char up into an array. input = input.split(""); //Make string into an array. for(var i = 0; i < input.length;i++){ switch(input[i]){ case "2": input[i] = input[i-1]; break; case "'": input[i-1] = input[i-1]+"'"; input.splice(i,1); break; } } for(i = 0; i < input.length;i++){ switch(input[i]){ case "F": input[i] = "E'"; input.splice(i+1,0,"U'","D","R","D'","U","E"); break; case "F'": input[i] = "E'"; input.splice(i+1,0,"U'","D","R'","D'","U","E"); break; case "B": input[i] = "E"; input.splice(i+1,0,"U","D'","R","D","U'","E'"); break; case "B'": input[i] = "E"; input.splice(i+1,0,"U","D'","R'","D","U'","E'"); break; case "Y": input[i] = "E"; input.splice(i+1,0,"U","D'"); break; } } for(i = 0; i < input.length;i++){ doMove(input[i]); }
}
| Developer | Nick Colley |
| Username | nickcolley |
| Uploaded | November 12, 2022 |
| Rating | 4 |
| Size | 5,311 Kb |
| Views | 10,115 |
Do you need developer help for Erno?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Nick Colley (nickcolley) Script Codes
| Name | Size |
| Diagonal Nav bar | 2,392 Kb |
| Wip elementary os navbar | 2,993 Kb |
| Henry Homesweet Boxmodel | 3,747 Kb |
| One element icon | 1,976 Kb |
| Music | 4,521 Kb |
| Banner hover test | 2,825 Kb |
| Flickering TV | 167,407 Kb |
| A Pen by Nick Colley | 18,585 Kb |
| Centered Text in a Perfect Circle | 2,410 Kb |
| Raincoat PC | 3,164 Kb |
Create amazing art & images with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
| Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
| Shopping cart | Andiio | 6,581 Kb |
| Main page display | BarryKe | 4,562 Kb |
| Google Chrome Icon using Pure CSS in one DIV | Grssam | 3,627 Kb |
| Simple animated hover effect | Pobee-norris | 3,044 Kb |
| Preloader | Rikki_Sixx | 2,815 Kb |
| Cloud upload | Jaflo | 2,774 Kb |
| Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
| Svg sky | Omodev | 7,070 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!