larspetrus / roofpig Goto Github PK
View Code? Open in Web Editor NEWRubik's Cube animation for the modern web.
License: MIT License
Rubik's Cube animation for the modern web.
License: MIT License
Hi , Please Help !
How to set Red
Color Side to Left
as Default ? ( In Default , Red
Color Side always in Front
)
I Can not find example from readme or Demo ?
Give it a try. Pieces go flying. I think it should give an error instead.
When trying to view the demos on the author's website in a Chromium-based browser (see https://lar5.com/cube/blox.html for a broken example), the first example disappears. I've checked the dev console and saw "WARNING: Too many active WebGL contexts. Oldest context will be lost." which explains what's going on: A separate WebGL context is used for each demo.
I can think of a number of workarounds:
Function requirements: Can the current magic cube picture be exported at a certain step?
Hi all, I'm trying to build an interactive cube that I want to drive with some buttons. Is there a way to pass moves to a cube? The examples don't seem to suggest this feature. I would build a rows of buttons (L D R F U etc) and my button's onclick would trigger a function like:
var cube = getCube()
cube.move("L")
Thanks for helping.
For example, alg=U
maintains red front/yellow up. However, alg=M U
reorients to yellow front/orange up. This then requires adding setupmoves=x
to maintain the correct orientation. The same is true of wide moves. Maybe I'm just misunderstanding the correct usage...
Hello,
I'm trying to use Roofpig, I need to load dynamically a cube but the animation does not start.
Here's the code (it's simple but I need to load the content dynamically and not statically). The cube is loaded but the animation does not start in any case (click on play,, plus, press bar space, ...).
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery.min.3.1.1.js"></script>
<script src="roofpig_and_three.min.js"></script>
</head>
<body>
<div id="animation" style="width:30%; margin:auto;"></div>
<div id="loadAnimation">click here to load animation</div>
<script>
document.getElementById("loadAnimation").onclick=function()
{
CubeAnimation.create_in_dom('#animation', "alg=L' R U R' U' L R' F R F'|colored=u|hover=2|speed=1000|flags=showalg|colors=U:y F:b R:r B:g L:o D:w", "class='my-roofpig'");
this.parentNode.removeChild(this);
};
</script>
</body>
</html>
All the demos at jsfiddle.net are dead, because they try to read the roofpig js file over http. No decent browser nowadays will allow a https page to access http.
It might be better to move css out, provide it as a standalone file. Then users can use the default style or their own.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="roofpig_and_three.min.js"></script>
<link rel="stylesheet" href="roofpig.min.css" >
Hi Lars, is there a way to prevent the cube from snapping back to the original rotation after rotating it?
Function requirement: Can you export the current expanded picture of each side of the magic cube in a certain step?
All solutions that solve the same scramble will begin in the specified pov.
http://imgur.com/24lKeuX
edit: fixed img link
Rotations, wedge moves, and slices alter the start pov.
Since apparently you are still working on this, I guess it won't harm to remind you a year old issue.
All I see on default Android browser on a mobile phone is a box saying "requestAnimationFrame is not defined". As said one year ago, I remember the time your simulator was working on the very same device and browser.
Therefore, is it a bug or a feature?
Refactoring of EventHandlers.coffee is on its way in a pull request.
Hello,
I am running into an issue.
I am trying to use your library to show 2 cubes.
A first cube with the scramble instructions and a second with the algorithm (one OLL algorithm in this example
In the first cube, I put my scrambling sequence as algorithm and it works as expected
I then use that same sequence as "setupmoves" for the 2nd cube, but some of the colors are mixed up
The image below shows the first cube with fully executed algorithm and the second one in the initial state (and they should be identical)
The problem seems to be coming from the rotation (y) at the end, if I remove that, they are identical.
I do however need that rotation in the setup step, as I cannot otherwise apply the resolution algorithm (which expects a specific rotation). If I remove the "y" from the setupmoves and add it as first step of the algorithm, I get the correct end result.
I looks like the rotation are not managed the same way in the setupmoves than in the algorithm
Hi Lars
I was looking at some of the demos on jsfiddle and a few of the demos with small cubes looks incorrect. I have attached a picture of how it looks:
The picture is from the demo found here: http://jsfiddle.net/Lar5/tE83s/
It looks the same in the latest versions of both Chrome and Firefox on Windows 7.
I tried adjusting the size of the .roofpig class and that made the rendering look correct.
Any idea what is wrong?
Would be wonderful can use roofpig
to visualize FMC reconstruction.
Enable a kind of token - like (switch) or (inverse) and (normal)
that would would show a cube after applying a NISS (switch).
scramble: D2 U2 L' R2 B2 F2 U2 B U2 L D' F2 U B U B' D
solution
L2 F2 // 2x2x2
U' B U2 // pseudo 2x2x3
(switch)
U2 B U // 2x2x3 + EO
(switch)
B' R' B2 // Pseudo F2L
(switch)
B' L' F D2 F' L B2 // AB3C
We could visualize this kind of reconstruction in.
L2 F2 U' B U2 (switch) U2 B U (switch) B' R' B2 (switch) B' L' F D2 F' L B2
colored
and solved
seemed to be affected by the reversed alg that is applied to the cube's initial state. I am not sure if this is the expected behavior
Please see an example here.
http://jsfiddle.net/cubervic/WVW83/1/
Both with colored=f
:
The second case with no alg
shows a yellow face in the front.
The third case with alg=y
shows a green face on the right, and comes to the front after y is executed.
Shouldn't the face on the right be red instead?
(the default color scheme according to README.md says that F is red)
I understand that x y z are destructive and U> is not, but it is just not very intuitive to me that x y z would affect the way the cube is colored.
Is the the expected behavior for colored
and solved
?
P.S. it is a wonderful script btw, thanks a lot. Great job Lars!
Hi Lars, This is such a great project!
So right now when you rotate the cube (using the key events) CSXD
you are moving the camera and thus the position of your hands stay the same. So in terms of the algorithm U becomes R and then B etc.
It would be nice to rotate the cube and update your hand positions too. Is there an easy way you would recommend that?
is there a way to fix the cubes I created using JavaScript at run-time?
my code runs after a button is clicked:
function on_button_click() {
for (var i in F2L) {
var c = F2L[i];
var $div = $("<div>")
.append($("<p>").addClass("description").text(c.situation))
.append($("<p>").text(c.note));
for (var j in c.maneuvers) {
var maneuver = c.maneuvers[j];
$div.append($("<div>").addClass("roofpig").attr("data-config", maneuver));
}
$div.appendTo("body");
}
}
Fix in pull request is on its way.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.