I'm building a system using these languages where dom elements are created by clicking and behave with proper physics. Basically speaking, the elements are created in setup with visibility hidden, at click an array of boxes is created containing matter.js rectangles, each with each dom element's sizes. In draw, everything is then updated to that the dom elements have the position and the rotation of the matter.js elements. Hope i managed to explain everything properly lol.
this is the final results, where everything seems fine: https://codepen.io/giambrodo/pen/RwBvRjV
the issue is when trying to style everything and double-check the physics by using a canvas to visualize the matter.js rectangles this happens: https://codepen.io/giambrodo/pen/WNKjgmg
boom! what did i do wrong? I mean the DOM elements are clearly not aligned with the rectangles, especially for p elements where when they get styled they go crazy. I can't grasp my head around how that happened. Please. Someone help me :(
P.S. I've clearly seen this HTML elements with Matter.js and even if in a slightly different way it seems quite the same to me, but still, I have encountered those issues.
I've used this:
img[this.id].position(this.pos.x - img[this.id].width/2, this.pos.y - img[this.id].height/2);
img[this.id].style('transform', 'rotate(' + this.angle + 'rad)');
Related
I've just started out with SVG and have gathered enough information to see that animating these objects is not the same as animating canvas objects. With canvas objects, the canvas is redrawn on every frame, but it seems like with SVG you aren't supposed to be thinking in terms of frames and FPS, but rather in terms of seconds and delays by using the built in <animate> tag.
While I appreciate all the out of the box functionality for SVG animations, I've built up quite an understanding (and library) for how to get my animations working together on canvas using the frames and a timeline paradigm.
I know there is timeline and scheduling support for SVG with libraries like GSAP or SVG.js but I much prefer thinking in terms of FPS and and frameCount.
I was wondering if I might be able to continue using this paradigm, but instead simply update the attributes of my SVG objects on each frame iteration and let the DOM re-render the positions instead of figuring out a way to describe the animation in the <animate> tag.
I'm completely open to suggestions if using the <animate> tag isn't as finicky as I think it is for scheduling my animations/getting them to move together and any suggestions would be much appreciated.
My animation needs aren't to the likes of high performance websites, I just want to step through them to show people some math concepts as they progress.
Updating SVG element attributes is a completely fine way to go about animating them. It can be more performant than clearing all elements in your main SVG tag, and redrawing - but that depends on the drawing, browser, and animation details. But, SVG renders surprisingly quickly, so if you are just stepping through tailored frames to demonstrate a concept, and if it would be more convenient to think of each frame independently, you should be completely fine to also clear and redraw. If your project is intended for a website, make sure to test your implementation on Chrome and Firefox at least as they have slight differences.
I'm in the process of creating an interactive whiteboard application using PHP and jQuery. Creating a deck is not the issue, nor is applying a canvas overlay to the page so that I can write on it. I'm an amateur coder and completely self-taught. This is part an exercise in learning more, and part a means to give me a great tool to use in my teaching practice.
The problem that I'm encountering is applying a CSS transition to the canvas element, so that as the slides change, the canvas element moves as well, in order to avoid having the previously made drawings still present on new slides.
I have gotten the canvas element to move with the slide transition, however, when this happens, the canvas is rendered useless (on the current slide). If I transition back to the previous slide, I can see everything I've drawn.
I'm hoping that this isn't too vague of a question or explanation of the situation to get help, but any pointers would be great.
Figured out the problem. I thought the original script was taking into account the distance the slides were transitioning, but it wasn't. I added in a line to take care of this, and it works like a charm.
If I have a canvas with a circle that changes color upon clicking on it, I can use a click event on the canvas element and handle the math for that (distance formula calculation <= radius). But what if I have two circles that overlap (like a van diagram), and I click in the middle of the two circles assuming that only the top circle should change color? If the math of the first circle is applied in this case, both circles would change color.
How would I deal with events in the canvas in terms of overlapping objects like the example above? With hopefully a fast/efficient algorithm?
You might want a framework like EaselJS that has a better api for what you're trying to do. Barebones canvas 2d-context doesn't provide much in terms of display-object / sprite behavior.
Responses above also mention some sort of list to represent layers. I don't think the implementation would be very difficult, just another condition to check for along with the radius.
Canvas isn't really like Flash or like a DOM tree whereby things have sort orders or z-indexes. Its a bit more like a flat rastered image and you have to rely upon other logic in your javascript to remember the sequence & stacking order of things you have drawn.
If you need this kind of interactivity I've always found it best to use a 3rd party library (unless it really is just a case of one or two circles which dont do much).
For interactive 'shape' based javascript graphics I would sugest Raphael.js or D3 which are actually more of SVG tools than a canvas one so maybe it's not for you but they are simple and cross-browser.
There's also processing.js (js port of Processing the Java lib) which feels a bit like flash and again can track all of the levels and objects. Theres a tonne of others but thats another topic.
If it's super simple the options might be:
Hold the co-ordinates of all shapes/elements composited on the canvas inside an object or array which also tracks their z-index/sort sequence, thereby letting you know whats on top.
Using the imagedata at the mouse coordinate of the click to establish what has been clicked
using multiple canvases composited on each other and letting the DOM do the work for the click events
my link: http://dl.dropbox.com/u/7727742/playlistsite6/index5.html
I have a 3d cube using a variation of zachstronaut's demo
(link: http://www.zachstronaut.com/lab/galaxy-box/ ). It uses javascript, translate3d, scale3d, etc...
I've tried assigning different z-index values in the css file, but with no luck. I can access the objects outside the cube(you can see this with the hover effect), but not the objects inside the cube. I have a hunch it is because it's not doing a z-sort type of function like pre3d.js. I was wondering if anyone could offer some insight into where I should look for a solution.
Object coordinates are generated randomly, so you may have to refresh once or twice to get some objects that are inside the cube.
Thanks!
EDIT:
Only tested in safari and chrome dev
Webkit ignores z-indexes on anything that has translate3d defined, as it logically should. z-index is meant for a 2D world, it's like taking a bunch of paper and saying "this one is on top" -- you still have a flat surface. Unfortunately, if you want to be able to select one of the "stars" inside of your box, you're all but out of luck since you're using HTML nodes.
The normal way of doing this is using a click-map -- basically every object gets rendered twice. Once normally and once in a single color with no shading, etc. The 2nd rendering is never shown and is simply used to tell what the user clicked on. You get the color where they clicked and that color maps to a specific object. If you were using canvas, you would do it that way and just change the rendering order on the 2nd render.
Since you're using HTML nodes, you can't do that. You have a couple of options:
You can calculate which star is under the mouse on mouse-move based on viewport rotation and x/y/z position of the star
you can attempt the above method by overlaying an identical rendering without the cube and where the stars have a 0% opacity. Each star in your new rendering would map to a star in your existing one, and you'd have easy mouse-over detection.
Post the results! :)
First of all, I'm glad you found my demo interesting!
You're not going to have much luck trying to do a hover or capture a click event on objects inside of a 3D CSS3 cube for the exact same reason you wouldn't have much luck capturing a hover or click events on a div underneath another div... in HTML all the DOM events go to the top most DOM node. If one div overlaps another div, you can't click the one that is underneath. Everything inside the 3D cube is "underneath" another DOM node.
Things are further complicated because you're taking objects in 3D space and asking a user to interact with them on a 2D plane (the browser window) using a 2D input device (the mouse).
You could hide the faces of the cube so that they wouldn't block the user's clicks. You could do something like cwolves suggested.
Sorry I couldn't be more help... HTML kind of fails us a bit here. Welcome to the bleeding edge!
The 2nd part of the question is, which javascript library is better/easier to manipulate images with? I won't be actually drawing any shapes or anything. Other info: I'll be using jQuery and don't need to support all browsers, just webkit.
Edit:
More information: the current design is to layout/draw several rows/columns of images in a grid-like layout, with the image in the center being in "focus" (a little larger, with a border or something and some text next to it). The tricky thing is that we want the whole canvas of images to appear to slide/glide over to bring another random image into focus. So obviously the number of images in this grid needs to exceed what is visible in the viewport so that when the transition occurs there are always images occupying the canvas. Other than moving the images around, I won't be blurring them or otherwise modifying them. Eventually we will add user interactions like clicking/touching on a visible image to bring it to focus manually.
Let me know if this is not clear or still confusing.
I ran across scripty2 which seems like an alternative to using canvas/SVG for my purposes. I also started farting around with EaselJS last night, and it seems like this might work, but I'm wondering if it'll end up being more work/complex than just using standard HTML/CSS and a tool like Scripty2 to aid with animations and click/touch events. Just looking for any suggestions. Thanks!
The answer depends on your manipulation and animation.
If it's just translations, CSS wins for speed compared to canvas. I haven't tested, but I feel confident it easily beats SVG for the same sort of thing.
If you're going to be doing non-affine transformations or otherwise messing with the images (e.g. blurring them) you clearly want Canvas.
If you need event handlers per object, you clearly want a retained-mode drawing system like SVG or HTML+CSS. I haven't done enough CSS3 transforms to say how they compare in terms of speed to SVG, but they clearly do not have the robust transformation DOM of SVG.
This is a rather subjective question (or suite of questions) and you haven't yet given sufficient information for a clear answer to be possible.