return to table of content

Drawing.garden

kibwen
21 replies
17h44m

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.

Waterluvian
5 replies
15h30m

Here’s a microwave I made.

https://microwave.pointless.click/

sinak
1 replies
12h37m

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

Waterluvian
0 replies
5h44m

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

heatmiser
0 replies
15h16m

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

darylteo
0 replies
11h22m

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

anakaine
0 replies
13h36m

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

This is great. What a fun project

cjstewart88
4 replies
16h16m

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

Varriount
1 replies
16h1m

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

cjstewart88
0 replies
15h18m

done, good idea

tmostak
0 replies
14h39m

These are awesome!

WirelessGigabit
0 replies
16h0m

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

techwizrd
3 replies
17h21m

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

lovegrenoble
1 replies
16h49m

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

rideontime
0 replies
16h28m

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.

mensetmanusman
0 replies
14h50m

The Internet, is a series of tubes and gardens.

hcs
3 replies
14h9m

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

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

ashu1461
1 replies
13h28m

Checkout out feat, good work

andai
0 replies
5h55m

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.)

jusgu
0 replies
13h59m

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

vnglst
0 replies
12h1m

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

bcoughlan
0 replies
16h53m

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

idk1
12 replies
10h25m

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.

topnde
4 replies
9h42m

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.

ceuk
1 replies
9h14m

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

haliskerbas
0 replies
3h51m

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.

rambambram
0 replies
8h7m

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?

naavis
0 replies
4h52m

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.

icoder
2 replies
8h27m

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 :)

taopai
0 replies
8h0m

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

http://benmoren.com/

melenaboija
0 replies
1h30m

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

lo_zamoyski
1 replies
2h59m

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.

lawlessone
0 replies
1h38m

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.

plastic3169
0 replies
8h4m

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.

hypertele-Xii
0 replies
6h0m

It's technically a video game.

Why do any of them exist?

SushiHippie
8 replies
18h30m

Any explanation?

fny
6 replies
18h29m

Tap the squiggles.

RobertDeNiro
5 replies
18h24m

How do I win?

ranting-moth
0 replies
17h48m

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

notnaut
0 replies
18h22m

Too late. :(

flockonus
0 replies
18h16m

Set every single cell to ladybug to win.

elwell
0 replies
16h54m

Contentment.

Cyphase
0 replies
15h52m

That choice is left to you.

bebrws
0 replies
18h29m

Just some calming awesomeness?

elwell
5 replies
16h43m

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

xyst
0 replies
12h39m

No. Next step is add blockchain. Then add ChatGPT. Vulture capitalist money flows in. Then sell off when IPO debuts.

pugio
0 replies
15h56m

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

ekianjo
0 replies
16h7m

billion dollar garden

apantel
0 replies
16h19m

Sponsored tones.

LegitShady
0 replies
13h4m

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

bossyTeacher
5 replies
18h27m

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

pugworthy
2 replies
14h7m

Wait, there's sound?

collinvandyck76
1 replies
12h48m

Click on something

Popeyes
0 replies
9h4m

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

teraflop
0 replies
18h7m

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.

Minor49er
0 replies
18h9m

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

oth001
4 replies
18h6m

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

philipodonnell
0 replies
16h14m

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.

mstade
0 replies
10h12m

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

chefandy
0 replies
17h2m

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.

Avicebron
0 replies
17h59m

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

Titan2189
4 replies
16h57m

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

blharr
1 replies
8h46m

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

deskamess
0 replies
6h38m

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.

Titan2189
0 replies
16h54m

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

Loeffelmann
0 replies
6h39m

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

xtiansimon
3 replies
5h22m

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.

omk
2 replies
5h13m

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

visika
1 replies
5h7m

I got a lion!

ogoffart
0 replies
4h51m

Are you sure it was not a hedgehog?

sebtron
3 replies
9h44m

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

pmontra
2 replies
9h16m

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.

reportgunner
1 replies
6h46m

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

pmontra
0 replies
1h13m

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.

nivethan
3 replies
18h25m

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

vineyardmike
0 replies
8h59m

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.

nickloewen
0 replies
16h1m

Cool work, thank you for sharing!

38
0 replies
13h57m
fayazara
3 replies
14h5m

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

austinjp
2 replies
3h10m

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.

123pie123
1 replies
2h43m

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

austinjp
0 replies
2h23m

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.

trzeci
2 replies
10h23m

There is a cool effect, when you populate every field

Olfurm
1 replies
9h53m

You liar ;)

debesyla
0 replies
9h47m

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

peebeebee
2 replies
10h39m

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

thomasfromcdnjs
0 replies
4h24m

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.

kuschkufan
0 replies
10h30m

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

brink
2 replies
18h31m

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

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

mcphage
1 replies
15h10m

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

andai
0 replies
6h1m

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

Waterluvian
2 replies
15h21m

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; }

plonq
1 replies
15h7m
Waterluvian
0 replies
15h3m

Oh cool I had no clue.

canadiantim
1 replies
14h10m

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

fayazara
0 replies
14h7m

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

TomK32
1 replies
8h57m

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.

stronglikedan
0 replies
9m

hold mouse button to erase would be welcome

zoklet-enjoyer
0 replies
17h16m

That was fun. Thanks for sharing

vincnetas
0 replies
11h42m

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

tomger
0 replies
16h15m

Can you make it store my garden?

sujayk_33
0 replies
12h38m

How about keeping one slot always empty?

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

qingcharles
0 replies
16h29m

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

pezo1919
0 replies
13h2m

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

omk
0 replies
4h26m

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;
        }
    }

npunt
0 replies
16h30m

So cute & charming!

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

newman8r
0 replies
14h1m

not bad! reminds me of mario paint.

mensetmanusman
0 replies
14h51m

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

lasteone
0 replies
16h33m

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

jzombie
0 replies
18h4m

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

justinzollars
0 replies
14h3m

I love it.

jayavanth
0 replies
13h21m

sounds like Flume

ilikehurdles
0 replies
4h19m

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.

greentext
0 replies
10h35m

2024 off to a great start

findthebug
0 replies
12h12m

love it!

chefandy
0 replies
17h16m

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.

annrenson
0 replies
12h30m

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.

admtal
0 replies
18h25m

Lovely

RomanPushkin
0 replies
14h17m

Who made the sound design if I can ask?

ChintanGhate
0 replies
18h5m

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