{"size": 2015, "ext": "js", "max_stars_repo_path": "examples/cookbook-rn-shared/examples/paint/index.js", "max_stars_repo_name": "kantimam/gl-react", "max_stars_repo_stars_event_min_datetime": "2016-11-30T00:33:40.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-31T08:46:53.000Z", "max_issues_repo_path": "examples/cookbook-rn-shared/examples/paint/index.js", "max_issues_repo_name": "kantimam/gl-react", "max_issues_repo_issues_event_min_datetime": "2016-12-03T10:38:12.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T21:55:21.000Z", "max_forks_repo_path": "examples/cookbook-rn-shared/examples/paint/index.js", "max_forks_repo_name": "kantimam/gl-react", "max_forks_repo_forks_event_min_datetime": "2016-12-02T10:27:08.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-20T16:37:36.000Z"}
{"max_stars_count": 1823, "max_issues_count": 240, "max_forks_count": 171, "avg_line_length": 24.2771084337, "max_line_length": 70, "alphanum_fraction": 0.5612903226}
import React, { Component } from "react";
import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from "../../gl-react-implementation";
import respondToTouchPosition from "../../HOC/respondToTouchPosition";

const shaders = Shaders.create({
  paint: {
    frag: GLSL`
precision highp float;
varying vec2 uv;
uniform bool drawing;
uniform vec4 color;
uniform vec2 center;
uniform float brushRadius;
uniform float ratio;
void main() {
  if (drawing) {
    vec2 d = uv - center;
    if (length(d * vec2(ratio, 1.0)) < brushRadius) {
      gl_FragColor = color;
    }
    else {
      discard;
    }
  }
  else {
    discard;
  }
} `,
  },
});

export default respondToTouchPosition(
  class Example extends Component {
    props: {
      touching: boolean,
      touchPosition: { x: number, y: number },
      width: number,
      height: number,
    };

    state = {
      color: [1, 0, 0, 1],
    };

    componentWillReceiveProps({ touching }) {
      const { touching: prevTouching } = this.props;
      if (!prevTouching && touching) {
        this.setState({
          color: [Math.random(), Math.random(), Math.random(), 1],
        });
      }
    }

    render() {
      const { touching, touchPosition, width, height } = this.props;
      const { color } = this.state;
      const brushRadius = 0.03 + 0.01 * Math.cos(Date.now() / 1000);
      return (
        <Surface
          style={{ width, height }}
          webglContextAttributes={{ preserveDrawingBuffer: true }}
        >
          <Node
            shader={shaders.paint}
            uniforms={{
              center: [touchPosition.x, touchPosition.y],
              drawing: touching,
              brushRadius,
              ratio: width / height,
              color,
            }}
            clear={null}
          />
        </Surface>
      );
      // NB: We also need to explicitely use clear=null
      // to disable the Node to clear the framebuffer,
      // and enable preserveDrawingBuffer webgl options.
    }
  }
);
