Web – Another JavaScript Program

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:

This is a program that creates nice-looking (at least in my opinion) “webs” using JavaScript and the HTML5 canvas. It creates random “nodes” and then connects them with bézier curves. You can also customize the way the webs look, so that’s pretty cool, I guess.

Introduction

Holding true to my promise to make another post to the blog within a week, I have another fun JavaScript program for you today. In short, it’s a screensaver/graphic/simulation that generates visual “webs.” In this version of the program, the webs are generated algorithmically and don’t actually represent something, but in the future I’d like to have it represent something (the program is loosely based on another one I’m working on that shows a web made of Wikipedia links, where each link is shown as a strand). I’m going to call it “Web,” because it looks like a web (again, very creative). It doesn’t serve any real purpose or solve any problems (other than me being bored), but is just something cool to look at (like this, this, and this. . . actually like most of the things I make). I’ll stop rambling now and explain how it actually works, though.

How it Works

Demo video coming this week soon eventually.

The program creates a set number of “nodes,” or points, that are connected to other nodes. These are dispersed randomly around the screen, and are not visually represented, but serve as points to connect with “connections” (which connect the things that are to be connected). There are also a set number of these, which are randomly given set source and destination nodes. Each connection is a bézier curve with 2 control points, stored in a JavaScript object (along with the node data). The control points are determined by performing a random weighted average on the x and y positions of the source and destination node positions (this is why two nodes with very similar x or y positions will form almost a straight line between the two – hopefully I can fix this in the future). Each connection is also assigned an opacity and width value, used for display purposes (the minimum and maximum values for these can be defined by the user in the control panel). All the lines are drawn on the HTML5 canvas with the “bezierCurveTo()” and “stroke()” functions.

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:

Run Program

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.


Coming Soon[-ish]:

  • 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].
pixabay.com/en/network-social-abstract-3139214

 


Spider web [not happy (unless you’re the spider)].
pixabay.com/en/spider-web-with-water-beads-network-921039


Conclusion

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:

Some Fun with Bookmarklets and the Contenteditable HTML Attribute

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.


Bonus Stuff

If you’re interested in bézier curves, you may want to check out my other post about them:

Bézier Curve Rainbow

Note: I’m no longer adding a link to the code for my projects in these posts.