
LINK
Want to rub a massively pregnant umbreon's belly? It's like petting a cat — inexplicably therapeutic.
(you can click (or tap if using a touchscreen) and drag on her belly to rub her)
Alright, lots to explain. The first is that this is a simple proof of concept ― I don't know what I might do with this sort of content in the future, but I know I can do it now. It's meant to be minimal enough to show off the idea, though polished enough to still be a little enjoyable.
This is an interactive SVG, which essentially no sites allow users to upload, hence having to host it myself (well, have my boyfriend host it). This is the kind of HTML5 content that was supposed to succeed Flash but pretty much never did. The upside is that it should work in basically any modern web browser, though simple SVG viewers may not display it correctly and certainly won't have any working interactivity. This has been tested/debugged in a few browsers (shoutouts to Blink browsers like Chrome and Edge for making me work around their inability to handle masks on grouped elements or animations on the `rotate` CSS attribute by the way), including mobile ones, so it should work for pretty much everyone.
The way this works is that SVGs are already “HTML-ish enough” XML that browsers can render, so it can be combined with CSS and particularly JavaScript in the same file to make the graphic itself animated and interactive the same way you could a webpage. Add some judicious use of features like the ability to embed fonts in CSS, and you have a whole interactive in a single self-contained file.
The happy coincidence here is that much of my work is practically vector art already, drawn using Bézier curves aside from the soft shading (which might still be possible to reproduce with some substantial effort). That means that I can basically just draw like I normally would, but with attention to how parts are grouped together so that they're animatable later, and you pretty much end up with a normal piece of mine that happens to be fit for turning into an interactive. I'm still not totally convinced by Inkscape (I can't even remember how many bugs I encountered while making this), but I have to admit I've really warmed up to vector art on a conceptual level. Nondestructive, not bound to a specific resolution, lossless, no real distinction between “project files” and the deliverable image, and extensibility into animation and interactivity because of its XML format. I'm half-tempted to almost always work with something more purely vectorial, but sadly, no sites really accept SVGs for uploads.
I should probably avoid going into any deep technical details on how this is scripted, especially since the entire source is already accessible in the file itself (just inspect it with your browser or open it in a text editor; it's quite heavily commented specifically to help people read through it if they want), but I'll say that I'm fairly happy with it on the programming side. The speech bubble turned out exactly as I always imagined it, for one, as a fairly natural take on animating my unique style of writing dialogue. All the code together is just a little over 200 lines of JS, and much of that is an event handling system that I think is fairly elegant and ought to be very reusable if I make something like this again.
Speaking of which, I don't know what future prospects for this kind of work are. I do want to be primarily a “traditional” visual artist, but interactives are something I always valued and imagined making some contribution to myself. Having demonstrated it's possible, my mind's now on whether I could develop some kind of physics for interacting with the big round things, since that adds a whole other dimension of fun. Seeing Vi actually breathe as she sits there already makes the whole thing feel a lot more lively, and seeing her react to what you do means a lot as well, but seeing a little jostling around in response would be even better. We'll see where that goes.
Oh, and I'd like whatever else I make to be a bit more overtly sexualized, of course, but I guess I can live with this one being tame. As rare as that is for Vi, at least.
Want to rub a massively pregnant umbreon's belly? It's like petting a cat — inexplicably therapeutic.
(you can click (or tap if using a touchscreen) and drag on her belly to rub her)
Alright, lots to explain. The first is that this is a simple proof of concept ― I don't know what I might do with this sort of content in the future, but I know I can do it now. It's meant to be minimal enough to show off the idea, though polished enough to still be a little enjoyable.
This is an interactive SVG, which essentially no sites allow users to upload, hence having to host it myself (well, have my boyfriend host it). This is the kind of HTML5 content that was supposed to succeed Flash but pretty much never did. The upside is that it should work in basically any modern web browser, though simple SVG viewers may not display it correctly and certainly won't have any working interactivity. This has been tested/debugged in a few browsers (shoutouts to Blink browsers like Chrome and Edge for making me work around their inability to handle masks on grouped elements or animations on the `rotate` CSS attribute by the way), including mobile ones, so it should work for pretty much everyone.
The way this works is that SVGs are already “HTML-ish enough” XML that browsers can render, so it can be combined with CSS and particularly JavaScript in the same file to make the graphic itself animated and interactive the same way you could a webpage. Add some judicious use of features like the ability to embed fonts in CSS, and you have a whole interactive in a single self-contained file.
The happy coincidence here is that much of my work is practically vector art already, drawn using Bézier curves aside from the soft shading (which might still be possible to reproduce with some substantial effort). That means that I can basically just draw like I normally would, but with attention to how parts are grouped together so that they're animatable later, and you pretty much end up with a normal piece of mine that happens to be fit for turning into an interactive. I'm still not totally convinced by Inkscape (I can't even remember how many bugs I encountered while making this), but I have to admit I've really warmed up to vector art on a conceptual level. Nondestructive, not bound to a specific resolution, lossless, no real distinction between “project files” and the deliverable image, and extensibility into animation and interactivity because of its XML format. I'm half-tempted to almost always work with something more purely vectorial, but sadly, no sites really accept SVGs for uploads.
I should probably avoid going into any deep technical details on how this is scripted, especially since the entire source is already accessible in the file itself (just inspect it with your browser or open it in a text editor; it's quite heavily commented specifically to help people read through it if they want), but I'll say that I'm fairly happy with it on the programming side. The speech bubble turned out exactly as I always imagined it, for one, as a fairly natural take on animating my unique style of writing dialogue. All the code together is just a little over 200 lines of JS, and much of that is an event handling system that I think is fairly elegant and ought to be very reusable if I make something like this again.
Speaking of which, I don't know what future prospects for this kind of work are. I do want to be primarily a “traditional” visual artist, but interactives are something I always valued and imagined making some contribution to myself. Having demonstrated it's possible, my mind's now on whether I could develop some kind of physics for interacting with the big round things, since that adds a whole other dimension of fun. Seeing Vi actually breathe as she sits there already makes the whole thing feel a lot more lively, and seeing her react to what you do means a lot as well, but seeing a little jostling around in response would be even better. We'll see where that goes.
Oh, and I'd like whatever else I make to be a bit more overtly sexualized, of course, but I guess I can live with this one being tame. As rare as that is for Vi, at least.
Category Artwork (Digital) / Pregnancy
Species Pokemon
Size 659 x 659px
File Size 155.9 kB
Thanks! I wasn't sure if people might think the interactivity was so limited as to be a little pointless, so I'm glad to see someone enjoying it.
Of course, now that I know how to make something simple like this, I could be a little more ambitious if I make any more, too.
Of course, now that I know how to make something simple like this, I could be a little more ambitious if I make any more, too.
yw! and yeah I really liked it, it's rare to see interactive art (even more since flash unalived itself *sob*) so I had to give it a try and I'm not disappointed :D
also I know coding can be really difficult so I wish you the best of lucks trying this new concept ;)
also I know coding can be really difficult so I wish you the best of lucks trying this new concept ;)
I'm not quite sure what you mean — this is meant to be a proof of concept, so the things you can do are deliberately quite limited, but I'd likely aim for more if I made more like these. Making large round things soft and deformable would be one thing I'd like to try, for instance.
That having been said, you should already be able to download the interactive by just opening the page and saving it from your browser (via Ctrl+S, or some menu like File > Save Page), or right-clicking on the link and selecting some option like “Save link as…”. Opening the saved file in the browser (dragging it into the browser, Ctrl+O or File > Open File then selecting the file, etc.) should then work just fine.
That having been said, you should already be able to download the interactive by just opening the page and saving it from your browser (via Ctrl+S, or some menu like File > Save Page), or right-clicking on the link and selecting some option like “Save link as…”. Opening the saved file in the browser (dragging it into the browser, Ctrl+O or File > Open File then selecting the file, etc.) should then work just fine.
I think she's had about this temperament at this size a few times. That said, I think of her as usually being sly and seductive until things get sufficiently heated, though I've definitely made her moody from time to time, too. In this case, I kept it calm since there's not much of anything sexual going on, but I'd definitely take it in a different direction if sex, inflation, and the like were involved. Those just seemed too much to try to make work in the very first interactive I made, though.
I admit I'm actually not too sure what kinds of things I might make, but a more “complete” interactive with Vi and her usual range of emotions would probably be somewhere on the list eventually.
Thanks!
I admit I'm actually not too sure what kinds of things I might make, but a more “complete” interactive with Vi and her usual range of emotions would probably be somewhere on the list eventually.
Thanks!
This does remind me of the old interactive animations on DeviantArt. I always liked those flash games however the people that were really good at making them really weren't fans of popping so it would be nice to see that in the future. This is a very good starting point and I'm looking forward to see where this may go.
I do definitely aim to take inspiration from previous Flash work, but ideally with some of my own flavour thrown in. I prefer my work to be more overtly sexual, for instance, and popping is another big one as well. I'll have to work my way up to those things, though.
It's definitely one of the directions I'd like to go from here. Before even that, though, I'd like to enhance the interactivity a bit ― making the large round things actually react to being poked and dragged around a little. Some of Doom's later Flash interactives would be a good example of the kinds of physics I'm thinking on implementing.
I actually have fairly detailed plans of how it should all work, as well as some scenarios in mind to depict to get my bearings on what I'm trying to build up to, but I want to spend a little more time actually drawing again first.
I actually have fairly detailed plans of how it should all work, as well as some scenarios in mind to depict to get my bearings on what I'm trying to build up to, but I want to spend a little more time actually drawing again first.
Comments