initial commit

Author: Ryan Nixon Salim

package.json

@@ -3,8 +3,11 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+ "chance": "^1.0.18",
+ "html2canvas": "^1.0.0-rc.1",
  "react": "^16.8.6",
  "react-dom": "^16.8.6",
+ "react-pose": "^4.0.8",
  "react-scripts": "3.0.0"
  },
  "scripts": {

src/App.css

@@ -1,24 +1,140 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { useRef, useState, createRef } from 'react';
+
+import spiderman from './asset/purepng.webp';
+import html2canvas from 'html2canvas';
+import Chance from 'chance';
+import posed from 'react-pose';
+const chance = new Chance();
+
+const canvasCount = 30;
+const imageDataArray = [];
+
+const Dust = posed.canvas({
+ visible: { opacity: 1, transition: '0.5s', filter: `blur(0px)` },
+ hidden: {
+ opacity: 0,
+ y: (props) => props.y,
+ x: (props) => props.x,
+ rotate: (props) => props.rotate,
+ transition: { duration: 2000 },
+ filter: `blur(2px)`,
+ },
+});
+const CanvasContainer = posed.div({
+ hidden: { delayChildren: 200, staggerChildren: 35, filter: `blur(1px)` },
+});
+
+const OriginalElement = posed.img({
+ visible: {
+ opacity: 1,
+ },
+ hidden: {
+ opacity: 0,
+ transition: { duration: 100 },
+ filter: `blur(1px)`,
+ },
+});
+
+function createBlankImageData(imageData) {
+ for (let i = 0; i < canvasCount; i++) {
+ let arr = new Uint8ClampedArray(imageData.data);
+ for (let j = 0; j < arr.length; j++) {
+ arr[j] = 0;
+ }
+ imageDataArray.push(arr);
+ }
+}
+
+function weightedRandomDistrib(peak) {
+ var prob = [],
+ seq = [];
+ for (let i = 0; i < canvasCount; i++) {
+ prob.push(Math.pow(canvasCount - Math.abs(peak - i), 3));
+ seq.push(i);
+ }
+ return chance.weighted(seq, prob);
+}
+
+function handleSnap(imgRef, particleRefs, setState, state) {
+ if (state === 'hidden') {
+ setState('visible');
+ return;
+ }
+ html2canvas(imgRef.current, { scale: 1 }).then((canvas) => {
+ const w = canvas.width;
+ const h = canvas.height;
+ // targetRef.current.appendChild(canvas);
+ const ctx = canvas.getContext('2d');
+ const data = ctx.getImageData(0, 0, w, h);
+ var pixelArr = data.data;
+ createBlankImageData(data);
+
+ for (let i = 0; i <= pixelArr.length; i += 4) {
+ //find the highest probability canvas the pixel should be in
+ let p = Math.floor((i / pixelArr.length) * canvasCount);
+ let a = imageDataArray[weightedRandomDistrib(p)];
+ a[i] = pixelArr[i];
+ a[i + 1] = pixelArr[i + 1];
+ a[i + 2] = pixelArr[i + 2];
+ a[i + 3] = pixelArr[i + 3];
+ }
+
+ particleRefs.current.map((ref, idx) => {
+ const ctx2 = ref.current.getContext('2d');
+ ref.current.width = w;
+ ref.current.height = h;
+ ctx2.putImageData(new ImageData(imageDataArray[idx], w, h), 0, 0);
+ });
+ });
+ setTimeout(() => {
+ setState('hidden');
+ }, 1000);
+}
+
+function generateBlankCanvas(refs, state, srcRef) {
+ const canvases = [];
+ console.log(refs);
+
+ for (let a = 0; a < canvasCount; a++) {
+ const canvasStyle = {
+ position: 'fixed',
+ top: 200,
+ left: 10,
+ };
+
+ canvases.push(
+ <Dust
+ ref={refs.current[a]}
+ key={a}
+ style={canvasStyle}
+ pose={state}
+ x={150}
+ y={-150}
+ rotate={chance.integer({ min: -20, max: 20 })}
+ />
+ );
+ }
+ return canvases;
+}
 
 function App() {
+ const imgRef = useRef();
+ const [state, setState] = useState('visible');
+ const particleRefs = useRef([...Array(canvasCount)].map(() => createRef()));
+
+ const canvases = generateBlankCanvas(particleRefs, state, imgRef);
+
  return (
  <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.js</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
+ <OriginalElement
+ pose={state}
+ src={spiderman}
+ width={'250px'}
+ ref={imgRef}
+ style={{ position: 'fixed', top: 200, left: 10, zIndex: 1 }}
+ />
+ <button onClick={() => handleSnap(imgRef, particleRefs, setState, state)}> Snap</button>
+ <CanvasContainer pose={state}>{canvases}</CanvasContainer>
  </div>
  );
 }

src/App.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import posed from 'react-pose';
+
+const DustCanvas = posed.canvas({
+ visible: { opacity: 1, transition: '0.5s', filter: `blur(0px)` },
+ hidden: {
+ opacity: 0,
+ y: (props) => props.y,
+ x: (props) => props.x,
+ rotate: (props) => props.rotate,
+ transition: { duration: 2000 },
+ filter: `blur(2px)`,
+ },
+});
+
+function Dust(props) {
+ return <DustCanvas {...props} />;
+}
+
+export default Dust;

src/asset/purepng.webp

@@ -0,0 +1,81 @@
+import React, { useRef, useState, createRef } from 'react';
+
+import spiderman from './asset/purepng.webp';
+import html2canvas from 'html2canvas';
+
+import posed from 'react-pose';
+import { weightedRandomDistrib, createBlankImageData, generateBlankCanvas } from '../helper/Util';
+
+const canvasCount = 30;
+let imageDataArray = [];
+
+const CanvasContainer = posed.div({
+ hidden: { delayChildren: 200, staggerChildren: 35, filter: `blur(1px)` },
+});
+
+const OriginalElement = posed.div({
+ visible: {
+ opacity: 1,
+ },
+ hidden: {
+ opacity: 0,
+ transition: { duration: 100 },
+ filter: `blur(1px)`,
+ },
+});
+
+function handleSnap(imgRef, particleRefs, setState, state) {
+ if (state === 'hidden') {
+ setState('visible');
+ return;
+ }
+ html2canvas(imgRef.current, { scale: 1 }).then((canvas) => {
+ const w = canvas.width;
+ const h = canvas.height;
+ // targetRef.current.appendChild(canvas);
+ const ctx = canvas.getContext('2d');
+ const data = ctx.getImageData(0, 0, w, h);
+ var pixelArr = data.data;
+ imageDataArray = createBlankImageData(data);
+
+ for (let i = 0; i <= pixelArr.length; i += 4) {
+ //find the highest probability canvas the pixel should be in
+ let p = Math.floor((i / pixelArr.length) * canvasCount);
+ let a = imageDataArray[weightedRandomDistrib(p, canvasCount)];
+ a[i] = pixelArr[i];
+ a[i + 1] = pixelArr[i + 1];
+ a[i + 2] = pixelArr[i + 2];
+ a[i + 3] = pixelArr[i + 3];
+ }
+
+ particleRefs.current.map((ref, idx) => {
+ const ctx2 = ref.current.getContext('2d');
+ ref.current.width = w;
+ ref.current.height = h;
+ ctx2.putImageData(new ImageData(imageDataArray[idx], w, h), 0, 0);
+ });
+ });
+ setTimeout(() => {
+ setState('hidden');
+ }, 1000);
+}
+
+function InfinityGauntlet(props) {
+ const wrapperRef = useRef();
+ const [state, setState] = useState('visible');
+ const particleRefs = useRef([...Array(canvasCount)].map(() => createRef()));
+ const canvases = generateBlankCanvas(particleRefs, state, canvasCount);
+ if (props.snap) {
+ handleSnap(wrapperRef, particleRefs, setState, state);
+ }
+ return (
+ <div style={{ position: 'relative' }}>
+ <OriginalElement pose={state} src={spiderman} ref={wrapperRef} style={{ position: 'absolute', zIndex: 1 }}>
+ {props.children}
+ </OriginalElement>
+ <CanvasContainer pose={state}>{canvases}</CanvasContainer>
+ </div>
+ );
+}
+
+export default InfinityGauntlet;

src/asset/spiderman.png

@@ -0,0 +1,47 @@
+import React from 'react';
+import Chance from 'chance';
+import Dust from '../components/Dust';
+const chance = new Chance();
+
+export function weightedRandomDistrib(peak, canvasCount) {
+ var prob = [],
+ seq = [];
+ for (let i = 0; i < canvasCount; i++) {
+ prob.push(Math.pow(canvasCount - Math.abs(peak - i), 3));
+ seq.push(i);
+ }
+ return chance.weighted(seq, prob);
+}
+
+export function createBlankImageData(imageData, canvasCount) {
+ const imageDataArray = [];
+ for (let i = 0; i < canvasCount; i++) {
+ let arr = new Uint8ClampedArray(imageData.data);
+ for (let j = 0; j < arr.length; j++) {
+ arr[j] = 0;
+ }
+ imageDataArray.push(arr);
+ }
+ return imageDataArray;
+}
+
+export function generateBlankCanvas(refs, state, canvasCount) {
+ const canvases = [];
+ for (let a = 0; a < canvasCount; a++) {
+ const canvasStyle = {
+ position: 'abtolute',
+ };
+
+ const dustProps = {
+ ref: refs.current[a],
+ key: a,
+ style: canvasStyle,
+ pose: state,
+ x: 75,
+ y: -75,
+ rotate: chance.integer({ min: -20, max: 20 }),
+ };
+ canvases.push(<Dust {...dustProps} />);
+ }
+ return canvases;
+}