DEV Community

loading...
Cover image for Urpflanze: a javascript library for creative coding

Urpflanze: a javascript library for creative coding

genbs profile image Gennaro Updated on ・1 min read

For some time now, I have been feeling the need to use the code not for commercial purposes, but purely for fun.

This is why I am approaching the world of creative coding.

One big difficulty I immediately encountered was the lack of knowledge of linear algebra and trigonometry, and this is the reason why I decided to develop a library that would make the approach easier even for the less experienced user.

Mandalas have always fascinated me, so I started with simple shapes such as lines and polygons, and I worked on how to distribute them on a circumference.

Urpflanze

I focused on managing every single repetition and encapsulating the generated shapes, which allowed me to create new forms starting from the previous and simpler ones.

In addition to circular repetitions, I also added the possibility of creating matrices and some effects during the drawing phase, such as viewing the previous frames or disabling the deletion of the canvas at each frame.

Perfect to create images or animations, it can be used for texture generation, as support to other vector graphics software (thanks to SVGExporter), or to print with Penplotter.

At the moment the roadmap available are:

  • Documentation for other services (e.g. DrawerSVG)
  • a web-based editor already under development (a very old version is at this link https://gifted-booth-1ad22e.netlify.app/)
  • Rendering in WebGL
  • Audio library to create sounds from shapes and vice versa

Let me know what you think about this :)

GitHub logo genbs / urpflanze

A library for developers who want to approach to creative coding, for artists who want to approach to programming or for anyone else who wants to play with math.

A library for developers who want to approach to creative coding, for artists who want to approach to programming or for anyone else who wants to play with math.

Full docs and Examples

Installation

The most immediate way to include Urpflanze in your project is to use an online hosted version.

CDN

Full version

<script src="https://cdn.jsdelivr.net/npm/urpflanze"></script>
Enter fullscreen mode Exit fullscreen mode

Customizable version

<script src="https://cdn.jsdelivr.net/npm/urpflanze[@version]/build/urpflanze[-light][.min].js"></script>
Enter fullscreen mode Exit fullscreen mode

NPM

To install it just run the command:

npm i --save urpflanze
Enter fullscreen mode Exit fullscreen mode

At the end you can include Urpflanze in your code

import * as Urpflanze from 'urpflanze'
const scene = new Urpflanze.Scene()

// or

import { Scene } from 'urpflanze'

const scene = new Scene()
Enter fullscreen mode Exit fullscreen mode

use urpflanze/dist/index-light for light version

Example

Hello Rect!

const scene = new Urpflanze.Scene()
const rect = new Urpflanze
Enter fullscreen mode Exit fullscreen mode

Docs and Examples

Discussion (13)

Collapse
tonyketcham profile image
Tony Ketcham

holy shit is this cool. The save file format is genius, too. I'm super impressed by how many points and line segments you can manipulate at once without any lag - way better than what you get in p5.

Collapse
tonyketcham profile image
Tony Ketcham

also WOAH just noticed that vertex callback in the old web editor - that's really creative

Collapse
genbs profile image
Gennaro Author

I'll tell you a trick: then copy and paste the SVG (text) too, so you can also animate with texts and other shapes.
The vertexCallback is also very useful with a "subdivided" buffer (genbs.github.io/urpflanze/#/en/Ver...).
Have you tried clicking the "Make Shape" button in the layers panel? This is one of the most interesting features in my opinion (encapsulation)
:)

Thread Thread
tonyketcham profile image
Tony Ketcham • Edited

Oh yeah, I've been reading through all the docs since I found this - by far the coolest project I've come across in months tbh. That encapsulated layer system is really neat

I've been building on a generative art editor inspired by a Photoshop/Illustrator kind of workflow using paper.js, but I'm honestly going to switch the engine to this and try to get involved with contributing - especially with the ability to export as SVG for plotting and scaling to whatever canvas you want.

Thread Thread
genbs profile image
Gennaro Author

These days I also publish the editor code, so you can check it out.
For anything do not hesitate to contact me :)

Collapse
genbs profile image
Gennaro Author

it is quite powerful, but some videos are rendered.
Surely if I can write a drawer based on webgl it will be even more powerful

Collapse
tonyketcham profile image
Tony Ketcham

Yeah if you achieve fully mutable, real-time rendering, that would make the whole experience crazy interactive with that shiny new native-app feel.
Lately, I've been reading a lot about people experimenting with compiling OpenGL/WebGL into wasm and seeing some substantial performance boosts over out of the box WebGL. This is a cool example I came across

Thread Thread
genbs profile image
Gennaro Author

It would be really cool to do something like this! Meanwhile, I study better the webgl and how to create a drawer with them. Let's keep up to date!

Collapse
artydev profile image
artydev

Greatissime
Thank you very much

Collapse
genbs profile image
Gennaro Author

Thanks to you for the feedback. Ii hope it will be useful to someone :)

Collapse
antonioru profile image
Antonio Russo

Super nice!

Collapse
genbs profile image
Gennaro Author

❤️❤️❤️❤️

Collapse
ziizium profile image
Habdul Hazeez

This is interesting.

Forem Open with the Forem app