canvas-sketch
canvas-engines-comparison
canvas-sketch | canvas-engines-comparison | |
---|---|---|
12 | 10 | |
4,904 | 711 | |
- | 4.0% | |
5.0 | 6.8 | |
3 months ago | 20 days ago | |
JavaScript | JavaScript | |
MIT License | 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.
canvas-sketch
-
Which version of Processing should I learn if I want to plot my images with an Axidraw plotter?
I believe mattdesl/canvas-sketch has some tools to help export a p5 sketch as svg. I haven't used it for that purpose yet but if I was going to try it, this is where I would start.
-
P5.js sketch, save as SVG or PDF
I know people have gotten p5 to run in canvas-sketch and that canvas-sketch has the capability to output svg
-
Islamic Geometric Art (Design #30 from Anadolu Selçuklu Sanatinin Geometrik Dili)
The basics: I generated this plot via a program I wrote. That program was written in Javascript, using the p5.js library for drawing lines and stuff, and canvas-sketch to generate the SVG for plotting. I passed the SVG through vpype to merge & sort the lines, and then connected to the AxiDraw using saxi. Not knowing where you're at, those are a good choice to get started—Javascript is an okay language, and p5.js is really good for just getting stuff appearing on the page. And you can just start with the first 2, and add vpype and saxi later.
- P5.js – A library to make coding accessible for artists, designers, educators
-
learning about flow fields
Yep! Using it wrapped with Matt DesLauriers' canvas-sketch, which I've found really useful for local development, especially exporting.
-
Creative Code Management
With canvas-sketch[1] you hit a keystroke when you see a generation you like, and it runs git commit, captures a print resolution output, and exports it as a file tagged with git hash and optional PRNG seed suffix. This way you can reproduce exactly a generative artwork from years ago, without the hassle of manual git/shell commands, and with any file/image viewer.
[1] - https://github.com/mattdesl/canvas-sketch/blob/master/docs/e...
-
p5js combined with a drawing machine and pencil [video]
Another way to get svgs out of p5js is to use canvas-sketch (https://github.com/mattdesl/canvas-sketch) but i have been having a few other issues with that and haven't integrated it into my workflow yet.
-
Questions about Algorithmically generated pixel art
If you want to get your hands dirty, I'd recommend canvas-sketch by MattDesl. It's a nice all-in-one package for a sort of 'visual REPL'.
-
My favorite part is getting them printed!
Previously, I used canvas-sketch which is also really nice.
-
Genuary Day 8: Marching coils
Made with canvas-sketch (highly recommended - it makes exporting GIFs a piece of cake)
canvas-engines-comparison
-
Show HN: A JavaScript library for data visualization in both SVG and Canvas
Hey there,
If a focus is on performance, would you consider doing a side-by-side with other similar libs?
This benchmark was posted on HN a few years back, for example: https://benchmarks.slaylines.io/ (from https://news.ycombinator.com/item?id=23083730)
Or something like the bunnymarks for Pixi (https://www.goodboydigital.com/pixijs/bunnymark/) and Konva (https://konvajs.org/docs/sandbox/Jumping_Bunnies.html)
----------
In general, your lib reminds me a lot of Konva. I found their examples page to be really helpful in illustrating higher-level usage: https://konvajs.org/docs/sandbox/index.html
Maybe real-world use cases like that could be helpful for yours too? As it is, the readme doesn't make it super clear why it's preferable to any of the other existing libs yet. There are already so many, each with strengths and weaknesses... what sets yours apart?
For example, I don't know why "rendering to both Canvas and SVG" is a selling point in particular. Are there platform-specific reasons (native?) to prefer one over the other, as opposed to whatever a particular lib's implementation might be? Is there a use case where mixing and matching the two might be helpful?
-
What cc technologies are most likely to be applicable to employment?
There's lots of JS canvas libraries around which you can experiment with to find one that suits your preferred working practices. Some of them support TS coding, and embedding in various frameworks eg React. See this GitHub repo which includes links to various libraries.
-
P5.js – A library to make coding accessible for artists, designers, educators
There's links to lots of canvas libraries here: https://github.com/slaylines/canvas-engines-comparison
-
Examples of mobile web use of canvas
You can find links to a bunch of 2D Canvas libraries here: https://github.com/slaylines/canvas-engines-comparison - most of them will be able to meet the requirements you've outlined, though they each have their own approach to doing things (with consequent learning curves).
-
Why does Foundry heat up my Mac so badly?
You can play around with something https://benchmarks.slaylines.io/ to see which libraries perform the best. But in the end, I think we're stuck with poor MacOS performance until either Google invests in the Metal API for Chrome (unlikely), or Apple invests in Safari's WebGL support (more likely, but still not great).
-
Vector.js: an open source JavaScript library for creating interactive graphics
Can I ask where you got your list of JS graphics/canvas libraries to review?
Discovery is the biggest issue facing any JS canvas library developer - and after ten years I still haven't worked out how to crack that problem.
I won't link to my library here (because: this is a Vector.js thread). Instead I'll link to the Slaylines canvas benchmark test site[1] which includes a good range of libraries.
[1] https://benchmarks.slaylines.io/
-
What libraries or engines are you using for 2D WebGL/Canvas animation these days?
Here's a comparison site for some canvas libraries.
-
Custom cursor
For a canvas-based solution, you can look at creating a canvas element behind the box and animating your arm/hand icon to the cursor position using the JS canvas library of your choice.
-
Fast minimal JS rendering library?
According to this benchmark (https://benchmarks.slaylines.io/), Pixi is the fastest, however, I dislike its API since I have to go through the hassle of creating sprites and hierachies and other fluff, it gets in my way since I've already implemented this stuff my own way using a different architecture.
-
Canvas and maybe Easeljs question
The Slaylines website includes a speed comparison demo of various canvas (and SVG) JS libraries performing a simple task. This should give you an overview of the main libraries out there. You can find links to all these libraries in the demo's GitHub repository.
What are some alternatives?
flowfields
iksir-examples
p5.js-svg - SVG runtime for p5.js.
iksir
vpype - The Swiss-Army-knife command-line tool for plotter vector graphics.
noc-book-2023 - Nature of Code with p5.js and Notion workflow / build system. [Moved to: https://github.com/nature-of-code/noc-book-2]
PIXELSYNTH
glicol - Graph-oriented live coding language and music/audio DSP library written in Rust