Drawing.garden | Hacker News Reader

Drawing.garden

drawing.garden

509 pointsnivethan131 comments

Well, this is delightful. Something interesting I've observed here... for most people this is very claming (like me). However for a small percentage of people it seems to induce anxiety because they can't understand why it exists or what it is for.

It’s like art generally. Many people go mad about art. Some performance somewhere that is not immediatly about productivity is like the biggest provocation. Not everything makes sense on that axis. People are beyond simple cost/benefit analysis. All of nature really.

No anxiety, just wondering if, since it is on HN and highly upvoted, I'm missing something. That's what you get if you go to the website first and only then read the comments :)

Curiosity, just look through HTML code and find who create it and why. ;)

http://benmoren.com/

My upvote is simply because is something that I like. In HN I guess because it is programming.

The latter is a weird reaction. Do such people look at a beautiful park and say "How awful! It isn't USEFUL! AHHHHH!!!"

Burn all the landscape paintings, why don't you. And why stop there. Burn all the landscapes!

What an bizarre and narrow mindset.

Maybe the purpose is beauty? Pleasure? Contemplation? Maybe a little fun? It's like this person has some specific end in mind that they happen to care about, and anything that isn't it must be pointless.

>Do such people look at a beautiful park

Some do.

There is a saying . "a man who knows the price of everything and the value of nothing" Oscar Wilde i think.

The sound made my mind bounce off this. I don't know why but I found the audio caused an anxiety response.

(For me, much better on mute)

Interesting, I almost never have sound on so didn't know there was audio.

I am part of the second group. Wouldn't even call it anxiety, but just some sort of "light disgust" feeling. Ok I guess it's cool, but you can't do anything useful with it. You can't even draw something meaningful with it like the domain says.

I did something very useful with it. I removed the bugs, the snakes and the lions. You don't want these things in your vegetable garden, do you?

> You can't even draw something meaningful with it like the domain says.

You can draw a garden, so drawing.garden seems very apt to me.

I totally understand the pseudo-autistic disgust/anger at inaccurate statements. I imagine a lot of us programmers are very sensitive to them in a discipline where small inaccuracies can have big consequences and I myself am easily irked by this type of thing.

However, sometimes the inaccuracy stems from poor communication (or deliberate lying) on behalf of the communicator, but sometimes it comes from gaps in our own understanding or perspective.

Is this just a silly, shallow little thing, or have you fundamentally missed some key point?

I don't have the answer, but I think that's one of the fun parts of engaging with anyone's random creative output like this. There's always a small chance it could teach us something we didn't know before.

E.g. it made me re-evaluate what "drawing" really is. Especially in a digital context.

Is it a question of fidelity? At what point does altering individual elements (whether pixels on a screen or icons in a grid) in order to represent a larger picture become "drawing". i.e. if the pictures were much smaller and closer together would it feel like drawing?

Is it a question of uniformity of media? i.e. would this feel more like drawing if instead of pictures it was just coloured blocks?

I could go on but you get the point

Yep if you have a good therapist they’ll help you learn and recognize to try and ignore that feeling in certain contexts like this! Of course it’s super nuanced person to person.

It's technically a video game.

Why do any of them exist?

Aaah, Ludology! https://en.wikipedia.org/wiki/Game_studies

Took a look under the hood, it's p5js sketch. I use it for introductory programming course.

  p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.

https://p5js.org

Took me a while to fill it all. Nothing exciting happens. If ideas for developing it further are welcome: Make them bees fly to flowers, spiders web their nets, rabbits hunt down carrots etc, sun flowers turning and pointing towards the sun... Shaders to make flowers sway in the wind and why not randomly turn the mouse pointer into a water can? An "ouch" sound effect when you hit a cactus.

hold mouse button to erase would be welcome

The source is http://benmoren.com/ :)

https://github.com/bmoren/drawing-garden

Just to add for anyone looking at that link - this guy seems to be an artist who combines technology and nature and senses. He has a ton of really interesting stuff to click through on this website.

Cool work, thank you for sharing!

How about keeping one slot always empty?

Amazing Project but I expected that something might happen once I complete it...

There is a cool effect, when you populate every field

You liar ;)

Maybe it's what you feel inside, not on the screen! ;-)

It feels good, right?

This is so awesome! I noticed the favicon too changes to the current emoji (nice little detail)

Yes, and I've not seen this before, the HTML uses an SVG with an emoji in it as the favicon:

    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>
      <text y=%22.9em%22 font-size=%2290%22>
        :( HN has remove the emoji
      </text>
    </svg>">

Very neat. Might use that.

I'm just learning JS and P5.play - possibly a daft question why is using SVG useful over say just an emoji/text?

It's interesting (to me) in this specific example because it generates a favicon using SVG + emoji. I wasn't aware that could be done. Favicons can't be simple enoji/text, they have to be an image.

big thanks for the reply

the grid is made up of <p> fields, I thought you just could replace the sqiggly line (background) with an emoji/text using the right font etc instead of svg/emoji

No worries. And yes, but that's not what I'm taking about :) I was interested in the favicon, which is the icon shown in the (desktop) browser tab.

https://en.m.wikipedia.org/wiki/Favicon

That’s what I do on my site! It is (AFAIK) the only way to get platform-specific, dynamic emojis as the favicon.

Do the adjacent tiles affect the likelihood of getting certain creatures? First paint had no creatures, then I started getting ants, rats, doves, spiders, hedgehogs, and now my first bumblebee and rabbit.

A region of clovers seems to increase four-leaves clovers.

Edit - ok I guess not, after looking through the code. Still, getting the lion was pretty amazing.

As relaxing as this experience was, I thought of resolving the itch to write trivial code to control the emojis and creatures with left/right clicks.

    let clickCount = 0;
    document.addEventListener('contextmenu', event => { (clickCount == 0) ? clickCount : clickCount--; event.preventDefault() }, false);
    window.onclick = function (e) {
        return clickCount++;
    }
    function random(i) {
        let emojis = 20;
        let creatures = 14;
        if (i == 1) {
            return (clickCount % (creatures + emojis) < creatures) ? 0.02 : 0.03;
        }
        else if (i == creatures)
        {
            return index = clickCount % (creatures + emojis) ;
        }
        else if (i == emojis)
        {
            return (clickCount % (creatures + emojis)) - creatures;
        }
    }

The audio doesn’t seem to change depending on which area you interact in.

The images will cycle, but also give you a random image which you can’t bring back in one cycle of repeating images. I got spider, ant, hedgehog, ladybug, blue butterfly… but no more than twice.

I guess I started looking for intentional patterns. Then I started trying to make patterns (areas of same image). I had a little spark of ‘joy’ when I got a new image, and disappointment when I cycled it away because I was tapping too quickly.

I toyed with this until I didn’t find any more surprises and got bored. Which I feel is just fine.

I read there’s a lion and a snake. Not enough to make me want to play now, but it’s interesting there might be more patterns I did not discover.

No lion in the code. Snake yes. https://drawing.garden/sketch.js

I got a lion!

Are you sure it was not a hedgehog?

Any guide? I assume that the sounds happen in a sequence, is there a way to control this?

Nope, it's random. The 4 possible notes are a subset of the major pentatonic scale, so they sound reasonably harmonious in pretty much any order.

The sound is a randomly-selected C, D, E, or G note. Emoji are also selected from a random pool of plants and creatures. There is no way to control this which is a part of the point and fun of the project

Wait, there's sound?

Click on something

And then wonder why you can't turn it off.

If you enjoy zen experiences like this, you might also enjoy Proteus.

https://www.youtube.com/watch?v=03X83rAkofU

I wish they ported Proteus to the switch, I’d love to be able to play on that.

I wish they made the VR version they were talking about ten years ago!

If you don’t get any sound, try clicking anywhere on the page. On Safari on macOS I can hover to reveal, but no sound plays until there is a click.

Is this supposed to work on mobile? All I see is a brown background (Firefox on Android).

I'm using your same browser on my phone.

I touch a spot and something appears at random. I touch the same spot again and it's replaced by something random. I don't think there is a way to chose what to place in a given spot or to empty it so I don't see the purpose of the game (is it a game?)

Anyway it's OK as first prototype. Just add a menu to choose plants from and it's done.

On PC the natural emojis are added on hover. When you hover again a different emoji is put in its place.

I gave it a try on desktop. I don't know if it's much better or much worse. Probably it's just an art installation, we take what it is. BTW there was no sound on mobile.

Very cool. Turned my brain off. High pitch is a bit too sharp fir me.

So you'd love this one, silly and pointless, with a strong skew towards little WebGL art toys: https://sharkle.com

I love it. If you want to eliminate the pull down to refresh on iOS, I found this worked well for my projects:

/* Prevent elastic scrolling on ios */ html { overflow: hidden; }

I believe overscroll-behavior is better

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-...

Oh cool I had no clue.

Interesting site! A minor suggestion would be to resize the area when the browser is resized, but cool nevertheless.

I enjoyed it more than I thought I would. Try turning a patch of the garden into the same symbol!

So cute & charming!

Please include user-select: none css so clicks with drags don't cause selection

Who's gonna write an algorithm to turn every single flower into a [plant of choice]?

This worked on firefox

   const event = new Event("mousedown")

   const pArr = Array.from(document.querySelectorAll("p"))

   function switchSymbol(target) {
     target.dispatchEvent(event);
   }

   function switchUntil(target, until) {
     while (target.innerText !== until) {
       switchSymbol(target);
     }
   }

   for (const p of pArr) {
     switchUntil(p, "")
   }

Change the second argument of switchUntil to the emoji you want. HN doesn't allow emojis

Oh, I didn't realize you could click to cycle. Thought you had to move to an adjacent tile and back to cycle

It seems like not all columns are the same. For example I couldn't get an apple in the middle column

Col 15 has an apple for me. As do 14 and 16. I also spent a few minutes trying to get one column to be the same icon. This is a fun little project.

Not useless, but pointless. Gives vibes of adult coloring (books). Thank you.

Little toys like this are the spirit of the web. I'd never go through the rigamarole of downloading and deleting an app to fiddle with this for two minutes, but I sure as heck will click a link.

While we're sharing random toys, https://gashlin.net/tests/graft/

More of a game but also https://gashlin.net/tests/feat/

Really cool how it randomizes after all the colours are blue - did you build in any other hidden features?

Checkout out feat, good work

The concept is funny, but actually playing it is very frustrating. It's a perfect example of a game where the difficulty comes from poor controls. (Though it appears to be intentional in this case.)

Here’s a microwave I made.

https://microwave.pointless.click/

I believe most models have a quickstart function that just starts when you press the start button... if you're so inclined.

Frozen vegetables take a really, really long time to cook. 99:99 in fact.

This is great. What a fun project

This is great, but does the audio not work on iOS?

Is your little switch flipped on the side of your phone?

I got a big chuckle out of this one. Nice work

Here's a bunch of random shit I made: https://cjstewart88.github.io/r/

Might want to put an epilepsy warning next to "ribbon", those patterns were really trippy.

done, good idea

I bake my bacon in the airfryer. Which caused me to lose the guess game!

These are awesome!

Then you would love https://theuselessweb.com/

In a similar vein I once made this: https://lumber-jack.netlify.app/

I agree. This is the kind of thing I'd love to see more of on the web.

Here you are, for random awesomeness: https://sharkle.com

I need a browser extension that redirects any twitter URL to a random page from this site. What a nicer way to procrastinate than doomscrolling.

The Internet, is a series of tubes and gardens.

Does anybody know of an application to more easily map out a garden space?

If you’re not used to using regular design tools, I recommend using a spreadsheet like a low-res bitmap to make a map. It’s as simple or complex as you want it to be, short of making a 3d or writing a real application—- from painting cells with fill colors to scripting.

If you’re looking for something more visual, have a dedicated video card, and don’t mind going down a bit of a rabbit hole, do it unreal engine with the bazillion existing free assets. It’s one of the simpler 3D environments to learn to navigate and you can just drag and drop stuff from the free assets. I don’t know that I’ve seen another complex application that’s embraced the “batteries included” concept any more thoroughly. Of course, you can go as deep as you want, but I’ll bet you could get very pretty version up and running in an afternoon.

A buddy of mine is working on an app for this: https://www.flourish.garden/

I’ve thought about this for a few years. Sq ft gardening would lend itself very well to a grid like this one. I wonder if anyone will find anything.

IRL? I'd recommend paper.js, it has out of box support for pen.js for mapping 2D objects on planar surfaces.

2024 off to a great start

I appreciate that the sound only turns on if you click.

Yeah, even browser don't allow music unless a click event happens first.

Awww, a garden of only rabbits, just like in real life.

I wish it did something when you got 100% completion :D

document.querySelectorAll('p').forEach(p => p.dispatchEvent(new Event('mousedown')))

Or use 'mouseover'. It will show some different emojis now and then.

const pTags = document.querySelectorAll('p'); pTags.forEach((p) => { while (!p.textContent.includes('EMOJI')) { p.dispatchEvent(new MouseEvent('mouseover')); } });

Need to replace EMOJI with what you want

Can't be bothered writing code that could add a delay so it would look like a pokie machine.

Who made the sound design if I can ask?

not bad! reminds me of mario paint.

Can you make it store my garden?

That was fun. Thanks for sharing

I love it.

Lovely

This is cute. Nice job. Good feels. It reminds me of some of the things I made in my interaction design classes in art school.

Any explanation?

Just some calming awesomeness?

Tap the squiggles.

How do I win?

A strange game. The only winning move is not to play.

Set every single cell to ladybug to win.

That choice is left to you.

Too late. :(

Contentment.

sounds like Flume

https://hatch.one/@remixables/digital-fidgets/edit

Another fun toy…this one was made on hatch.one, where you can make cool interactive projects without code.

love it!

What is your plan for monetization? Places an ad in every fourth emoji slot?

This is the perfect follow-on to your joke: https://www.youtube.com/watch?v=vv445S62dgU ("When People Hear You Have A Hobby").

billion dollar garden

through a very complicated trick you're actually sending your clicks to verify that someone else is not a robot, even though they are.