push doodles

adrianleb · Apr 9, 2021 · cb637be · cb637be
1 parent a9f87a9
commit cb637be
Show file tree

Hide file tree

Showing 29 changed files with 440 additions and 0 deletions.
diff --git a/doodles/drawing/acrylic01.png b/doodles/drawing/acrylic01.png
diff --git a/doodles/drawing/acrylic02.png b/doodles/drawing/acrylic02.png
diff --git a/doodles/drawing/acrylic03.png b/doodles/drawing/acrylic03.png
diff --git a/doodles/drawing/acrylic04.png b/doodles/drawing/acrylic04.png
diff --git a/doodles/drawing/acrylic05.png b/doodles/drawing/acrylic05.png
diff --git a/doodles/drawing/block01.png b/doodles/drawing/block01.png
diff --git a/doodles/drawing/block02.png b/doodles/drawing/block02.png
diff --git a/doodles/drawing/cell01.png b/doodles/drawing/cell01.png
diff --git a/doodles/drawing/chalk03.png b/doodles/drawing/chalk03.png
diff --git a/doodles/drawing/hardness025.png b/doodles/drawing/hardness025.png
diff --git a/doodles/drawing/hardness050.png b/doodles/drawing/hardness050.png
diff --git a/doodles/drawing/hardness075.png b/doodles/drawing/hardness075.png
diff --git a/doodles/drawing/hardness100.png b/doodles/drawing/hardness100.png
diff --git a/doodles/drawing/index.html b/doodles/drawing/index.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+    <title>Free Style</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta property="og:image" content="thumbnail.png" />
+</head>
+<body>
+  <div id="root"></div>
+  <script src="./index.js"></script>
+</body>
+</html>
diff --git a/doodles/drawing/index.js b/doodles/drawing/index.js
@@ -0,0 +1,275 @@
+import React, { Component, useState, useRef, useEffect } from "react";
+import ReactDOM from "react-dom";
+import { Shaders, Node, GLSL, LinearCopy, Uniform } from "gl-react";
+import { Surface } from "gl-react-dom";
+import useDimensions from "react-cool-dimensions";
+
+const shaders = Shaders.create({
+  colorize: {
+    frag: GLSL`
+precision highp float;
+varying vec2 uv;
+uniform vec4 color;
+void main() {
+  gl_FragColor = color;
+}
+  `,
+  },
+  paint: {
+    frag: GLSL`
+precision highp float;
+varying vec2 uv;
+uniform sampler2D backbuffer, brush;
+uniform float painting, size, angle;
+uniform vec2 pos;
+uniform float color;
+uniform float ratio;
+
+vec3 palette( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) {
+    return a + b*cos( 6.28318*(c*t+d) );
+}
+
+void main() {
+  // previous pixel color
+  vec4 c = texture2D(backbuffer, uv);
+
+  // reverse the position to lookup in the brush texture
+  vec2 brushP = vec2(ratio, 1.0) * (uv - pos) / size;
+  brushP *= mat2(
+    cos(angle), sin(angle),
+    -sin(angle), cos(angle)
+  );
+  brushP = (brushP + 1.0) / 2.0;
+
+  // how much we want to draw of color
+  float draw =
+    painting *
+    // this part ensure to not draw out of bound
+    step(0.0, brushP.x) *
+    step(0.0, brushP.y) *
+    step(brushP.x, 1.0) *
+    step(brushP.y, 1.0) *
+    // look up the texture (intensity of brush at current pixel)
+    (1.0 - texture2D(brush, brushP).r);
+
+  vec3 clr = palette(color, vec3(0.5), vec3(0.5), vec3(1.0), vec3(0.3, 0.1, 0.9));
+
+  // blend the brush color with the previous color based on draw
+  c.rgb = mix(c.rgb, clr, draw);
+
+  gl_FragColor = c;
+}
+  `,
+  },
+});
+
+const Colorize = ({ color }) => (
+  <Node shader={shaders.colorize} uniforms={{ color }} />
+);
+
+export class Paint extends Component {
+  state = { initiated: false };
+  onDraw = () => {
+    if (!this.state.initiated) {
+      this.setState({ initiated: true });
+    }
+  };
+  shouldComponentUpdate(nextProps) {
+    return nextProps.painting;
+  }
+  render() {
+    const { color, size, pos, painting, angle, brush, ratio } = this.props;
+    const backbuffer = this.state.initiated ? (
+      Uniform.Backbuffer
+    ) : (
+      <Colorize color={[1, 1, 1, 1]} />
+    );
+    return (
+      <Node
+        shader={shaders.paint}
+        onDraw={this.onDraw}
+        backbuffering
+        uniforms={{
+          backbuffer,
+          color,
+          size,
+          pos,
+          brush,
+          angle,
+          painting,
+          ratio,
+        }}
+      />
+    );
+  }
+}
+
+class Main extends Component {
+  render() {
+    const {
+      color,
+      size,
+      drawing,
+      center,
+      brush,
+      drawAngle,
+      ratio,
+    } = this.props;
+
+    // some brush will randomly rotate, other will follow touch move
+    const angle = shouldRandomizeAngle(brush)
+      ? 2 * Math.PI * Math.random()
+      : drawAngle;
+
+    return (
+      <LinearCopy>
+        <Paint
+          color={color}
+          size={size}
+          pos={center}
+          angle={angle}
+          painting={drawing}
+          brush={brush}
+          ratio={ratio}
+        />
+      </LinearCopy>
+    );
+  }
+}
+
+const brushes = [
+  require("./acrylic01.png"),
+  require("./acrylic02.png"),
+  require("./acrylic03.png"),
+  require("./acrylic04.png"),
+  require("./acrylic05.png"),
+  /*
+  require("./block01.png"),
+  require("./block02.png"),
+  require("./cell01.png"),
+  require("./chalk03.png"),
+  require("./hardness025.png"),
+  require("./hardness050.png"),
+  require("./hardness075.png"),
+  require("./hardness100.png"),
+  require("./oils01.png"),
+  require("./pixel.png"),
+  require("./star.png"),
+  require("./texture01.png"),
+  */
+];
+
+const whitelistRandomizeAngle = [
+  require("./acrylic01.png"),
+  require("./acrylic02.png"),
+  require("./acrylic03.png"),
+  require("./acrylic04.png"),
+  require("./acrylic05.png"),
+  require("./cell01.png"),
+  require("./chalk03.png"),
+  require("./oils01.png"),
+  require("./texture01.png"),
+];
+
+function shouldRandomizeAngle(brush) {
+  return whitelistRandomizeAngle.includes(brush);
+}
+
+const Example = () => {
+  const { ref, width, height } = useDimensions({});
+
+  const [drawing, setDrawing] = useState(false);
+  const [color, setColor] = useState(0);
+  const [center, setCenter] = useState([0.5, 0.5]);
+  const [drawAngle, setDrawAngle] = useState(0);
+  const [brush, setBrush] = useState(brushes[0]);
+  const [size, setSize] = useState(0.1);
+
+  const onMouseLeave = () => {
+    setDrawing(false);
+  };
+
+  function syncColor() {
+    setColor((Date.now() / 4000) % 1);
+  }
+
+  function getPosition(e) {
+    const rect = e.target.getBoundingClientRect();
+    let touch = e;
+    if (e.touches) {
+      touch = e.touches[0];
+    }
+    if (!touch) {
+      return [0, 0];
+    }
+    return [
+      (touch.clientX - rect.left) / rect.width,
+      (rect.bottom - touch.clientY) / rect.height,
+    ];
+  }
+
+  const onMouseMove = (e) => {
+    if (drawing) {
+      e.preventDefault();
+      let next = getPosition(e);
+      let x = !center ? 0 : next[0] - center[0];
+      let y = !center ? 0 : next[1] - center[1];
+      let nextAngle = x * x + y * y > 0.00001 ? Math.atan2(y, x) : drawAngle;
+      setCenter(next);
+      setDrawAngle(nextAngle);
+      syncColor();
+    }
+  };
+
+  const onMouseDown = (e) => {
+    setBrush(brushes[Math.floor(Math.random() * brushes.length)]);
+    setDrawing(true);
+    setCenter(getPosition(e));
+    setSize(0.05 + 0.2 * Math.random());
+    syncColor();
+  };
+
+  const onMouseUp = () => {
+    setDrawing(false);
+  };
+
+  const onTouchStart = (e) => onMouseDown(e);
+  const onTouchEnd = (e) => onMouseUp(e);
+  const onTouchCancel = (e) => onMouseUp(e);
+  const onTouchMove = (e) => onMouseMove(e);
+
+  const props = {
+    color,
+    size,
+    drawing,
+    center,
+    brush,
+    drawAngle,
+    ratio: width / height,
+  };
+
+  return (
+    <div ref={ref} style={{ width: "100vw", height: "100vh" }}>
+      {width ? (
+        <Surface
+          width={width}
+          height={height}
+          onMouseLeave={onMouseLeave}
+          onMouseMove={onMouseMove}
+          onMouseDown={onMouseDown}
+          onMouseUp={onMouseUp}
+          onTouchStart={onTouchStart}
+          onTouchEnd={onTouchEnd}
+          onTouchCancel={onTouchCancel}
+          onTouchMove={onTouchMove}
+          style={{ cursor: "crosshair" }}
+          preload={brushes}
+        >
+          <Main key={`${width}_${height}`} {...props} />
+        </Surface>
+      ) : null}
+    </div>
+  );
+};
+
+ReactDOM.render(<Example />, document.getElementById("root"));
diff --git a/doodles/drawing/oils01.png b/doodles/drawing/oils01.png
diff --git a/doodles/drawing/pixel.png b/doodles/drawing/pixel.png
diff --git a/doodles/drawing/star.png b/doodles/drawing/star.png
diff --git a/doodles/drawing/texture01.png b/doodles/drawing/texture01.png
diff --git a/doodles/drawing/thumbnail.png b/doodles/drawing/thumbnail.png
diff --git a/doodles/fragility/README.md b/doodles/fragility/README.md
@@ -0,0 +1,3 @@
+# Fragility
+
+This NFT will self destruct 72 days after its creation, on north hemisphere summer solstice of 2021.
diff --git a/doodles/fragility/index.html b/doodles/fragility/index.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+    <title>Fragility</title>
+    <meta property="og:image" content="thumbnail.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div id="main"></div>
+  <script src="./index.js"></script>
+</body>
+</html>
diff --git a/doodles/fragility/index.js b/doodles/fragility/index.js
@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+
+function dtSecs() {
+  const dt = new Date("2021-06-21") - Date.now();
+  return Math.floor(dt / 1000);
+}
+
+function format(dt) {
+  const days = dt / (24 * 60 * 60);
+  if (days < 0) return;
+  if (days > 1) return Math.floor(days) + " days";
+  const hours = dt / (60 * 60);
+  if (hours > 1) return Math.floor(hours) + " hours";
+  const minutes = dt / 60;
+  if (minutes > 1) return Math.floor(minutes) + " minutes";
+  return dt + " seconds!!!";
+}
+
+const Main = () => {
+  const [dt, setDt] = useState(dtSecs);
+  useEffect(() => {
+    setInterval(() => {
+      setDt(dtSecs());
+    }, 1000);
+  }, [setDt]);
+  const txt = format(dt);
+  const binary = dt.toString(2);
+  return (
+    <>
+      {dt < 0 ? null : <header>{binary}</header>}
+      <div className="main">
+        {!txt ? null : <span>This NFT will self destruct in {txt}</span>}
+      </div>
+      {dt < 0 ? null : <footer>{binary}</footer>}
+    </>
+  );
+};
+
+ReactDOM.render(<Main />, document.getElementById("main"));
diff --git a/doodles/fragility/styles.css b/doodles/fragility/styles.css
@@ -0,0 +1,37 @@
+body {
+  background-color: rgb(7, 37, 49);
+  color: rgb(213, 231, 238);
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  box-sizing: border-box;
+  padding: 8vw;
+  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+    "Lucida Sans", Arial, sans-serif;
+}
+
+.main {
+  font-size: 12vw;
+  text-shadow: 2px 2px 0px black;
+  letter-spacing: -0.02em;
+}
+
+header,
+footer {
+  text-align: center;
+  width: 100vw;
+  position: fixed;
+  left: 0px;
+  font-size: 6.5vw;
+  font-family: "Courier New", Courier, monospace;
+}
+
+header {
+  top: 2vh;
+}
+footer {
+  bottom: 2vh;
+}
diff --git a/doodles/fragility/thumbnail.png b/doodles/fragility/thumbnail.png
diff --git a/doodles/hic-iframe8000.html b/doodles/hic-iframe8000.html
@@ -0,0 +1,11 @@
+<html>
+  <div style="padding: 20px; height: 100vh; box-sizing: border-box">
+    <iframe
+      title="hic et nunc SVG renderer"
+      src="http://localhost:8000/dist?creator=tz1cgQAQfECg5bPASYTMyJ9QJQjSUi8rfL67&viewer=false"
+      sandbox="allow-scripts"
+      scrolling="no"
+      style="width: 100%; height: 100%"
+    ></iframe>
+  </div>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Fragility

		This NFT will self destruct 72 days after its creation, on north hemisphere summer solstice of 2021.