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,120 |
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 |
| One element icon | 1,976 Kb |
| A Pen by Nick Colley | 18,585 Kb |
| Subtle Quote | 3,379 Kb |
| Horizontal Scroll with device motion | 2,446 Kb |
| Music | 4,521 Kb |
| Curl Dropshadow | 1,623 Kb |
| Linux Install Terminal | 2,259 Kb |
| Diagonal Nav bar | 2,392 Kb |
| Banner hover test | 2,825 Kb |
| Centered Text in a Perfect Circle | 2,410 Kb |
Create amazing Facebook ads 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 |
| Buttons for autumn | Nikazawila | 1,795 Kb |
| Virtual vinyl | Davidpanik | 3,474 Kb |
| Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
| Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
| Resume | Rottingroom | 5,483 Kb |
| We Simplify animation | Meodai | 48,169 Kb |
| Brian The CSS Bee | Jonitrythall | 3,922 Kb |
| Import shader in three.js | Khangeldy | 2,636 Kb |
| SVG Modified with Query String | Jnowland | 1,663 Kb |
| Video Player Custom Controls | EleftheriaBatsou | 3,665 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!