p5.js
Scrawl-canvas
p5.js | Scrawl-canvas | |
---|---|---|
234 | 38 | |
20,905 | 311 | |
0.7% | - | |
9.9 | 8.5 | |
8 days ago | 4 days ago | |
JavaScript | JavaScript | |
GNU Lesser General Public License v3.0 only | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
p5.js
- P5.js: Online Canvas Programming
- Coming Home From the South Pole
-
Turbo Pascal Turns 40
Processing (P5) had this: you can select any string of text in its IDE anl search for it in the docs, and if it's one of the built-in functions or constants it will open the associated static html page that came installed with the software, so no internet nor server required. And despite being offline you can still navigate the docs too. This feels a lost basic skill in static site generation these days.
It was the only creative coding framework that had complete, offline documentation like that at the time I might add. OpenFrameworks is still mostly autogenerated stubs for example.
IMO it was one of the things that gave Processing an edge in educational contexts over all alternatives. I was pretty sad to see p5.js not fully continue that tradition and require that you go online to read the docs, and that it's not a static website but that text is rendered with javascript when you open it (still complete and with examples though).
https://processing.org/
https://p5js.org/
-
My Google Play Developer account has been terminated
I thought it could be funny to use the javascript version of it https://p5js.org/ in a web page and then wrap it in a Unity app, since Unity was and is the environment I use for making apps.
-
Repetition can make you loopy!: Intro to JavaScript Loops
In this last section, I'll be creating some visual examples to show how helpful loops can be. I'll be using p5js, a JavaScript library with functionality for creative coding. That being said, I'll try to give a condensed version of the functions being utilized in the following examples.
-
G9.js: Automatically Interactive Graphics
I was curious too, took a little bit of digging :)
"the original domain of [P]rocessing was proce55ing.net, so people used to sometimes refer to processing as proce55ing or P5 or p5 for short. they still do sometimes. p5.js is a reference to that."
from https://github.com/processing/p5.js/issues/2443
-
[OC] Monthly Performance of the S&P 500: 94 Years in 1 Video.
Sketch.js - https://p5js.org/
-
Ask HN: How to teach a kid of 15 Linux and programming
> how do I get him learning programming in a fun way?
Processing / P5.js can be pretty fun to learn. You use a real programming language to create art and animations. With little code you can get a circle on the screen, then making it move, then following your mouse, then adding other shapes, then changing colour depending on some event… It’s conductive to experimentation and a way to gradually introduce concepts.
https://processing.org/
https://p5js.org/
https://thecodingtrain.com/
-
[OC] I created a simple, free waveform and genre visualizer for your top ten Spotify songs, a few samples below and link to the tool in the comments!
Then I used p5js to create the 'art' itself, really user friendly coding framework with lots of resources online! If you want to get into coding, that is a really great entry point with Daniel Schiffman's coding train videos on YT!
-
Different texture types
Posted an issue for it that u guys can check out here: https://github.com/processing/p5.js/issues/6166
Scrawl-canvas
-
Figma's Journey to TypeScript
I don't like Typescript because it forces me to think about types and data structures and stuff. Which is a Good Thing because I absolutely have to think about that stuff when working on large codebases with a team of colleagues: without the inline documentation and text editor help TS gives me when working on those codebases I'd be (at least!) 10x slower when refactoring old code or adding new code. And nobody wants to pay a slow developer!
However ... the one place I refuse to use Typescript is in my side project - a JS canvas library. I can justify this because: 1. it's a big codebase, but I know every line of it intimately having spent the last 10 years (re-)writing it; 2. nobody else contributes (and I kinda like it that way); and 3. I keep a close eye on competing canvas libraries and I've watched several of them go through the immense (frustrating!) work of converting their codebases to TS over the past few years and, seriously, I don't need that pain in my not-paid-for life.
Even so, I do maintain a .d.ts file for the library's 'API' (the functions devs would use when building a canvas using my library) because the testing, documentation and autocompletion help it offers is too useful to ignore. It is additional work, but it's just one file[1] and I can live with that.
[1] https://github.com/KaliedaRik/Scrawl-canvas/blob/v8/source/s...
-
Show HN: Dropflow, a CSS layout engine for node or <canvas>
> working with glyphs and iterating them in reverse for RTL is brain-breaking. And line wrapping gets really complicated. It's also the most obscure because nobody has written down everything you need to know in one place
I can confirm this. I've been working on a (much simpler!) text layout engine for my canvas library over the past couple of months and the amount of complexity associated with just stamping some glyphs onto a canvas has left me screaming at my laptop on an almost daily basis. Getting a decent underline was a proud moment!
Question: did you ever find out what algorithm the various browsers are using to calculate how many words can fit on a given line? I'm almost there, except words will occasionally jump between lines when I scale the text. Really annoying!
The PR's still a work in progress, but I've got all the functionality I want in there (shaping lines to fit in non-rectangular containers, styling text, text along a non-straight line, dynamic updates, etc). Just need to test and document it all now ... https://github.com/KaliedaRik/Scrawl-canvas/pull/75
-
Ask HN: What are you working on this year?
I've got myself organised and prepared a List Of Things To Do[1] to make my 2D Javascript library even better than it already is. Given that I've been working on the library for over 10 years now, and have never before set out such a list, I call this Progress!
[1] https://github.com/KaliedaRik/Scrawl-canvas/discussions/cate...
-
Pixelating Live with SVG
'Kay, I don't know if this anywhere close to what the OP wants, but this sort of live browser tab manipulation is possible to do using a mix of a a canvas element and the browser's Screen Capture API[1] (plus my JS canvas library, once I merge and publish the changes into its next release[2]).
This solution[3] shows the modified browser tab in a separate browser tab. I've got no idea whether it's possible to do the same sort of trick in the same tab (but probably not). I also have no idea how secure the Screen Capture API is - I'd get very nervous about doing this sort of thing when looking at my bank's online portal!
[1] https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capt...
[2] https://github.com/KaliedaRik/Scrawl-canvas/pull/57
[3] Youtube video of the effect: https://www.youtube.com/watch?v=hCi6LmKMAo0
- Scrawl-canvas 2D canvas library – proposed roadmap
- Scrawl-canvas - a Javascript library for working with the HTML5 <canvas> element
-
Motion Canvas – Visualize complex ideas programmatically
My canvas library's README[1] has a video embedded in it. FWIW I'm not convinced it adds anything to the library's sales pitch.
[1] https://github.com/KaliedaRik/Scrawl-canvas
-
Egui commit: Implement accessibility APIs via AccessKit
> And I’m just mentioning some of the unfixable problems with this approach
I agree that using a canvas instead of leveraging existing accessibility supplied by HTML/CSS/JS and the DOM is an accessibility nightmare.
However, I disagree that canvas accessibility issues are "unfixable". Difficult? Yes. But not unfixable. In my view, the element works best in partnership with its wider environment (HTML/CSS/JS and the DOM), not as a replacement for it. With that in mind, we can start to tackle the accessibility issues you raise - fonts, links, interactions, etc.[1][2]
I have an ambition to one day become intelligent enough to understand/code in Rust, and I'm really glad to see that people are thinking about accessibility as a fundamental part of UIs being developed in Rust.
[1] - Which is what my JS 2d canvas library tries to do: https://scrawl-v8.rikweb.org.uk/
[2] - My thoughts on accessibility, and how I try to fix them using my library: https://scrawl-v8.rikweb.org.uk/learn/eleventh-lesson/
-
[AskJS] Why do my coworkers not see the value in frameworks?
If, however, your company is set on this course, I very strongly suggest you use a canvas library - if only for the MVP. Here's my canvas library (spam alert!) ... even if you don't use it in your product, the library might help give you some ideas on how to overcome some of the responsive, interactive and accessibility issues you'll be facing.
-
which technology or framework is used to create geometry-draggable canvas like this?
Scrawl-canvas - example and another example (links to code at bottom of each page)
What are some alternatives?
three.js - JavaScript 3D Library.
tsParticles - tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
paper.js - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey
particles-bg - React particles animation background component
fabric.js - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
two.js - A renderer agnostic two-dimensional drawing api for the web.
Mo.js - The motion graphics toolbelt for the web
BabylonJS - Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.
particles.js - A lightweight JavaScript library for creating particles
heatmap.js - 🔥 JavaScript Library for HTML5 canvas based heatmaps
GreenSock-JS - GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web