6 ms·

Observable and Creative Coding

157 points by grzm 6y ago

cube2222 6y ago
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 6y ago
  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-fundamentals https://observablehq.com/collection/@observablehq/notebook-f...
cltsang 6y ago
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 https://observablehq.com/@makio135/confined-trees
- emmanueloga_ 6y ago
  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/ https://10print.org/
  - cltsang 6y ago
    Thank you This looks amazing!
peterknaggs 6y ago
The artwork done in this article using math and code is magnificent. Truly impressive!
kgarten 6y ago
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?
- cltsang 6y ago
  On Observable, you have the option to keep notebooks and the data inside private.
- protoduction 6y ago
  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 https://starboard.gg/nb/n3DYopT It supports local or self-hosted editing and viewing [1] and is all open source. [0]: https://starboard.gg https://starboard.gg [1]: https://github.com/gzuidhof/starboard-notebook https://github.com/gzuidhof/starboard-notebook and https://github.com/gzuidhof/starboard-cli https://github.com/gzuidhof/starboard-cli
- tlarkworthy 6y ago
  I have tried solving that problem https://observablehq.com/@tomlarkworthy/secret-manager https://observablehq.com/@tomlarkworthy/secret-manager EDIT: actually you probably want https://observablehq.com/@tmcw/using-observable-with-a-local-server https://observablehq.com/@tmcw/using-observable-with-a-local... which allows you to retreive data from localhost
- pea 6y ago
  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 https://github.com/datapane/datapane [1] https://datapane.com/u/khuyentran1401/reports/interactive-plots-altair-python/ https://datapane.com/u/khuyentran1401/reports/interactive-pl... [2] https://datapane.com/u/kaan/reports/stock-report/ https://datapane.com/u/kaan/reports/stock-report/
rob74 6y ago
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...
jmiskovic 6y ago
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 https://observablehq.com/@makio135/zelda-wfc
liminal 6y ago
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 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 https://github.com/thatcort/git-gallery

157 points by grzm 6y ago

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 6y ago
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-fundamentals https://observablehq.com/collection/@observablehq/notebook-f...

cltsang 6y ago

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 https://observablehq.com/@makio135/confined-trees

emmanueloga_ 6y ago
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/ https://10print.org/
- cltsang 6y ago
  Thank you This looks amazing!

peterknaggs 6y ago

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

kgarten 6y ago

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?

cltsang 6y ago
On Observable, you have the option to keep notebooks and the data inside private.
protoduction 6y ago
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 https://starboard.gg/nb/n3DYopT It supports local or self-hosted editing and viewing [1] and is all open source. [0]: https://starboard.gg https://starboard.gg [1]: https://github.com/gzuidhof/starboard-notebook https://github.com/gzuidhof/starboard-notebook and https://github.com/gzuidhof/starboard-cli https://github.com/gzuidhof/starboard-cli
tlarkworthy 6y ago
I have tried solving that problem https://observablehq.com/@tomlarkworthy/secret-manager https://observablehq.com/@tomlarkworthy/secret-manager EDIT: actually you probably want https://observablehq.com/@tmcw/using-observable-with-a-local-server https://observablehq.com/@tmcw/using-observable-with-a-local... which allows you to retreive data from localhost
pea 6y ago
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 https://github.com/datapane/datapane [1] https://datapane.com/u/khuyentran1401/reports/interactive-plots-altair-python/ https://datapane.com/u/khuyentran1401/reports/interactive-pl... [2] https://datapane.com/u/kaan/reports/stock-report/ https://datapane.com/u/kaan/reports/stock-report/

rob74 6y ago

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...

jmiskovic 6y ago

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 https://observablehq.com/@makio135/zelda-wfc

liminal 6y ago

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 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 https://github.com/thatcort/git-gallery