up

doodles/plottable-pipes/.rustfmt.toml

@@ -0,0 +1,2 @@
+max_width = 80
+tab_spaces = 2

doodles/plottable-pipes/README.md

@@ -0,0 +1,43 @@
+# Plottable Pipes
+
+Plottable Pipes explores industrial human structures that pierce into the mountains.
+
+Each NFT is a recipe to a physical plot (A4), owners can unlock a physical plot directly coming from @greweb's pen plotter.
+
+For those interested in the technical details, this work was created using WebGL + Rust + WASM and is licensed under CC BY-SA 4.0. Additional information and the source code for this piece can be found at this link: https://github.com/gre/gre/tree/master/doodles/plottable-pipes
+
+<!-- 
+plottable, plot, A4, physical, phygital, irl, rust, wasm, pipes, mountains
+
+ooW1XwoAAC46U8yYkKgwoqYDGhXr58ihU1NP15pT5rSFoh1Yyqi
+-->
+
+## Theorical distribution
+
+```
+Inks distribution:
+    Gold Gel, White Gel            : 77.4%
+    White Gel                      : 15.8%
+    Gold Gel, Green Gel, White Gel : 2%
+    Gold Gel, Red Gel, White Gel   : 1.6%
+    Green Gel, White Gel           : 0.8%
+    Blue Gel, Gold Gel, White Gel  : 0.8%
+    Gold Gel, Orange Gel, White Gel : 0.6%
+    Blue Gel, White Gel            : 0.6%
+    Red Gel, White Gel             : 0.4%
+
+Inks count distribution:
+    2                              : 79.2%
+    1                              : 15.8%
+    3                              : 5%
+
+Paper distribution:
+    Black                          : 100%
+
+Pipes distribution:
+    Some                           : 48.2%
+    Many                           : 36%
+    A lot                          : 7%
+    Two                            : 6.2%
+    One                            : 2.6%
+```

doodles/plottable-pipes/constants.js

@@ -0,0 +1,4 @@
+export const height = 297;
+export const width = 210;
+export const pad = 10;
+

doodles/plottable-pipes/entry.js

@@ -0,0 +1,33 @@
+import React, { useMemo } from "react";
+import useDimensions from "react-cool-dimensions";
+import ReactDOM from "react-dom";
+import Main from "./index";
+
+const viewportStyle = {
+  position: "absolute",
+  width: "100vw",
+  height: "100vh",
+  display: "flex",
+  flexDirection: "column",
+};
+
+function setFeatures(features) {
+  $fx.features(features);
+}
+
+function Root() {
+  const { width, height, observe } = useDimensions({});
+
+  return (
+    <div ref={observe} style={viewportStyle}>
+      <Main
+        width={width || window.innerWidth}
+        height={height || window.innerHeight}
+        hash={$fx.hash}
+        setFeatures={setFeatures}
+      />
+    </div>
+  );
+}
+
+ReactDOM.render(<Root />, document.getElementById("main"));