I am making a math teaching web page (URL below) and want to use JavaScript to create a wipe-in effect of a Canvas drawing. As you can see on my page, I have drawn a series of rectangles in a pattern. When the student enters the correct answer, I want to draw Fig. 5 using a wipe-in effect. What would be the best way to do that?
My thought at first would be to create a function that draws the entire pattern, then cover it with a white box that decreases in size, but I would surmise that doing it that way would cause a fluttering effect rather than a clean wipe.
Any ideas for how best to accomplish this? Thanks in advance for the help!
URL of page: http://collinmath.com/Lessons/blocks.html
URL of Javascript: http://collinmath.com/Lessons/blocks.js
Related
I want to simulate 3D text being drawn out or built inside my scene. The idea is to take the final score from a game and display it dynamically at the end of the game. If you don't know what I mean, imagine somebody graffiti-ing/tagging some numbers on a wall. The numbers don't pop in like they would if you typed them, but are constructed by building up each number.
Reference for graffiti-ing
I'm pretty sure that I want to use TextGeometry for this but I have absolutely no idea how I would go about making it appear dynamically and there aren't really any examples of this.
My only thought would be to hide each vertex in the TextGeometry and then make each vertex visible with a delay in between but I have no idea if that is anywhere near the right way to do it.
I know that it's possible to animate a line being drawn, but I'm going to need to use TextGeometry as I am using a specific font.
This JSFiddle is a great example of what I want, but with text instead of a line.
I don't have any code for this as I have no idea where to start, thanks in advance for your suggestions, any links/references/code examples are appreciated!
I want to create a 2D skeletal animation using JavaScript library to make interactive 2D animations in the browser.
I'd like to create a human body. Let's consider this simple scenario to better explain what I want to achieve. I have a text box where I can enter an instruction like "say Hi", then the body should raise a hand up and give hi five. I am working to draw the both images and make them show up at every time.
When Init() : I show the body (Image One)
When I request to say Hi : I show the next body taking the hands up (Image two)
And I do animation by creating a HTML5 canvas, the same way as: http://jsfiddle.net/FZyA3/
The problem is that I have to make more than 50 instructions. It's heavy to draw all the scenarios where I have common cases. Is there any open source character to use, like Three.js and babylon.js?
Is there any other better solution, like pixelising the arm and making it movable within an HTML5 canvas?
I highly recommand spine: http://esotericsoftware.com/
It's an editor which comes with an JS-runtime.
I would like to implement an image collage, where the photos are arranged on the page within a 'Word' object.
This is really hard to explain, this maybe why I haven't found any examples on the web. But as an example, let's take the word 'HTML'.
I would like to create a shape on a canvas on the screen, and then have photos transition onto the screen (easing, sliding, flying) and then arranging themselves sporadically around that shape. Then have the images clickable/zoomable. If possible, draggable as well within the shape.
Now, my first question, is this achievable, and how would I go about doing something like this?
I don't know too much surrounding HTML5 canvas, and am using this project to get my teeth into it. So I would really like to know briefly how something like this could be done.
thanks!
You can do something like a mask in photoshop you would get an image with invisible area with the shape you want to mark and then put the world image in the background.
This might also be of help http://www.html5rocks.com/en/tutorials/masking/adobe/
I am learning to develop mobile applications, quite in the initial phase.
This query is not related to mobile but more to html/css/js.(for
I intend to make a simple game, where a picture is seen, a few options are available and the user can drag and drop these options onto the image.
eg. There is an image of a plant > options are #leaf #stem #flower #bud
The user must drag and drop the correct option to the correct place on the image to get points. i.e Drag the #leaf option onto the leaf of the plant.
Now my problem is the image, the separation of these points, I can't figure out how to do it.
Query in short: How do I access separate points/sections on a single image in html/js for above purpose?
Query (longer version)
I did a little search and realised I can slice the image and recreate it using multiple images, I tried this, it sort of works but it has a a lot of drawbacks:
1)More images mean more space, combined size of the split images was about 1.5x the original image(this is just splitting it into 4 images)
2)For a complex picture, the number of images to slice into is large and hard to manage in css(n00b==me) as they don't just need to be split into a simple X*Y grid but a much more complex split depending on the object in the image.(realised when I was trying to do a simple cell structure img)
3)More images also means more http requests(in case the app is WebView based) which will increase loading time.
It just seemed liked too much of a hassle, there must be a better way.
Then I saw css sprites , I dont need to combine my images like sprites are intended for, rather the reverse. Just access parts of my pre-existing image, as separate objects.I haven't tried this(working on it) and and I haven't seen this being done either, or maybe its being done and I'm not seeing.
Please help guys, my problem is quite simple(I think) , I think I'm just not getting the correct google search terms.
If anybody has any ideas,links, resources and also any clarifications as I may not have put up my problem as clearly as I'd like to, please do reply.
regards,
Rahul Agarwal
You could try to place transparent divs over the main image using absolute position and fixed dimensions. Those divs will be assosiated to the possible options, and when a user drops an option over some specific div, you'll know what points to give.
Little demo using two divs and an animated scaling to show that the positioned divs will scale according to their parent:
http://jsfiddle.net/VK3A8/
fiddel with image:
http://jsfiddle.net/8qLFc/4/
I've made a beginning of a script to achieve the "matrix effect" (to use in the background) in JavaScript. I used the Canvas element, but for some reason its kinda slow but i don't know why.
Matrix effect: Those (green) text lines which are scrolling from top to bottom.
script:
http://dominiquedebrabander.nl/matrix/matrix.js
i've linked the script, 'cause its to long for this textarea. I hope you guys know why, or have some tips.
greetings, Dominique
Why are you calling clearRect if you are just gonna fill it with black? Remove that call
Don't set the font over and over if it never changes, just set it once at the start.
drawing text is slow, see my post here. Consider painting every letter to a second invisible canvas and using drawImage to draw parts of that canvas to your real canvas
If you really want it to be done the way you are doing it now it will be much faster if you draw everything to a large offscreen canvas and you just draw that single canvas over and over, but then you wouldn't be able to have the letters fall at different speeds from each other. And it would look more matrix-like if you did that, say put the y at += Math.random()*4.5 (or so) instead of 0.5