Observable and Creative Coding

[grzm]

https://observablehq.com/@makio135/creative-coding

[kgarten]

Amazingly cool SVGs. Checked Obeservable and wondering about their pitch. I do quite some data exploration and visualization using jupyter, yet given my data is sensitive (privacy / sovereignty of the users/ study participants), it's impossible to upload them onto a server.

Seems their platform is nice for playing, yet unable to use for professional purposes?

[pea → kgarten]

If you want to share results from your Python analysis (such as visualizations, tables, datasets, files), check out what we're doing at Datapane. It's a Python framework and API for building and sharing reports.

Some people use it to build text-heavy reports which are more like observable notebooks [1], and some folks use it for more grid-like dashboards [2].

We have private support for hosting - or you can just export and self-host your HTML report using our open source library: https://github.com/datapane/datapane

[1] https://datapane.com/u/khuyentran1401/reports/interactive-pl...

[2] https://datapane.com/u/kaan/reports/stock-report/

[protoduction → kgarten]

You can give Starboard Notebook [0] a shot (a tool I'm building). It doesn't have reactivity which is as powerful as Observable - it's closer to normal web programming.

Here's an example notebook that shows p5.js use (with Python interop as a bonus): https://starboard.gg/nb/n3DYopT

It supports local or self-hosted editing and viewing [1] and is all open source.

[0]: https://starboard.gg [1]: https://github.com/gzuidhof/starboard-notebook and https://github.com/gzuidhof/starboard-cli

[tlarkworthy → kgarten]

I have tried solving that problem https://observablehq.com/@tomlarkworthy/secret-manager

EDIT: actually you probably want https://observablehq.com/@tmcw/using-observable-with-a-local... which allows you to retreive data from localhost

[cltsang → kgarten]

On Observable, you have the option to keep notebooks and the data inside private.

[momo_O → kgarten]

What professional purposes are you imagining?

[rob74]

Cool! However the title is a bit misleading, I read "observable" as another adjective to "coding" (same as "creative") - "Creative Coding in Observable" would be clearer...

[cube2222]

I wonder how long it takes from getting started with this (as a software engineer), to being able to create graphics like the svg examples presented here.

Mind-blowing. Especially those printed using a plotter.

[ontouchstart → cube2222]

It is not that hard. The notebooks are all open sourced and you can learn it just like the ways you learned HTML (view source).

As a software engineer, you also have an advantage of having the curiosity to explore and understand how it actually works.

https://observablehq.com/collection/@observablehq/notebook-f...

[cltsang]

I am stunned by the fact that such seemingly complex and beautiful patterns we could see in the nature[0] can be generated with simple and elegant code, when the coder is well-versed in math and data structure.

Gets me thinking: our sophisticated world is created using layers upon layers of derived probabilistic algorithms, and the top layer may well be just one simple algorithm.

[0] https://observablehq.com/@makio135/confined-trees

[emmanueloga_ → cltsang]

You may like this pattern too:

    10 PRINT CHR$(205.5+RND(1)); : GOTO 10

There's a whole book about it!

https://10print.org/

[cltsang → emmanueloga_]

Thank you This looks amazing!

[liminal]

This way of creating SVG with JS template strings is really nice:

  svg`<svg width="${w}" height="${h}">...
  ${array(500).map(i => `<circle 
    transform="translate(${w / 2}, ${h / 2}) rotate(${randInt(360)})"
    cx="0"
    cy="0" 
    r="${50 + i * 3}"
    fill="none"
    stroke="${palette[randInt(1, palette.length)]}"
    stroke-width="${randInt(2, 32)}"
    stroke-dasharray="${array(200).map(() => randInt(800)).join(' ')}"
  />`).join('\n')}
  ...

https://observablehq.com/@makio135/generating-svgs/4

Also, if anyone is doing creative/visual coding on another platform and tracking their work with Git, check out Git Gallery. It integrates with the code revisions to let you visually track changes: https://github.com/thatcort/git-gallery

[jmiskovic]

I didn't know about Observable before. Seems like really powerful platform. Zelda WFC [1] mentioned in article is quite powerful.

[1] https://observablehq.com/@makio135/zelda-wfc

[peterknaggs]

The artwork done in this article using math and code is magnificent. Truly impressive!