26 comments

  • jwilber 1422 days ago
    Love this (and all of Preet’s work).

    Made a statistics visual awhile back using roughjs[0], seems like the perfect setting with which to add roughnotation :)

    [0] https://www.jwilber.me/permutationtest/

    • mattbk1 1421 days ago
      That's beautiful.
    • throwaway77384 1421 days ago
      You know, it's funny that presumably this explanation of the permutation test is intended for people with very little / no knowledge of statistics.

      And yet, I still don't get it. Like, at all. I feel like I'd make a very bad data scientist ;)

      • sleepychu 1421 days ago
        The first measurement made (between the red and blue groups) shows a difference between the average wool quality of the two groups. Since the members were selected at random, you might conclude that the new shampoo is working because, what are the odds that you just picked all the good alpacas at random? That's what we're checking.

        For several permutations of different groups (each group is a new random slection of alpacas so a mix of blue and red alpacas) take the same measurement (average of group a - average of group b)

        Count the number of times that the difference was as good or better as your original measurement and you will find out the odds that being in your treatment group made a difference. (If random groupings show similar measurements then it means it's more likely that your specific treatment/control group did nothing).

        • throwaway77384 1409 days ago
          And now I get it. That's all the explanation I needed. Thank you :)
    • kyawzazaw 1421 days ago
      I like your work too!
    • onurcel 1421 days ago
      awesome
  • heyhihello 1422 days ago
    Amazing! There are many cool libraries now thanks to author.

    1. Roughjs - rough primitives https://roughjs.com/

    2. roughViz - rough data visualization https://github.com/jwilber/roughViz

    3. Wired-elements - rough wireframes https://github.com/wiredjs/wired-elements

  • antibland 1421 days ago
    Amazing examples. Great library. Coupled with the Intersection Observer API[0], this software could add a lot of value to an instructive app or website. Imagine these beautiful annotations tastefully animating as various elements are observed as the user scrolls.

    [0] https://developer.mozilla.org/en-US/docs/Web/API/Intersectio...

  • grizzles 1422 days ago
    This is cool. Slightly OT but I saw the word animate and I got excited because I'm in the market for some easy to use animation software. Krita & Synfig just aren't doing it for me.

    The best one I ever used was a web app built a decade ago by an iirc ~12 year Korean American kid. It seems to have disappeared off the web but it was just amazing for usability. Anyone remember it / the name of it?

    • antimatter15 1421 days ago
      Was it any of these? http://antimatter15.com/ajaxanimator/wave/ or https://antimatter15.com/ajaxanimator/stick2/stick2.html

      I made it about 10 years ago when I was 12. If it was me, I'm actually Chinese-American. If not, I'd love to meet whoever the /other/ 12 year old writing animation software was.

      • grizzles 1421 days ago
        Sorry I should have said asian. I can't believe that it's still online and that you responded. So happy. Thanks!
    • egfx 1421 days ago
      Hi there. Please check out https://gif.com.ai

      You probably haven’t heard of it because it’s a bit under the radar and not really being promoted to the outside yet.

      • voz_ 1421 days ago
        Woah this site is something else. I'm having a really hard time following. What does it do? What is a token?
        • okamiueru 1421 days ago
          Your comment is so weird to me. Did we check the same page? Are you and alt account that is trying to promote that page?
          • voz_ 1421 days ago
            I am not an alt of whoever that person is. Which page did you check? Why is my comment weird?
            • okamiueru 1420 days ago
              I kinda don't want to put it into words, since speaking ill of anyone's project isn't my thing. But, you're looking at someone pricing basic gif interactions and integration behind a "token"-money system a'la mobile games. It's not adding anything special either, it's literally using the 1996 GIF format with some js stuff. You'll find this and it's like without much trouble, or be able to code it yourself if you really like wrong solutions.

              So tl;dr: It's a tech that's a couple of decades too late, with an egregious pricing method, and throwing in the word "intelligence" for who knows why.

              If someone want's to do this, hey, I don't want to stop them. Go for it. But looking at that, and going "Woah this site is something else." and asking about the tokens? You can probably see how I can think you might have something to do with that page?

              Unless. "Woah this site is something else." as in... this looks like a parody of something, or otherwise a joke, then yeah. It totally does look like something else.

              So, anyways. You did ask. I know it makes me seem like an ass for putting it into words.

              • voz_ 1417 days ago
                Yeah, "Woah this site is something else" -> This is hot garbage, why the eff would you make it?
              • egfx 1420 days ago
                ^ more evidence I'm doing it right
        • egfx 1421 days ago
          in short, it let's you create logic to gif animations. And secondary lets you automate unique gif animations at a large scale. A token is a unit that equates to one token per second to use on your recordings. So if you had 50 tokens, you could create about 50 seconds worth of gif animations depending on the FPS.
      • gedy 1421 days ago
        Haha wow is this a parody?
    • anthonybennis 1421 days ago
      I was in same boat. Looking for easy vector animation tool without subscription. https://www.svgator.com/ was closest I found in terms of ease of use but is subscription based. Open Toons supports what I need but is too complex. Ended up using Google Web Designer and recording HTML playback to video. Still not what I wanted but best I could come up with. Blender is probably the best option now I reckon.
    • chrismorgan 1421 days ago
      After surveying the available options (including both free programs and non-subscription paid ones like Cartoon Animator 4), I’ve just been getting started with OpenToonz. It seems very good so far. It’s by no means simple software—it’s capable of a lot and has the UI complexity to match, so it takes some time investment to learn what it’s capable of; but for my own purposes at least I reckon that investment (which has been maybe ten hours) is worthwhile.
  • benatkin 1422 days ago
    This is really cool, but after looking at your twitter account and ROUGH.JS, so far I've been most impressed by this [0], which only had one retweet since I got to it. I'm a sucker for interesting maps.

    0: https://twitter.com/preetster/status/1250862620103438336

    • shihn 1422 days ago
      Thanks. the idea behind rough was to provide primitives to draw anything. maps and dataviz are definitely one of the main use cases.
  • alixanderwang 1422 days ago
    Being able to add small text between margins would enable the ability for an app/extension to let person A markup an article with their thoughts and emphasis, and share it with person B. That's something I'd personally use.
    • shihn 1422 days ago
      Good idea. I had thought of adding text to annotations but didn’t want to complicate the first draft of this.
      • alixanderwang 1422 days ago
        I just realized you're the creator of RoughJS too. Great job on these awesome extensions!
  • NickBusey 1422 days ago
    This may be one of the best 'product' landing pages I've ever seen. Kudos.
  • GordonS 1422 days ago
    Not sure what I'd use this for, but I love the look of it so much I feel like I need to find an excuse!

    Can I ask what use case you had in mind when creating this?

    • shihn 1422 days ago
      Thanks. Online tutorials, presentations, editing, Direct attention of the reader to something specific.

      I was thinking anything that you'd do such annotations on physical paper.

    • sixQuarks 1422 days ago
      would be awesome as part of a scroll story
  • howmayiannoyyou 1422 days ago
    Should be a Chrome Extension. Would absolutely kill as one.
    • webel0 1422 days ago
      Check out hypothesis [0]. No fun styling but the same functionality.

      [0] https://github.com/hypothesis

    • mohap2 1422 days ago
      how?
      • Jackim 1422 days ago
        I could see it being used for screenshots of text to draw attention to certain points. Tweets, facebook posts, etc.
        • agustif 1422 days ago
          Code-annotated screenshots would be rad, a bit like LogRocket logs a session, but static, so you can receive feedback and immediately act on it.

          Killer features also as GitHub Action/App

          Generate a shareable/anotable link on every branch/pr

          Make annotations back to GitHub issues, so they can be tracked/resolved there, and added back to the annotation UI as such.

          And I could keep going...

      • kkotak 1422 days ago
        For your personal note taker for content based sites like NYTimes. It can store them in localstore or on the cloud.
  • XCSme 1422 days ago
    This is cool. I wonder if this could just be a CSS library instead, where you just add the class "annotate-circle" to an element and it will use pseudo-elements (:before, :after) to draw the lines.
    • tiborsaas 1422 days ago
      With CSS Houdini it's possible.

      To draw these irregular lines / shapes with normal CSS it's really hard, maybe if you inline some SVG.

  • airstrike 1421 days ago
    As someone who lives and breathes in a hand-annotated world every day, this is incredibly helpful. I can't believe it exists for free. Thank you
  • 29athrowaway 1422 days ago
    This could be the blink + marquee of this generation.
    • benatkin 1422 days ago
      People certainly want to add extra oomph to posts. I could picture it being used either instead of or in addition to some of the emoji in a typical emoji-heavy pieces of content like this: https://twitter.com/MetroUK/status/1266078167590219776 (Not on twitter unless twitter implements this, but on the web)
      • 29athrowaway 1422 days ago
        I cannot wait for zalgo and these things are combined with text effects to create the ultimate abomination.
  • onemoresoop 1422 days ago
    This is really cool. I like that it brings a bit of human touch to webpages. How does it work?
  • wes-k 1422 days ago
    Looks wonderful! Anyway to get it to only draw the annotation once? Looks like everything gets two passes which adds to the roughness but also adds a bit of noise and delay to the animation.
    • shihn 1422 days ago
      Yes definitely possible. It just looks more sketchy with two passes. And it should be easy to configure. Perhaps add to the issues with any thoughts? Thanks https://github.com/pshihn/rough-notation/issues
    • cosmotic 1422 days ago
      I agree, the double pass is pretty distracting and frustrating with the delay
  • dpeck 1422 days ago
    That is beautiful and very well done. I might drop this onto my personal homepage today for a nice emphasis underline in the header.

    Bravo!

    • shihn 1422 days ago
      Thanks!
  • ta1234567890 1421 days ago
    Looks really cool. Does anyone know of something like this but that works with the iPad's pencil?

    Would love to have something like a mix between the Notes app and Etherpad, so that I can take notes using the Apple Pencil, then "replay" the writing process, and hopefully be able to post it online as well.

  • thadk 1421 days ago
    This can be used in an ObservableHQ notebook as demonstrated here: https://observablehq.com/@thadk/rough-notation-example
  • chadlavi 1422 days ago
    This is neat but I totally thought it was going to let me doodle on the page myself
    • shihn 1422 days ago
      Ah sorry, should have titled the post better. :/
      • chadlavi 1422 days ago
        That's cool, this is still a neat thing! And I think it could probably be fairly simply hooked up to respond to user input as part of a markup tool.
  • tumblen 1422 days ago
    Love it! Looking forward to using it in future projects!
  • julianeon 1422 days ago
    I'd love to use this, but I don't see an easy way how to using the frameworks I know, React (well) and Svelte (a bit).
  • yarone 1422 days ago
    Displays are really wide today. Most web pages are relatively narrow, content-wise.

    Opportunity to use the empty space for markup.

  • Axsuul 1422 days ago
    This is great!

    Does anyone know if there's a similar library that can do rough notations like this within Sketch?

  • Ptrulli 1422 days ago
    Great job on this! What made you think of this product and how long did it take you to make?
    • shihn 1422 days ago
      I wrote roughjs a couple of years ago and had always thought it would be nice to use it in all the ways people draw hand-drawn shapes. Annotation is one of them. I never got around to implementing it. Since roughjs does most of the heavy lifting, implementing this was not a lot of time. I did it in a day (~4-6 hours). Actually it took longer to make the website for the project and writing the readme :/
  • d33d33 1421 days ago
    really nice - would be great if there would be a tufte-style feature (animated info box next to the highlighted text) or sth. similar
  • m88m 1422 days ago
    nice. going to think on ways to use it!
  • talkinghead 1422 days ago
    a text popover feature would be super useful!
    • shihn 1422 days ago
      Definitely. Please add an issue with what you'd like to see. Thanks.