Posts Tagged Web Development

Posted on Programming

Gradient Vodka Soda

Gradient vodka soda is vodka soda with a novel twist – each bottle has a different amount of alcohol, allowing you to easily taper off your consumption through the night – which they call modern moderation. Check them out if you’re in the market for that sort of thing (and are of legal drinking age).

I programmed their teaser website, which had a bunch of interesting technical requirements. In this post I will go over a few of the more interesting tests I wrote. Most will work best if you have hardware acceleration enabled.

Rotating cans

The website revolves around a 3d can (see what I did there?). To accomplish this, I used, as I do given whatever excuses I can find, the programming language Haxe. And this time in particular, Heaps.

I got a 3d cylinder rotating, and applied a material to it. (It’s not really a cylinder, I made a model to account for the inset near the top.)

I ended up rendering each can to 2D, and positioning it that way. It made it easier to line everything up and prevented skewing from the camera’s perspective. This allowed the overlays to fit consistently. (The metal of the can, and the shadows on it are overlays.) The actual 3D can is just an ambiently lit label applied to the model.

But I couldn’t find an easy way to switch the labels on it; so I ended up writing a shader to do that. And so it went for so many more things –

But what if it was a shader?

I wrote a bunch of these to accomplish neat graphical effects. Heaps actually makes it pretty easy. Though, in most cases, I ended up moving away from the shader solutions to better support visitors without hardware acceleration enabled.

Ever moving blobs

The client wanted some subtle blobs floating around in the background, so I thought to myself, high on my recent shader successes, why not do it as a shader too?

I made a quick proof-of-concept, and it looked kind of neat, almost like a lava lamp. The blobs ended up getting cut in favour of a background video, which then also got cut.

Different sized dots

I tried dots a few different ways to see what which worked best. First I tested moving a small canvas with the mouse, and that worked fairly well. Unfortunately, requirements shifted so I tested drawing dots over a large canvas.

Performance wasn’t great, so I ended up using a small canvas to draw the dot at the appropriate size (the sizes change as you scroll), and used that as a pattern to fill in the larger, screen-sized, canvas.

That seemed to work fairly well, except that iOS apparently doesn’t send mouse events while scrolling, which interacts poorly when you’re making a scroll-based website.

Scroll-based flash animations

As you get to the bottom of the page, there is a box that the cans slide into. It was meant to close, spin around, and settle onto the ground, as you scrolled down. Unfortunately, we didn’t get the rotating box assets in time, so Sheldon amended the animation concept.

I figured it would be a pain to do in code, and animations are exactly the sort of thing Adobe Animate (formerly Flash) was made for. All I had to do was hack their JS to animation to progress through the timeline on vertical scroll rather than time. I wrote a quick proof of concept (and ran into a bunch of issues with more complicated, nested animations), but overall it worked really well.

So well that it got me wondering if that’s already a thing people do. If not, it seems perfect for this sort of website. Adobe should consider adding as an option to their JS output. Or maybe I should just release a library for it.

As an added bonus, using Adobe Animate let Sheldon prepare the animation himself, which meant less work for me!

There were so many problems

Most to do with different devices and browsers, and the different values between them. It took forever to track down and deal with these, but in most cases we managed to get the numbers to line up.

But one thing that kept cropping up was the matter of hardware acceleration.

I kept it turned off for my tests, but apparently some Macbooks have it enabled by default, but disable it when unplugged. This caused a number of surprises when people tested it, many to do with a feature I had implemented for just this purpose.

Framerate scaledown

All of these things going on could be quite a load on a slower system, at times making it painful to use. No matter what, I wanted the website to be useable – responsive design, but along the dimension of framerate rather than browser width.

To help with this, I implemented a system of framerate scaledown. Basically, the browser would check your framerate, and if it was too low too many times, it progressively disabled features.

I was pretty happy with this system. In a lot of cases it would just turn off interactions (remove the background video, make the dots non-responsive to mouse position, etc.). It worked really well, but in conjunction with the above it lead to some confusion. Sometimes the dots resizing under your mouse would work, and sometimes they wouldn’t (they wouldn’t work if they’d been disabled).

If you want to checkout the website, you can find it at drinkgradient.com

Posted on Programming

Don’t Starve Together – crafting tool, revisited

I haven’t played Klei’s Don’t Starve Together in quite a while, but there was an update recently which got me thinking about my DST crafting tool. With all the new additions, my data’s bound to be out of date. And even if I update it, that doesn’t really solve the problem, only delay it until the next update.

With my Conan Exiles data tool, I pulled the data directly from the game files – which I could access thanks to their modding support efforts.

Don’t Starve Together supports modding. I’ve even made mods for it. Could I do something similar there? Could I retrieve the data directly from the game files?

If I could, that’d sure help solve the issue.

Turns out I could.

Don’t Starve Together stores its data in Lua, XML, and Tex files, packaged into zip archives. So it’s not overly difficult to read the data from those files. It’s slightly more difficult to extract it in a usable format – many of the definitions reference (and arithmetically modify) other definitions.

But now I have a script for that.

So next time there’s an update, I should just be able to run that script to refresh my data. Here’s hoping.

Also, here’s a link to my don’t starve together helper tool.

It should be pretty intuitive, but click on the ? Icon for further usage instructions in any of the sections. There’s some neat stuff in there. I integrated Logipar into it.

The first two tabs (What can I make, and What do I need) should be fairly helpful. I used them a lot in their previous incarnation. The third (Recipes) less so.

I’m not clear on how the Recipes section should work, yet. Or what it should be. So I just threw something quick up, in the hope that it would help toward figuring out where it should go.

 

Posted on Programming

Conan Exiles — supplementary

I’ve been playing a lot of Conan Exiles lately and it’s pretty neat. But I’ve come to realize one of the best parts of a video game is making supplementary tools to aid in its play. Herein chronicles my Conan journey in that regard:

What started as a co-op session quickly descended into madness. In co-op you’re tethered to the hosting player, which can get strange. So we spun the world off into a locally hosted private server. Which proceeded to migrate from location to physical location.

The Conan world progresses as long as the server is running. Nobody has to be in it. Things happen. Possibly terrible things. As a self-described coward, that seemed somewhat less than ideal.

I didn’t want to leave it running at all times, but had no way to stop it (or more importantly) start it, once it was out of my direct control. So I wrote a c# server controller, which is also its own webserver, and exposes a page to control the server. So any of us can turn it on or off, etc. Everything worked fine until a new version of one of the mods was released. Now it updates those (and the game) as well.

Conan server control page

Now to frantically start and stop the server to see if anyone notices.

Everything was going fairly well until I hit level 60, when all of a sudden raising the level cap started to look rather alluring. But there are so many level cap mods. I couldn’t decide which to use. So instead I exacerbated the problem by making my own.  It’s called MoreLevelsPls. Now we have until level 250, scaling at approximately the same rate as prior to 60.

y ≈ ⌊86.4023x3 - 129.8326x2 + 61.0945x - 27.7356⌉

It sure seems to work.

Once you make level 60, new opportunities open up. You can make a slew of armours and weapons previously unavailable. Unfortunately, the information available on them, in game, is rather lacking. And they can be costly (in resources) to make.

Soon we were scouring the internet for information on armour and weapons – but nothing really worked the way we wanted. So I made a quick Conan data tool based on the game’s items list. It doesn’t include DLC, but what it has you can filter and, more importantly, sort.

Feel free to use it, if you like!

Posted on Programming

The Family Wishlist is finally mobile friendly

Ten years ago today (plus or minus two to five years) I made The Family Wishlist. And it’s been good. People have found it helpful.

But The Family Wishlist had a problem, one that I hoped – as all problems do – would go away if I ignored it long enough. Much to my surprise, it got worse. Worse and worse.

Or, if not worse, than at least less forgiveable.

The Family Wishlist, you see, wasn’t mobile friendly. Like, at all. But come on guys, it was 2008. Did smart phones even exist then?
It’s impossible to say. But what I can tell you is they exist now; moreover, people use them. Constantly and for everything.

So, after putting it off for ten years – through the power of procrastination – I finally did it. Or, redid it, as it were. I’ve rewritten it entirely, using my API framework (lull7) for the back-end, and react for the front-.

Also, no more ads. Who wants to see those, right? Especially on a phone, where space is minimal.

So if you and your family need to coordinate gifts this season (or any season), give it a try! I don’t know, maybe you’re running a Secret Santa or some such. It does that too. Also, family isn’t mandatory – orphans are welcome.

thefamilywishlist.com »

Thanks Greg, it truly did need an update.

Oh, also, I switched the email system over to SES so they should now arrive more reliably.

The Family Wishlist, 2018

The Family Wishlist

Posted on Programming

Adding text to google maps markers

If you’ve ever used the Google Maps Javascript API, you’re probably aware that marker labels can only be one letter long. But sometimes you want them to say something meaningful, and often that takes more than a single character.

In case you’re looking for a way to display arbitrary strings in a Google Maps marker, good news, here’s how you can do it!


You can pass a data URL when you’re supplying an image for an marker, which is great. We can send it some SVG which includes our label text.

  1. Import your marker icon into Illustrator, or some other vector graphics software.
  2. Type in some sample text, formatted however you like.
  3. Export it as SVG.
  4. Create a function that replaces the sample text with whatever you want to display, and returns the adjusted SVG
  5. Pass that to the Google Maps API as a data URL.


// Generate a pin!
function createPin(text) {
	var svg = '...'; // Imagine there's SVG here.
	return 'data:image/svg+xml,' + svg.replace('sample-text', text);
}
// Create the map. Position and style it however you like
var map = new google.maps.Map(document.getElementById('maps_marker_text_example'), {
	center: {lat: 49.264691, lng: -123.100},
});
// Create the marker
var marker = new google.maps.Marker({
	map: map,
	icon: createPin('delicious burritos'), // Generate the SVG for this marker
	position: {lat: 49.2630584, lng: -123.0945}
});

Bam! You’re done. You’ve got map markers showing custom text.

One thing to be aware of is the <svg /> tag must include width and height attributes, otherwise weird things will happen. When I exported from Illustrator, my file had a viewBox attribute, but no width and height. So if yours is missing those, add them in.

 

Posted on Programming

Don’t starve together

I’ve been playing Don’t Starve Together lately, and it’s awesome. There’s a constant sense of pressure imposed by the passage of time, days turn to night, a mild Autumn to bleak Winter. It makes any wasted time seem at worst dire, or at best mildly frustrating.

There are so many items you can cobble together, with twigs, bunny-flesh, and the like. At least 144, by my count. But unless you memorize their positions and ingredients, you’re going to waste a lot of time searching through categories for some item you’re sure you’d seen but just can’t seem to find.

I, myself, often kept a wikia tab open on my secondary monitor. But as I’m sure you’re aware, Wikia is slow and prone to annoying ads blaring sound this way and that. And even so, didn’t provide an ideal interface for that sort of thing.

I wanted to type in “charcoal” and immediately see what I could make. Or “crock pot” and see what I needed. Or even “science” to see everything that’s in that category.

And now I can!

The What can I make page is where I spend most of my time. The What do I need page is for those situations where I’m starting a new game, and know I want to create, say, 2 crock pots and 1 bird cage. It’ll tell me everything I need to collect to fulfill my crafting dreams.

If you find anything that doesn’t work, let me know, I haven’t tested it all that much.


I made it just using jquery. Then I remade it using backbone. Then I remade it using webpack, sass and react. Because why not?

This is the backbone version, because the react interface felt strangely clunky.

 

Posted on Programming

The past present and future, all at your command with HTML5

Dear Diary,

With the onset of HTML5 becoming increasingly supported among the many browsers out there, there are going to be a number of important changes coming to the way things work. Things such as… the MathML and SVG support, a large number of new elements and deprecation of some older obsolete ones, and most importantly (for the purposes of this article) an important change to the history API functionality!

Unfortunately, HTML5 isn’t supported in every browser… largely because older versions of browser either can’t support it or just aren’t being updated to support it. People should update their browser anyway… so many unnecessary headaches caused by having to go back and debug some random old version of IE or Firefox because someone is reluctant to update. I will say, props to Chrome for silently updating itself to the latest version and indicating that a core app restart is required with those little coloured arrows!
(more…)