Note: I’m now doing posts with previews on the home page instead of the full text. If you think a post is going to be interesting, you can click “Read more” (or the post’s title) to read the full post. If you don’t think it’s going to be interesting, then you can still read the post, but you might not like it. I think they’re all pretty interesting, but I may be biased (possibly because I wrote them all). Previous posts that I haven’t written descriptions for (and don’t plan to, at least in the near future) will just display the first few words of the post before the “Read more” link. On future posts, instead of this, you’ll see a description of what the post is actually about, something like this:
How it Works
Demo video coming
this week soon eventually.
To use the program, just open the web page, linked below (and here). It will immediately generate a web with the default settings (5 nodes, 100 connections, 0.1 min opacity, 0.5 max opacity, 0.1 min width, 1.0 max width). To generate a new web, you can refresh the page. To open a control panel with more settings, move your cursor to the left side of the page, and a window will open up from the side (I checked this out on mobile, and it’s a little buggy, but it usually works to just tap once on the left side of the screen. Just keep in mind that the program isn’t designed for mobile devices.). The control panel was made invisible so that if you want to take screenshots of your webs without any clutter in the way, you can. Here you can define how many nodes you want to be generated, how many connections, and the minimum and maximum opacity and width values for the connections. You can also enable “show markers” to see indicators for each node and the bézier control points for the connections (scroll down for more information about this (wow, there are a lot of parentheses in this post)). Refreshing the page will also clear any settings you have changed, so just use the “Generate” button at the bottom of the control panel if you want to regenerate the web without refreshing the page. If you want to try it out for yourself, you can run the program with the link below:
Anyway, here’s (or here’re) some screenshots.
Settings: 5 nodes, 100 connections, 0.1 min opacity, 0.5 max opacity, 0.1 min width, 1.0 max width (Default)
Settings: 10 nodes, 1000 connections, 0.1 min opacity, 0.5 max opacity, 0.1 min width, 0.5 max width
Settings: 8 nodes, 250 connections, 0.25 min opacity, 0.5 max opacity, 0.25 min width, 0.5 max width
Settings: 5 nodes, 100 connections, 0.1 min opacity, 0.5 max opacity, 0.1 min width, 1.0 max width (Default, markers enabled):
Red markers indicate nodes, and blue and green nodes indicate bézier curve control points.
Settings: 5 nodes, 10000 connections, 0.1 min opacity, 0.2 max opacity, 0.1 min width, 0.2 max width (Just for the fun of it)
I finally learned CSS, so I made the controls a little nicer to look at than just plain HTML.
- Animated webs
- Ability to refresh the page without clearing settings
- More bézier curve options
- Import and export settings
- Save & share generated webs
- Embed into web pages
- And more. . .
Random [somewhat] unrelated thought:
It’s either really cool-looking or really terrifying, depending on if you think of it as a graphic representation of the internet or a brain or whatnot, or if you think of it as a web of a spider or similarly vicious and unforgiving creature.
Internet web [happy].
Spider web [not happy (unless you’re the spider)].
Well, thanks for reading. I hope you found this interesting. If you’re in the mood to read more, you can check out last week’s post here:
That’s about it – I don’t really have anything else to say. Next week I’ll be doing a sports-related post (it’s not what you think), so if you’re into that kind of thing you have something to look forward to. Alright, I’m done now. Bye.
If you’re interested in bézier curves, you may want to check out my other post about them:
Note: I’m no longer adding a link to the code for my projects in these posts.