So, I got this idea the other day, just messing around. Wanted to see if I could fill up a screen with shiba inu pictures, like a field of them. Seemed simple enough, right?
First thing, I needed pictures. Lots of ’em. Spent a bit just gathering up a bunch of shibe pics. You know, the cute ones, the goofy ones. Saved them into a folder.
Getting Started
Then I fired up my code editor. Decided to just make a simple web page for this. Nothing fancy. Just HTML, a bit of CSS to make things look okay, and some JavaScript to handle the dogs.
I started by just trying to get one dog picture to show up. Easy. Then, how to get lots of them? I wrote a little loop in JavaScript. Told it to create an image element, stick a random shibe picture in it, and put it on the page. Did that like, 50 times.
First Problems
Okay, so that worked, kinda. But they all just lined up. Didn’t look like a ‘field’ at all. More like a shibe gallery wall. Not what I wanted.
So, next step: make them appear randomly all over the place. Messed around with CSS positioning. Used ‘absolute’ positioning and gave each dog a random ‘top’ and ‘left’ value. That was better. Now they were scattered.
Making it a ‘Field’
But it still felt static. A field should have some life, right? Maybe they could move?
- Tried making them just drift slowly. Wrote some more JavaScript to update their positions every so often.
- That immediately became a mess. Performance dropped like a rock. My browser started chugging. Too many things moving.
- Had to simplify. Instead of constant smooth movement, I made it so they’d just ‘hop’ to a new nearby random spot every few seconds. Much lighter on the system.
Then I thought, what if I could add more shibes? Added a simple button. Click it, boom, more dogs pop onto the field. That was fun for about two minutes until the screen was just a solid wall of shiba.
Keeping it Simple
Realized I didn’t need super complex stuff. The goal was just a chill page full of shibes. Cut back on the movement speed again. Made the ‘add more’ button only add a few at a time.
Also noticed some dogs were overlapping weirdly. Didn’t bother writing complex collision detection. Just tweaked the random positioning logic a bit to spread them out more initially. Good enough.
So now, I’ve got this page. You load it up, and bam, shibes scattered everywhere. They do their little random hops. You can click to add a few more. It’s basically a digital shibe field. Does nothing useful, but it makes me chuckle. Just a simple thing I built ’cause I felt like it.
