[HN Gopher] Drawing.garden
       ___________________________________________________________________
        
       Drawing.garden
        
       Author : nivethan
       Score  : 473 points
       Date   : 2024-01-10 23:32 UTC (23 hours ago)
        
 (HTM) web link (drawing.garden)
 (TXT) w3m dump (drawing.garden)
        
       | brink wrote:
       | If you enjoy zen experiences like this, you might also enjoy
       | Proteus.
       | 
       | https://www.youtube.com/watch?v=03X83rAkofU
        
         | mcphage wrote:
         | I wish they ported Proteus to the switch, I'd love to be able
         | to play on that.
        
           | andai wrote:
           | I wish they made the VR version they were talking about ten
           | years ago!
        
       | SushiHippie wrote:
       | Any explanation?
        
         | fny wrote:
         | Tap the squiggles.
        
           | RobertDeNiro wrote:
           | How do I win?
        
             | notnaut wrote:
             | Too late. :(
        
             | flockonus wrote:
             | Set every single cell to ladybug to win.
        
             | ranting-moth wrote:
             | A strange game. The only winning move is not to play.
        
             | elwell wrote:
             | Contentment.
        
             | Cyphase wrote:
             | That choice is left to you.
        
         | bebrws wrote:
         | Just some calming awesomeness?
        
       | bossyTeacher wrote:
       | Any guide? I assume that the sounds happen in a sequence, is
       | there a way to control this?
        
         | Minor49er wrote:
         | 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
        
         | teraflop wrote:
         | 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.
        
         | pugworthy wrote:
         | Wait, there's sound?
        
           | collinvandyck76 wrote:
           | Click on something
        
             | Popeyes wrote:
             | And then wonder why you can't turn it off.
        
       | nivethan wrote:
       | The source is http://benmoren.com/ :)
        
         | nickloewen wrote:
         | Cool work, thank you for sharing!
        
         | 38 wrote:
         | https://github.com/bmoren/drawing-garden
        
         | vineyardmike wrote:
         | 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.
        
       | admtal wrote:
       | Lovely
        
       | oth001 wrote:
       | Does anybody know of an application to more easily map out a
       | garden space?
        
         | Avicebron wrote:
         | IRL? I'd recommend paper.js, it has out of box support for
         | pen.js for mapping 2D objects on planar surfaces.
        
         | chefandy wrote:
         | 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.
        
         | philipodonnell wrote:
         | 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 wrote:
         | A buddy of mine is working on an app for this:
         | https://www.flourish.garden/
        
       | ChintanGhate wrote:
       | I enjoyed it more than I thought I would. Try turning a patch of
       | the garden into the same symbol!
        
       | jzombie wrote:
       | Interesting site! A minor suggestion would be to resize the area
       | when the browser is resized, but cool nevertheless.
        
       | kibwen wrote:
       | 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.
        
         | techwizrd wrote:
         | I agree. This is the kind of thing I'd love to see more of on
         | the web.
        
           | lovegrenoble wrote:
           | Here you are, for random awesomeness: https://sharkle.com
        
             | rideontime wrote:
             | 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 wrote:
           | The Internet, is a series of tubes and gardens.
        
         | bcoughlan wrote:
         | Then you would love https://theuselessweb.com/
        
         | cjstewart88 wrote:
         | Here's a bunch of random shit I made:
         | https://cjstewart88.github.io/r/
        
           | Varriount wrote:
           | Might want to put an epilepsy warning next to "ribbon", those
           | patterns were really trippy.
        
             | cjstewart88 wrote:
             | done, good idea
        
           | WirelessGigabit wrote:
           | I bake my bacon in the airfryer. Which caused me to lose the
           | guess game!
        
           | tmostak wrote:
           | These are awesome!
        
         | Waterluvian wrote:
         | Here's a microwave I made.
         | 
         | https://microwave.pointless.click/
        
           | heatmiser wrote:
           | I got a big chuckle out of this one. Nice work
        
           | anakaine wrote:
           | Frozen vegetables take a really, really long time to cook.
           | 99:99 in fact.
           | 
           | This is great. What a fun project
        
           | sinak wrote:
           | This is great, but does the audio not work on iOS?
        
             | Waterluvian wrote:
             | Is your little switch flipped on the side of your phone?
        
           | darylteo wrote:
           | I believe most models have a quickstart function that just
           | starts when you press the start button... if you're so
           | inclined.
        
         | hcs wrote:
         | While we're sharing random toys,
         | https://gashlin.net/tests/graft/
         | 
         | More of a game but also https://gashlin.net/tests/feat/
        
           | jusgu wrote:
           | Really cool how it randomizes after all the colours are blue
           | - did you build in any other hidden features?
        
           | ashu1461 wrote:
           | Checkout out feat, good work
        
             | andai wrote:
             | 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.)
        
         | vnglst wrote:
         | In a similar vein I once made this: https://lumber-
         | jack.netlify.app/
        
       | zoklet-enjoyer wrote:
       | That was fun. Thanks for sharing
        
       | chefandy wrote:
       | 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.
        
       | Titan2189 wrote:
       | Who's gonna write an algorithm to turn every single flower into a
       | [plant of choice]?
        
         | Titan2189 wrote:
         | Oh, I didn't realize you could click to cycle. Thought you had
         | to move to an adjacent tile and back to cycle
        
         | blharr wrote:
         | It seems like not all columns are the same. For example I
         | couldn't get an apple in the middle column
        
           | deskamess wrote:
           | 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.
        
         | Loeffelmann wrote:
         | 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
        
       | elwell wrote:
       | What is your plan for monetization? Places an ad in every fourth
       | emoji slot?
        
         | apantel wrote:
         | Sponsored tones.
        
         | ekianjo wrote:
         | billion dollar garden
        
         | pugio wrote:
         | This is the perfect follow-on to your joke:
         | https://www.youtube.com/watch?v=vv445S62dgU ("When People Hear
         | You Have A Hobby").
        
         | LegitShady wrote:
         | through a very complicated trick you're actually sending your
         | clicks to verify that someone else is not a robot, even though
         | they are.
        
         | xyst wrote:
         | No. Next step is add blockchain. Then add ChatGPT. Vulture
         | capitalist money flows in. Then sell off when IPO debuts.
        
       | lasteone wrote:
       | So you'd love this one, silly and pointless, with a strong skew
       | towards little WebGL art toys: https://sharkle.com
        
       | npunt wrote:
       | So cute & charming!
       | 
       | Please include user-select: none css so clicks with drags don't
       | cause selection
        
       | qingcharles wrote:
       | I wish it did something when you got 100% completion :D
        
       | tomger wrote:
       | Can you make it store my garden?
        
       | Waterluvian wrote:
       | 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 wrote:
         | I believe overscroll-behavior is better
         | 
         | https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-...
        
           | Waterluvian wrote:
           | Oh cool I had no clue.
        
       | mensetmanusman wrote:
       | Awww, a garden of only rabbits, just like in real life.
        
       | RomanPushkin wrote:
       | Who made the sound design if I can ask?
        
       | canadiantim wrote:
       | I appreciate that the sound only turns on if you click.
        
         | fayazara wrote:
         | Yeah, even browser don't allow music unless a click event
         | happens first.
        
       | fayazara wrote:
       | This is so awesome! I noticed the favicon too changes to the
       | current emoji (nice little detail)
        
         | austinjp wrote:
         | 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 wrote:
           | I'm just learning JS and P5.play - possibly a daft question
           | why is using SVG useful over say just an emoji/text?
        
             | austinjp wrote:
             | 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.
        
       | justinzollars wrote:
       | I love it.
        
       | newman8r wrote:
       | not bad! reminds me of mario paint.
        
       | jayavanth wrote:
       | sounds like Flume
        
       | pezo1919 wrote:
       | Very cool. Turned my brain off. High pitch is a bit too sharp fir
       | me.
        
       | sujayk_33 wrote:
       | How about keeping one slot always empty?
       | 
       | Amazing Project but I expected that something might happen once I
       | complete it...
        
       | annrenson wrote:
       | 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.
        
       | findthebug wrote:
       | love it!
        
       | vincnetas wrote:
       | 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
        
       | peebeebee wrote:
       | document.querySelectorAll('p').forEach(p => p.dispatchEvent(new
       | Event('mousedown')))
        
         | kuschkufan wrote:
         | Or use 'mouseover'. It will show some different emojis now and
         | then.
        
         | thomasfromcdnjs wrote:
         | 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.
        
       | greentext wrote:
       | 2024 off to a great start
        
       | idk1 wrote:
       | 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 wrote:
         | 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 wrote:
           | 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 wrote:
             | 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 wrote:
           | 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 wrote:
           | > 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 wrote:
         | 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 wrote:
           | Curiosity, just look through HTML code and find who create it
           | and why. ;)
           | 
           | http://benmoren.com/
        
           | melenaboija wrote:
           | My upvote is simply because is something that I like. In HN I
           | guess because it is programming.
        
         | plastic3169 wrote:
         | 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 wrote:
         | It's technically a video game.
         | 
         | Why do any of them exist?
        
         | lo_zamoyski wrote:
         | 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 wrote:
           | >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.
        
       | trzeci wrote:
       | There is a cool effect, when you populate every field
        
         | Olfurm wrote:
         | You liar ;)
        
           | debesyla wrote:
           | Maybe it's what you feel inside, not on the screen! ;-)
        
       | sebtron wrote:
       | Is this supposed to work on mobile? All I see is a brown
       | background (Firefox on Android).
        
         | pmontra wrote:
         | 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 wrote:
           | On PC the natural emojis are added on hover. When you hover
           | again a different emoji is put in its place.
        
             | pmontra wrote:
             | 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.
        
       | TomK32 wrote:
       | 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 wrote:
         | hold mouse button to erase would be welcome
        
       | xtiansimon wrote:
       | 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 wrote:
         | No lion in the code. Snake yes.
         | https://drawing.garden/sketch.js
        
           | visika wrote:
           | I got a lion!
        
             | ogoffart wrote:
             | Are you sure it was not a hedgehog?
        
       | omk wrote:
       | 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;             }
       | }
        
       | ilikehurdles wrote:
       | 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.
        
       | latexr wrote:
       | 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.
        
       ___________________________________________________________________
       (page generated 2024-01-11 23:02 UTC)