Introduction
I consider myself an avid speed cuber. Not world class, but fast enough and not too obsessed with it. That being said all the sites I’ve seen in the past with references to algorithms all seem to use really clunky client side Java or Flash plugins to handle the demonstration of moves. I wanted to create a simple to implement jQuery plugin that utilizes the browser’s built in features to do the same thing. The result is my jquery.cube.js plugin. As seen below.
The Plugin
The plugin code is available here: https://github.com/godlikemouse/jquery.cube.js
Working Example
See the Pen jQuery and CSS Implemented Rubik’s Cube by Jason Graves @godlikemouse on CodePen.
This plugin utilizes standard cube notation, both modern and old to execute moves. For example, the moves executed above are utilizing the following notation:
x (R' U R') D2 (R U' R') D2 (R U R') D2 (R U' R') D2 (R U R') D2 (R U' R') D2 R2 x'
This algorithm is being passed to the cube plugin by way of the execute() method.
This plugin currently supports a number of configuration options that can be passed at instantiation time including, cube face colors, animation delay time with more to come shortly.
Conclusion
For more information on this plugin or to view the source please visit: https://github.com/godlikemouse/jquery.cube.js
28 Comments
Hitesh · June 11, 2015 at 5:58 am
Awesome …
godlikemouse · June 11, 2015 at 7:16 am
Thanks.
Steve Marsh · October 25, 2015 at 10:33 am
any ideas on why the CSS seems to go nuts when i add an HTML div or a button after the cube div?
all is OK until clicking on the page causes some of the faces to disappear or shift.
i wanted to add a UI to execute steps interactively…
godlikemouse · October 25, 2015 at 8:05 pm
Hi Steve,
Hmm, I’m not really sure why that would be happening. If the button is outside the bounds of the cube I don’t see why it would start getting weird CSS wise. Is there perhaps something else on the page that’s interfering with the cube’s CSS? A button alone wouldn’t cause this issue. If you want to post the code on a fiddle, I can have a look at it.
Steve Marsh · October 26, 2015 at 8:37 am
thanks for the very prompt reply!
not sure how to use your library code on fiddle but the html i am having trouble with is very short and here it is:
jQuery Rubik’s Cube Plugin Demo
#taDisp { display:block; width:256px; height:7.2em; margin:24px auto 4px; padding:2px; background-color:#edd; color:red; }
L R D U
Exececute
window.onload = function () {
var cube = $(“.cube”).cube({
animation: {delay:333}
});
cube.execute(“U D L'”);
if (cube) document.querySelector(“button”).addEventListener(“click”, function(){ cube.execute(taDisp.value); }, false);
}
i do not believe it’s the version of jQuery i am using since it appears much more as browser-related, but maybe???
the initial execute works and looks great when the onload fires. when i either just click the button or even just click inside the text area that’s when the cube color panels go nuts. they stay that way through further executes until you refresh the page to initial state again.
thanks for any more inisght you may have.
Steve Marsh · October 26, 2015 at 8:56 am
i tried to reply with my simple HTML but i see that did not get through in my reply. i used your codepen example link and forked that with my changes. the issues happen there too, which should let you see it happen.
my forked link from your example is: http://codepen.io/anon/pen/gaedBq
HTH
godlikemouse · October 27, 2015 at 11:44 am
Hi Steve,
Your codepen seems to work fine in Chrome. What browser are you using by the way?
Also, there’s a bit easier of away to do the button handling using jQuery, for example:
$(document).on("click", "button", function(){
cube.execute(taDisp.value);
});
This will save you for having to worry about whether or not the document/window has finished loading, etc.
Steve Marsh · October 28, 2015 at 8:30 am
Thanks for checking this out for me. I already use Chrome as my main browser but use the ‘portable’ version off of a thumbdrive. I thought i was using a fairly recent version but guess i need to get a newer less-buggy version. I got tired of Chrome always updating itself every dang day it seems. I prefer to update my software when i want, not them :-);
I was tending to Chrome as the culprit but was not sure it wasn’t a little typo in your plugin code. You structured it well but i got lost in all the permutations keeping track of lefts, rights, ups, downs, etc. as the rotations change state!
I also appreciate the jQuery thought but wanted things as simple as possible while learning the 3D CSS. Went back to good ole KISS development mode and cut/pasted from another file, which explains the ID and colors of the text area too, an input in this case and not output display ;-).
Thanks again for your time and the neat plugin! I always like to check out other people’s code and hopefully learn some new techniques.
Niranjana · March 2, 2016 at 2:50 am
Great Plugin. Thanks. But it is not working in firefox properly. Any solution?
godlikemouse · March 2, 2016 at 9:34 am
Hi Niranjana, are you testing this on a native machine or through an emulator? Being that the WebGL context attempts to use the graphics card for acceleration, if you’re not running native you may have problems. I just tested using Firefox which automatically updated to 44.0.2 and it worked just fine. I can add a fallback renderer which would be the canvas renderer however, the performance will be very clunky.
Achan Lin · February 14, 2017 at 11:26 am
Hi Jason:
Thanks very much for your plugin. I use it on my website. Also, I think there is a type error in jquery.cube.js, within
_ref.turn=function(move, rotation){
….
case (“f”)
pos.oz should be 90 instead of -90
….
}
godlikemouse · February 15, 2017 at 3:21 pm
Hi Achan,
Are you seeing an error in the console, or is the move incorrect on the screen? Thanks.
Achan Lin · February 15, 2017 at 7:51 pm
the move is not correct. Just make the change in the js program, it will be ok.
Achan Lin · February 15, 2017 at 8:18 pm
i mean the file in the github account. i downloaded the files from your github account then play with it. Then i found movement f is not correct …
i use the plugin on my website,
https://achanlin.github.io/rubit_cube/index.html
i just changed the js file to the 4×4 and 5×5 cube today….
Achan Lin · February 15, 2017 at 8:21 pm
https://achanlin.github.io/rubik_cube/index.html
Achan Lin · February 15, 2017 at 8:23 pm
the websit should be
https://achanlin.github.io/rubik_cube/index.html
godlikemouse · February 16, 2017 at 3:04 pm
Hi Achan,
Sorry, I’m not seeing the issue. When I send an “F” I see the front face turn 90deg clockwise which is correct. Is there something I’m missing? Perhaps file an issue on github with reference to where the code is incorrect because I’m not seeing a problem.
Achan Lin · February 16, 2017 at 3:07 pm
It is not F, it is “f” , please also check “l” too (turning two columns together.)
godlikemouse · February 17, 2017 at 9:13 am
HI Achin,
Thank you for reporting the issue. I’ve updated the github repo to include the fixes for both “f” and “l”.
https://github.com/godlikemouse/jquery.cube.js
Achan Lin · February 21, 2017 at 4:37 pm
Thank you for the update. Could you help me for a question?
In my html file, I set up the following variable.
var cube = $(“.cube”).cube({
animation: {
delay: 1000 }
});
I have two functions using this “cube” variable. And I want they have different delay parameters. The first function, delay 1000 is good, the second one I want to change the animation
delay to 200, how do I do it ? I wrote
cube.animation.delay = 200;
But it does not work.
Thank you.
godlikemouse · February 22, 2017 at 12:11 pm
I think the best way to do this would probably be to add a method for retrieving the living options from the plugin, which can then be modified for real time changes. How does this sound?
Achan Lin · February 22, 2017 at 1:49 pm
Yes, probably. But I just start to learn JS,…. If you have time, would you please add that method?
If not, I’ll just leave it for that for now.
Anyway, thank you very much for the plugin. I modified it for 4×4 and 5×5 cube, it works great.
godlikemouse · February 24, 2017 at 10:23 pm
Glad to hear it, thanks.
godlikemouse · February 22, 2017 at 9:39 am
Hi Achan,
Try re instantiating the cube plugin with the new value. Let me know if that works for you.
Achan Lin · February 22, 2017 at 12:00 pm
Thanks for the answer. But I do not want to re instantiating the cube plugin.
In my website animation, I use one function to maneuver the cube so the cube present a status which could apply the formula. I want this maneuver faster. Then use another function.
for example, in the following animation, I want “press me first” execute faster. the one with formula slow.
https://achanlin.github.io/rubik_cube/animation/formula3.2counter_clockwie_fish.html
Thank you.
godlikemouse · February 22, 2017 at 2:20 pm
Added getOptions, please grab the latest code from github. Thanks.
Achan Lin · February 23, 2017 at 5:40 am
Thank you very much. It works perfectly now.
Achan Lin · February 16, 2017 at 4:52 pm
I mean l’ .