Words rotating around an invisible sphere, triggered by mouse position

Hi folks,
I am on my way to build a webpage about “media”- a rather vague topic. Somehow I run into a webpage build with “wordpress” and “elegant themes”… Part of this webpage (http://www.planetlyrik.de) is the small window on the right hand sight, second from top. It shows a bunch of words, which seem to “float” around an invisible sphere, getting smaller and fading when the words get in the “back of the screen”, before the seem to float back to the “front” of the screen and become bigger, bold and a 100%opacity…

Has anyone an idea, if and how this could be build in Hype3?

Best regards, Tom

If it is the “window” second from the top the on my system at least it does not display correctly in Safari or Chrome so cannot tell what you are seeing?

It's a TagCloud on the next page. You'll need a jQuery plugin for it.

Cheers Greg,
Never heard of those before.

Thanks a lot Greg for the quick response! You are my hero! Like Mark I have never heard of it before, but your link makes my heart jump !!! There is hope ;o)

2 Likes

Hi Greg, sorry for bothering you with this, but you seem to be familiar with this jQuery plugin.

  1. Would you recommend to keep the ga.js (google analytics) implemented?
  2. I reckon I do need the jquery.min.js, don’t I?
  3. The jquerysctiptop.css defines some of the styles, but where do I change f.e. the color of my “items”?

Sorry for all these newbie questions, I just have to get used to the way these jQueries work… Best regards, Tom

  1. Nope, it probably has the authors credentials for google in it.
  2. Yep, and you’ll need the plugin too.
  3. I uploaded a sample, look in the Hype files “Edit Head HTML…”
  4. No bother, I enjoy this stuff :relaxed:

NOTE: It looks like the tagcloud plugin randomizes colors, so you may not want to mess with that. I did not use the jquerysctiptop.css

tagcloud.hype.zip (45.4 KB)

3 Likes

Wow, thanks a lot!
The hypefile made it much easier to understand the basic structure… but, I am still not quite sure, if I have understood it right…

May I try to explain?

  1. In Hype you created a rectangle, which runs a Javascript “tag cloud” on scene load. In fact it could be any other object running that script, but of course, a rectangle represents the “background” best… Am I right?
  2. That Javascript basically calls the function “tagball” in the cloudtag Javascript, which got implemented before in the Hype window “Resources” by pressing the +… It hands over the size of the ball/sphere…
  3. And now I am loosing it a bit: the Head HTML contains the implementation of the plugin and the javascript. My question is: who does what? I guess, the plugin allows the javascript to be used, right?

The cloudTag javascript contains all the actual code for the ball to function. It does all the math calculating: the coordinates for the items on the ball, the interaction between ball and cursor movement and gives possibilities to change the colour of the items … HAH!

tagEle[i].style.color = “rgb(”+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";

I would love to be able to change the colour, so I tried to change that line to

tagEle[i].style.color = “rgb(139,0,0)”; (dark red)

and updated it, but somehow this was not good enough…

Is there any easier way to edit the javascript (asks the spoiled me!)?
I would like to be able to change the colour of all items, the colour when mouse hoovers over and the opacity of the items when “far away”… ?

  1. The Hype rectangle has the div that the tagcloud script needs. That div contains the elements with the tags and the text that gets displayed. It is all in the innerHTML of the Hype rectangle.

  2. You’ve got it

  3. The tag cloud script is the plugin and it requires the jQuery library to run.

There are other plugins that offer more user options, take look at…

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

or google “tag cloud sphere javascript”

Hi Greg, thanks for the quick response and that cool link to
“Goat1000”!
That will be my plugin! I tried to get the non-jQuery to work, but run into some problems:

Could you be so sweet and tell me, what I am doing wrong? I tried to follow the installation guide from goat100, but somehow I do not get it to work… I am sure, it is my limited understanding of Javascript ;o)

Could you have a look at my file and maybe add a line or two, where and how I would configure this plugin? I am not sure, if this is done in the head file or in the function… Maybe it does not matter as long as I define things before I use them…?
And thanks for your passions…tagCanvas from goat1000.hype.zip (81.1 KB)

Hi Tom, I went ahead and did one with the jQuery option.

tag_canvas.hype.zip (67.5 KB)

2 Likes

Thanks for this Greg.

1 Like

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