Three.js - Dynamically "build/draw" TextGeometry - javascript

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!

Related

Feathered edge Ellipse p5.js

Im looking to create an ellipse with a feathered or soft edge, as if it has been drawn with a spray can. I cant get my head around it...?? :-i
Any Help will be truly appreciated.
You have to break this down further. Pretend you have a friend who has never seen anything drawn with a spray can, so they have no idea what that looks like. Your goal is to give your friend a piece of paper, a pencil, and a list of steps they can follow to create the effect even though they've never seen it before.
Write down a series of steps (in English, not in code) that your friend could follow using the pen and paper. Remember that your friend has never seen the effect before, so you have to be as specific as possible. Try to break steps down into smaller sub-steps whenever possible. Maybe try watching videos of the effect in slow motion to figure out exactly what's going on.
When you have the list of steps written down, that's an algorithm that you can think about implementing with code.
Even though this doesn't feel like programming, this process of breaking your main goal down into several smaller steps is at the core of programming (especially creative coding).
That being said, I can help you get started by offering several approaches you might want to play with.
Just use an image stamp. Draw the effect beforehand and then just draw that image to the canvas, optionally randomly rotating and coloring it.
Or draw a series of circles, maybe getting more transparent as they get further from the center.
Or draw a random dot within a random range at a random angle. Do this several times per frame.

Is there a way to add an outline to a shape in x3dom

I just want to put an outline on a box I am hovering over. I remember seeing a tutorial on this before but now I can't seem to find anything on it. Any help would be greatly appreciated!
As far as I know there is no outline attribute for a 3d shape in x3d.
You could maybe do a trick by having two boxes, the second one (the bigger one, maybe different color) being the "outline" of the first one. I would put the two in a Switch node. On mouse over display the bigger one.
Or maybe another solution (easier) is to change the size parameter of your box. You can do this by routing a SFVec3f value to the scale of your box or by writing a bit of javascript code.

Implementing Image collage to a 'Word' shape using HTML5/JS

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/

html5 cube slideshow

I'd like to know how to make the faces of a 3D slideshow interactive i.e adding links on it.If creating multiple faces or walls is the way to go does that mean I put a layer over each wall and is so how would I do that?
In the end each wall should be able to be treated individually but all still in this cube form.
This is the slideshow I'm talking about
http://www.script-tutorials.com/html5-3d-cube-slideshow/
Thanks alot for your time!!
Well, they aren't really html objects. The "walls" are created using the canvas tag - which basically just means javascript. If you want to make it more interactive, I'd recommend that you look into CSS animation instead. You could probably achieve the same results using CSS. Search google for CSS animated cube or something like that.

Create a smooth curve from a series of GPS coordinates

I have looked at a lot of Q/A here on SO regarding similar (if not the same) question I have. Yet none had an answer I was able to understand.
I wish to input a series of GPS coordinates, and create a smooth curve that connects them all, and passes through ALL of them. Javascript is my preferred language and I have found this page
http://jsdraw2d.jsfiction.com/demo/curvesbezier.htm
It allows you to plot any number of points and when clicking the 'Draw Curve' button it does exactly what I want (except it is on html5 canvas whereas I want to use lat/lon values)
You can download the jsDraw2D source code here:
http://jsdraw2d.jsfiction.com/download.htm
The function in question is drawCurve() and it appears to calculate the points of the curve, creating a separate 'div' for each point as it goes along, while also appending them to the html page. I am presuming I need to get rid of the code for creating the html divs and instead add each point as it is calculated to an array or string. However, it is simply over my head (perhaps because it seems overwhelming and my understanding is not quite spot on).
I would post the code here, but it is pretty long, plus I am not sure how many other functions it calls/requires from the rest of the script.
The only other thing I can think of that needs to be considered is the +/- values in GPS coordinates. I am hoping that altitude changes would not effect the smooth line created too much, especially since it seems to create the new points so close together.
Any help in modifying that code would be greatly appreciated. If someone has some other approach, I am open to suggestions - however I would prefer a way that passes through ALL the input points (unlike some mathematical curve functions that do not)
Thanks!

Categories