Word Cloud Generator
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I've been looking for an open Word Cloud generator, but nothing that I've found has what I need, in particular.

It needs to be able to:

  • add lines of text as individually editable objects
    • font made smaller or larger
    • font face changed on a per-object basis
  • the word clouds need to be savable as an image, ideally as a large PNG
  • the more of a word, the larger it'd become in the cloud

I tried these but they don't fit the bill. They're not bad examples though:

Ideally, this would be a simple page, with a text field for adding the words, a small kitchen sink for editing the text objects, that runs in Chrome. I'd be happy with a JSFiddle (or something similar) with a working solution. I'll probably be running this on my computer locally but may upload it to a web server for remote access.

I'd be willing to tip for extras if I think of additions. Please let me know if there's anything you think I should add. Thanks!

Are you looking for a whole website or what exactly?
jduplessis294 3 months ago
A page with a text field to add the words to the cloud, and editable words. Not necessarily a whole site. I'll try to clarify my post more.
sharper 3 months ago
Check out what I have got: https://jsfiddle.net/y4gueorj/12/ I know its not good, but let me know of the most immediate things to change and add. You can drag around the text, and set the font name on the selected text object. Just type in the name (I have included a bunch of fonts), click enter, and deselect the text object.
jduplessis294 3 months ago
This is definitely in the right direction! Right now the only things that are coming to mind are 1) that it might be nice to have multiple objects editable at once (eg you select a few words, but not all of them, and change the fonts simultaneously), 2) as with 1, font-styles; so bold, italic, etc for multiple objects at the same time (whatever is selected). This would speed up the font-changing process a lot. Thanks
sharper 3 months ago
awarded to jduplessis294

Crowdsource coding tasks.

1 Solution


EDIT (but still somewhat in progress):
https://jsfiddle.net/y4gueorj/23/

Added colors, multiple selections for text and setting all at once.

This looks very promising! I'm excited that you chose to use fabric as I am a little bit familiar with it. I am trying to change text, to Helvetica for example, but it doesn't want to change. I tried Lowercase and Uppercase without luck, so far
sharper 3 months ago
Helvetica is not available, but any font from Google Fonts is. Check what fonts are available from the top of the HTML
jduplessis294 3 months ago
Oh duh! Thanks, I'll check it out now Edit: The font changing works great
sharper 3 months ago
Besides the wordles themselves not looking great, what else needs to happen? I will say it right now: The end result will probably never look as good as other wordle sites, but I am trying my best to meet your specifications.
jduplessis294 3 months ago
I'm actually pretty happy with this! I'm going to award the bounty now, sorry for the delay—I was away from my computer. Would you be interested in adding bold, italic, and underline buttons to add the font styles to any of the selected objects for a tip? And did you have any ideas that you think might improve it? I appreciate your help thus far. Thanks.
sharper 3 months ago
Sure, I'll add those styles if I can. I think some things I need to work on for improvement are layout of the text, default colorschemes, background colors
jduplessis294 3 months ago
Okay great. If you wind up adding the styles for whatever objects are selected, if you're interested, we can go from there! Thanks.
sharper 3 months ago
Here's bold, italic, and underline (tell me what you think): https://jsfiddle.net/y4gueorj/35/embedded/result I'm getting into this project myself, so hold on a minute, and I'll try and make the layout look better! :)
jduplessis294 3 months ago
I like it! Thanks. Standing by, I look forward to it :)
sharper 3 months ago
Alas, without lots more time and effort, I think this is the best I can do for layout: https://jsfiddle.net/y4gueorj/38/embedded/result If you are willing to tip, I will continue adding features of your choosing.
jduplessis294 3 months ago
Hey, it looks great for what I'm doing. Again, thanks. This is neat. If you don't mind, I will comment back later if I think of something that I want to add? For now, I'll play with this. :)
sharper 3 months ago
I really appreciate your tip :). And, yes comment at any time, happy to help!
jduplessis294 3 months ago
Hi! A few ideas that I think might round it out: 1) bold is only working for multiple objects, not singular (for me anyway), 2) do you think there’s a way to reduce overlap of words anymore (if there are a lot of words)? 3) I tried adding a bleed area but it only stops objects from being moved beyond the canvas; do you think there’s a way to stop words from being drawn outside that 10px “bleed area”? Let me know if you’d be interested in messing with these things, willing to tip again. :) https://jsfiddle.net/5jm6spyj/4/
sharper 3 months ago
Yeah sure, Ill give it a shot tonight!
jduplessis294 3 months ago
https://jsfiddle.net/5jm6spyj/9/ I added colorschemes, just select and click create again. Please let me know what else you want added!
jduplessis294 3 months ago
That is real cool. I like it!
sharper 3 months ago