Words rotating around an invisible sphere, triggered by mouse position

Hej Greg,

thanks a lot! That really helped me… Best regards, Tom

1 Like

Great tutorial thread @gasspence!! This could be great for a lot of things.
Here is a creativity starter… “Greg’s Magic Book”
The fonts can be changed in Hype and the rotation properties of the canvas can all be changed in Hype to fit the page angles. (Except in IE 8,9) Seriously why would anyone use those “browsers” :wink:

You could make animations of books that have clouds that magically appear when the user mouses over. Click on a link and they go to another chapter.
Adventure Games could be a blast! :smile:

tag_canvas_book.hype.zip (181.9 KB)

4 Likes

I've never had the artistic ability to create these things.

Now you can! Just take your scripts and the artwork and try something :smile:

1 Like

I was thinking that this tag cloud thing would be great for idea bubbles.

1 Like

Really really great Nick :smile:

1 Like

Hi Nick, nice idea… but should this not become its own topic?

Hi Greg, me again ;o)
Really cool. I played a bit around with it and managed to change quite some parameters according to the project I am working with. The only thing that bothers me right now is, that the js.file seems to define its own canvas from within the js.file. When I publish my hype project, my tag cloud only covers about the left half of the page…, although there is much more space available in the Hype frame. The js.file mentions a “canvas manager”, but I could not find… Any idea how to configure that canvas? Kind regards

you can resize the canvas in the innerHTML…

<canvas width="550" height="300" id="myCanvas"></canvas>
1 Like

Yes you are right, Already did that.
I was first just responding to Greg.

Hey Tom, I did another tag cloud thingy that has of the configuration/settings in the HEAD HTML that you may want to check out. I think it may be an easier way to implement the tag cloud.

1 Like

Hej Greg, hihi, now it gets artistic!
So far we have the hype picture of the guy wondering about dinner, but the actual tag cloud is just on top of the picture, right?
I reckon, once one connects the tag cloud straight to the the guys head you can animate both the head and the cloud. Then he could walk around wondering about dinner…
But:
The options for the tag cloud offer the possibility to have a picture in the center of the cloud (and even animate it).
I realise, that I am still in doubt, when to use the “inner Html” and when it will be the “Js-function”… I guess, as long as I can stay behind or in front the tag cloud, I would go for hype or the inner html.
How would I declare f.e. the face to be the in the center of the cloud? This would have to be part of the java function, wouldn’t it?

An other question: Can the off set between an element and its inner html code be controlled?

The rectangle that the tag cloud is in is movable. It's simply a "div" that holds the list items and the canvas for the tag cloud.

An other question: Can the off set between an element and its inner html code be controlled?

You can set inline css for padding, margins, etc in the innerHTML

Found another reason, why using a rectangle/div for the innerHTML: Objects in Hyper cover each other. The tag cloud can easily get covered by other objects, especially during animation… ;o)

Regarding the code in the innerHTML: It is css code, right? I am quite aware of my weakness here: I am missing basics writing code… I have to look into that…
Could you be so kind to provide me with two more lines of code?
How do I load a picture in the center of my tag cloud? I tried both configuring it in the HEADfile and writing code in the inner HTML, but without luck…
And how do I translate : “TagCanvas 1.3 was the first version to support image links - the first image found inside a link will be used instead of any text”… into the right code?
I have to configure the HEADhtml to show images in the tag cloud.
And then? I reckon I have to include them in the Hype resources, right?
And then configure them in my innerHTML…?

I’m not clear on what you are asking :confused:

Hi Greg,
Question 1: How and where do I define a picture to be shown in the centre of my tag cloud?
Question 2: If I want to show pictures instead of text in the tag cloud. What kind of code do I use? I am quite aware of, that I should not overuse your first class support and patience and can’t ask you all the time I need a line of code. Could you be so sweet to point out a reference, where I could find the right kind to code. I need to define pictures for my tags… I reckon, I have to include them via Resources/ +… don’t I? My coding knowledge is not good enough and I am confused, which syntax to use in the innerHTML…

Question 1: Do you mean a back ground picture, or one of the floating elements?
Question 2: Take a look at this thread... (and yes, you need to add them to the resources in Hype)

Hi Greg! I know it’s been a while since this post, but I’ve been messing around with this TagCloud. The thing is, I’m working with longer pieces of text, so I was wondering if you knew of a way to do something similar. Is there a way to set it up to just have the text move up and down depending on the direction of the mouse? I’m thinking like the beginning of Star Wars, but it doesn’t necessarily have to disappear into outer space. I hope you don’t mind me reaching out to you after so long, but you seem to know your stuff here. Looking forward to hearing back.

I looked at the webpage for it and it looks like you can adjust the width and height to accommodate your text, but if you need it to be responsive it may be a hassle.

http://www.goat1000.com/tagcanvas.php

Thanks Greg. Somehow I missed the bit there where you mention the plugin. I’ll start experimenting with that and hopefully it’ll take me in the right direction.

1 Like