[HN Gopher] P5.js - A library to make coding accessible for arti...
___________________________________________________________________
P5.js - A library to make coding accessible for artists, designers,
educators
Author : tony-allan
Score : 175 points
Date : 2022-10-12 12:37 UTC (1 days ago)
(HTM) web link (p5js.org)
(TXT) w3m dump (p5js.org)
| soegaard wrote:
| In case you would like to try Processing using Racket, try out
| Sketching:
|
| https://soegaard.github.io/sketching/
| bdickason wrote:
| As someone who previously found art very inaccessible, I loved
| diving in with p5 and feeling like I finally found a medium (gen
| art) that I can freely create and experiment within.
| whywhywhywhy wrote:
| P5 is amazing, used it a ton in my work to build prototypes and
| creative tooling.
| pkdpic wrote:
| I know what they mean and I love p5 but... Coding *is* accessible
| to artists designers and educators!
|
| The idea that they can't is a false (destructive) narrative.
| Especially given that those three groups in particular have an
| astronomically difficult time establishing a reliable adult
| income in their field.
| bibanez wrote:
| Yes, but having an easy and non-destructive environment to
| connect brain to code is good. We used Processing (predecessor
| to p5js) to learn coding at school, and it's really good for
| drawing programatically
| TheRealPomax wrote:
| Processing is not really the "predecessor", it's still
| maintained and actively being developed. P5.js just exists in
| parallel and was a student-imagining of "what if Processing,
| but designed for the web from the get-go" that caught on and
| got folded into the official Processing offering =)
| rchaud wrote:
| So is pretty much anything regular people struggle to budget
| time and money for, such as exercise.
|
| Learning how to code on your own is an enormous waste of one's
| time, assuming you are an adult and need to use that time to
| support yourself.
|
| I remember my Treehouse HTML/CSS course in 2014. It took me
| months to complete it while working full-time, and the end
| result was a completely static website that looked like it was
| from 1997. It was incredibly discouraging. I stuck with it
| because I had the interest, and later moved on to more fun
| things like interaction design.
|
| Most people however will stop and move on, because it's hard to
| see the bigger picture if you have to learn every building
| block.
| mcphage wrote:
| > Coding _is_ accessible to artists designers and educators
|
| I don't think that "accessible" is the same as "possible". Yes,
| it's possible for artists, designers, and educators to learn
| programming in any environment. But "possible" is boolean--like
| Turing complete. "Accessible" is a more of gradient--are the
| kinds of things that you want to to do easy or hard? Is it a
| good environment for learning and exploration? Etc.
| [deleted]
| michaericalribo wrote:
| I've always thought the "better accessibility" relates to
| getting meaningful outputs from your coding.
|
| There's typically a complex set of arcane incantations
| necessary to get visuals, much less interactive
| ones...Processing really elevates an API for visual/interactive
| applications of coding, so things work out of the box.
| racl101 wrote:
| I've heard people say coding is the "modern day construction
| job". Anyone can do it.
| rchaud wrote:
| Tell that to the junior devs that just paid $10k to attend a
| React bootcamp, and are wondering why they can't find work.
| smrtinsert wrote:
| Is first class Processing java a thing yet? I prefer a Java api.
| I always forget the names of the api since I don't use processing
| that often and I generally prefer the java editing experience.
| throw_m239339 wrote:
| You could always used Processing without the editor, directly
| in your favorite Java IDE. Same with Processing for Android.
| Unfortunately, a lot of Processing libs aren't compatible with
| Android, especially anything related to audio.
| bmitc wrote:
| Processing has been available to Java as a library since the
| beginning.
| jcelerier wrote:
| I've used p5.js to teach classes of entire newcomers to
| programming - people who really disliked maths and anything
| science-related, in a graphics design school. It worked super
| well. My classes online aren't up-to-date and the slide system I
| used kinda stopped working in newer browsers, but if that can be
| useful to anyone feel free to reuse. https://interactive-
| design.jcelerier.name/b3
| beingflo wrote:
| I have recently been looking to try some creative coding /
| generative art. I've found that most libraries focus on
| interactive or animated applications, whereas I would like to
| generate a static image for print. Are there any recommendations
| for this specific use case? E.g. maybe svg-based libraries like
| Paper.js are more appropriate to generate high quality files
| instead of canvas-based ones like P5.js?
| nrjames wrote:
| This is easy to do with p5.js. You create a canvas at whatever
| size you want to print and draw to that canvas. Each frame, you
| take an image of the canvas and show it on screen in the
| browser. Wire up a key to save the full-sized canvas out to a
| PDF or PNG (or whatever) when you're ready to export for print.
| It's done very commonly by generative artists. There are
| several other ways to handle similar issues, too.
| mcphage wrote:
| Another tool for doing this is
| https://github.com/mattdesl/canvas-sketch ... for example,
| check out https://github.com/mattdesl/canvas-
| sketch/blob/master/exampl... from its examples.
|
| What you do is, run the script, and then hit Command-S (at
| least on a mac), and it'll save a screenshot and an SVG into
| your downloads folder. You can then send the SVG to your
| plotter however it is you do that.
|
| It doesn't require p5.js, but does play nicely with it. And you
| can use it with Typescript, too--although that's still rough
| around the edges.
| 0xdada wrote:
| There are libraries (i.e. https://github.com/zenozeng/p5.js-
| svg) that give you a SVG runtime. I find it very useful!
| rikroots wrote:
| There's links to lots of canvas libraries here:
| https://github.com/slaylines/canvas-engines-comparison
| jonas-w wrote:
| Thanks for bringing this up again. This brings back some
| nostalgia, as i've learned much through the Youtube Channel
| "Coding Train" which used this library for literally anything.
| Haven't watched his videos in a while, was definitely one of
| those people that made me fall in love with programming.
| nonethewiser wrote:
| this is how i learned to code
| _micheee wrote:
| I really enjoy watching his videos, if only just for pure
| entertainment.
|
| I never really touched processing or p5js, still I like the way
| Daniel introduces and teaches core programming concepts. Seems
| to be a great guy!
| Crespyl wrote:
| Shiffman's book "The Nature of Code"[0] is another great
| resource for learning programming with Processing/p5js, and
| covers some cool topics like cellular automata, steering
| agents/boids, simple neural networks, drawing fractals, and so
| on.
|
| I had a lot of fun early in my own education following along
| with his guides. Coding Train looks like another great
| resource, thanks for sharing it.
|
| [0] https://natureofcode.com/book/
| woudsma wrote:
| That book really made me fall in love with code. Nowadays I
| do mostly web development but I've spent many hours
| programming in Processing. It's a great learning environment
| with docs and terminology suited to beginners.
|
| I find it so fascinating that simple rules can result in
| complex behaviour and natural-looking patterns. I'm keeping a
| sketchbook with related Processing/WebGL graphics on my
| website[0] if anyone is interested :)
|
| [0] https://tjerkwoudsma.com
| runemadsen wrote:
| The Coding Train just launched a new website with their entire
| archive! https://thecodingtrain.com/
| sC3DX wrote:
| Stumbling upon the coding train a few years ago is the reason
| I'm an engineer today. Shiffman showed me how problem solving
| can be fun! I owe him a lot.
| hackarama wrote:
| I made extensive use of P5.js during my time at University of
| London. We designed a side-scrolling video game in the Intro to
| Programming courses using this library. It was really easy to
| work with and is a great library for those looking to get their
| hands dirty with some JavaScript.
| greggman3 wrote:
| Victor Bret seemed to think p5 (and p5.js) succeeded despite
| being poorly designed for learning.
|
| http://worrydream.com/#!/LearnableProgramming
| ivanjermakov wrote:
| Very nice tool for starters.
|
| It got me into programming ~5 years ago, together with the Coding
| Train[1] YouTube channel
|
| [1]: https://www.youtube.com/c/TheCodingTrain
| drux wrote:
| He also wrote a book which you can buy for 0$ if you want
| https://natureofcode.com/
|
| or read it online for free https://natureofcode.com/book/
| acomjean wrote:
| He's working on version 2.0 of the Nature Of Code which is
| more P5.js based than "processing" based (processing is p5's
| faster, platform native, but non web based sibling.).
|
| I've used p5.js to make my nieces animated birthday notes.
|
| There is a video series on the 2.0 (p5.js):
|
| https://thecodingtrain.com/tracks/the-nature-of-code-2
|
| github repo for version 2 of the books site (which doesn't
| appear to be live yet..) https://github.com/nature-of-
| code/book-website-2nd-edition
|
| Dan Shiffman is pretty great at explaining and introducing
| things. Coding Train videos get kinda advanced, which is
| slightly at odds with the "kid" like graphics.
|
| The processing foundation is the umbrella group for p5.js,
| processing and some other tools (android and python based).
|
| https://processing.org/
| latexr wrote:
| > processing is p5's faster, platform native, but non web
| based sibling.
|
| Platform _independent_ might be clearer. It's Java.
| acomjean wrote:
| lamentably to late to edit..
|
| The Java part of it is pretty well obfuscated/hidden, its
| much easier to install and get running than java for the
| most part.
| tony-allan wrote:
| p5.js has been around for about 8 years.
|
| "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.
|
| Using the metaphor of a sketch, p5.js has a full set of drawing
| functionality. However, you're not limited to your drawing
| canvas. You can think of your whole browser page as your sketch,
| including HTML5 objects for text, input, video, webcam, and
| sound."
| wrycoder wrote:
| _We are a community of, and in solidarity with, people from
| every gender identity and expression, sexual orientation, race,
| ethnicity, language, neuro-type, size, disability, class,
| religion, culture, subculture, political opinion, age, skill
| level, occupation, and background. We acknowledge that not
| everyone has the time, financial means, or capacity to actively
| participate, but we recognize and encourage involvement of all
| kinds. We facilitate and foster access and empowerment. We are
| all learners._
| hackarama wrote:
| During my university courses at University of London, we made a
| side-scrolling video game, a sound visualizer, as well as a MS
| Paint clone using P5. It's definitely accessible for beginning
| JavaScript programmers.
| tough wrote:
| How much would the MS Paint take to the average coder to
| ship?
| Crespyl wrote:
| Depends on how feature complete you want it to be.
|
| Back when I was working in Processing a lot, I could
| probably have whipped up something decent in an easy
| weekend. If I wanted to have more complicated features like
| flood fill, cutting/moving regions etc, I might need an
| extra day to figure it out.
|
| If all you want is a bare minimum scribbling lines in a
| limited palette, that could probably be done in a matter of
| minutes.
| hackarama wrote:
| Surprisingly, if you keep the feature set down, time to
| ship wasn't bad. The project was done in about half a
| semester and that's only working on it here and there. For
| the final project we had to implement three "advanced"
| drawing tools, I think one of the ones I came up with was
| to draw Bezier curves, now that wasn't exactly trivial and
| could definitely add some time to ship.
| tony-allan wrote:
| Previous discussion:
|
| https://news.ycombinator.com/item?id=14749527
| toisanji wrote:
| I love p5js, I recommend it all the time for new programmers
| because it allows you to to program something immediately and to
| see feedback in real time. Here are hundreds of little programs I
| wrote for fun: https://concepts.jtoy.net/
| http://www.jtoy.net/sketches/
| chaosprint wrote:
| For art performance in browsers, you may want to check hydra
| synth:
|
| https://hydra.ojack.xyz/
|
| Here is the live coding performance I did for the Algorave 10th
| birthday online 24h streaming where I used Hydra for visuals:
|
| https://youtu.be/atoTujbQdwI?t=317
| tough wrote:
| This is so cool! thanks for sharing it Olivia
|
| I had found this other cool project of yours from 2007 recently
| when looking into making generative music from generative art
| done with stable diffusion. Great stuff too!
|
| https://github.com/ojack/PIXELSYNTH
|
| https://ojack.xyz/PIXELSYNTH/
| chaosprint wrote:
| Oh I am not Oliva :)
|
| Btw for music you can check my project Glicol as well. It may
| be useful as either an interface or an audio lib.
|
| https://github.com/chaosprint/glicol
| flanbiscuit wrote:
| This is awesome! I just spent way too much time on this. I
| grasp the simple things but to do anything more
| creative/interesting I feel like there's a bit of a
| learning curve. I'm going to keep at it though, just takes
| practice.
| pkdpic wrote:
| I misread that at first as "the live coding performance that I
| did for a 10th (birthday)..." and it made me extremely happy.
|
| Then I actually read it and was still reasonably happy.
| makeitrain wrote:
| I hope one day I'll be cool enough to get into live coding
| audio.
| chaosprint wrote:
| You can start today! Here are some resources:
|
| https://github.com/toplap/awesome-livecoding
| sC3DX wrote:
| This looks fun. We played with a lot of csound and max/msp at
| school but I never made the jump to live coding audio. Now that
| I have more experience under my belt maybes it's time to
| revisit this!
| wturner wrote:
| I wrote a book titled "Javascript for Sound Artists" that
| might interest you.
___________________________________________________________________
(page generated 2022-10-13 23:00 UTC)