gherciu / react-p5 Goto Github PK

let symbol
export default class P5 extends Component {
    setup = (p5, canvasParentRef) => {
        p5.createCanvas(p5.windowWidth, p5.windowHeight).parent(canvasParentRef);
        symbol = new Symbol(p5, 100, 300)
        symbol.setToRandomSymbol()
    };

    windowResized = p5 => {
        p5.resizeCanvas(p5.windowWidth, p5.windowHeight)
    };

    draw = p5 => {
        symbol.render()
    }

  Symbol = (p5, x, y) => {
        this.x = x
        this.y = y
        this.value = 0
        this.render = function () {
            p5.fill(0, 255, 70)
            p5.text(this.value, this.x, this.y)
        }
    }
    render() {
        return <Sketch setup={this.setup} draw={this.draw}  />
    }
}

const mouseMoved = (p5: p5Types) => {
    p5.erase(255, 0)
    p5.ellipse(p5.mouseX, p5.mouseY, 10)
    p5.noErase()
}

const mouseMoved = (p5: p5Types) => {
    // @ts-ignore
    p5.erase(255, 0)
    p5.ellipse(p5.mouseX, p5.mouseY, 10)
    // @ts-ignore
    p5.noErase()
}

let capture;
export const YourComponent: React.FC<ComponentProps> = (props: ComponentProps) => {
	let x = 50;
	const y = 50;

	//See annotations in JS for more information
	// const setup = (p5: p5Types, canvasParentRef: Element) => {
	// 	p5.createCanvas(500, 500).parent(canvasParentRef);
	// };

	// const draw = (p5: p5Types) => {
	// 	p5.background(0);
	// 	p5.ellipse(x, y, 70, 70);
	// 	x++;
	// };

    let capture: p5Types.Element;
    const setup = (p5: p5Types, canvasParentRef: Element) => {
        p5.createCanvas(390, 240);
        capture = p5.createCapture(VIDEO);
        capture.size(320, 240);
        //capture.hide();
      }
      
      const draw = (p5: p5Types) => {
        p5.background(255);
        p5.image(capture, 0, 0, 320, 240);
        p5.filter(INVERT);
      }

      
	return <Sketch setup={setup} draw={draw} />;
};

Cannot find name 'VIDEO'.

Can't resolve 'react-p5' in '/Users/bomani/Desktop/code/personal/src/pages/experiments'

// 3rd party imports
import React, { useState, useEffect } from 'react';
import Sketch from 'react-p5';
import p5Types from 'p5';

// Styles
import './PreviewSketch.scss';

// Types
interface PreviewSketchProps {
  height?: number;
  width?: number;
  imgString: string;
}

function PreviewSketch({
  height = 200,
  width = 200,
  imgString,
}: PreviewSketchProps) {
  const [mainImage, setMainImage] = useState<any>();

  useEffect(() => {
    p5.loadImage(imgString, (img: any) => {
      setMainImage(img);
    });
  }, [imgString]);

  function setup(p5: p5Types, canvasParentRef: Element) {
    p5.createCanvas(height, width, p5.WEBGL).parent(canvasParentRef);
  }

  function draw(p5: p5Types) {
    p5.background('#FFF');
    if (mainImage) {
      p5.texture(mainImage);
    }
    p5.rotateX(p5.frameCount * 0.01);
    p5.rotateY(p5.frameCount * 0.01);
    p5.fill('red');
    p5.box(20);
  }

  return (
    <div className="preview-sketch">
      <Sketch setup={setup} draw={draw} />
    </div>
  );
}

export default PreviewSketch;

index.js:47 TypeError: Cannot read property 'remove' of undefined
    at t.value (index.js:19)

import React, { Component } from "react"
import Sketch from "react-p5"

let particles_a: any[]
let particles_b: any[]
let particles_c: any[]
let nums = 200
let noiseScale = 800

export default class Processing extends Component {
  x = 50
  y = 50

  setup = ({ p5 }: any, { canvasParentRef }: any) => {
    p5.createCanvas(p5.windowWidth, p5.windowHeight).parent(canvasParentRef) // use parent to render canvas in this ref (without that p5 render this canvas outside your component)
    p5.background(21, 8, 50)
    for (var i = 0; i < nums; i++) {
      particles_a[i] = new Particle(
        p5.random(0, p5.windowWidth),
        p5.random(0, p5.windowHeight),
        p5
      )
      particles_b[i] = new Particle(
        p5.random(0, p5.windowWidth),
        p5.random(0, p5.windowHeight),
        p5
      )
      particles_c[i] = new Particle(
        p5.random(0, p5.windowWidth),
        p5.random(0, p5.windowHeight),
        p5
      )
    }
  }
  draw = ({ p5 }: any) => {
    p5.noStroke()
    p5.smooth()
    for (var i = 0; i < nums; i++) {
      var radius = p5.map(i, 0, nums, 1, 2)
      var alpha = p5.map(i, 0, nums, 0, 250)

      p5.fill(69, 33, 124, alpha)
      particles_a[i].move(p5)
      particles_a[i].display(radius, p5)
      particles_a[i].checkEdge(p5)

      p5.fill(7, 153, 242, alpha)
      particles_b[i].move(p5)
      particles_b[i].display(radius, p5)
      particles_b[i].checkEdge(p5)

      p5.fill(255, 255, 255, alpha)
      particles_c[i].move(p5)
      particles_c[i].display(radius, p5)
      particles_c[i].checkEdge(p5)
    }
  }

  render() {
    return <Sketch setup={this.setup} draw={this.draw} />
  }
}

class Particle {
  dir: any
  vel: any
  pos: any
  speed: any

  constructor(x: number, y: number, p5: any) {
    this.dir = p5.createVector(0, 0)
    this.vel = p5.createVector(0, 0)
    this.pos = p5.createVector(x, y)
    this.speed = 0.4
  }
  move = (p5: any) => {
    var angle =
      p5.noise(this.pos.x / noiseScale, this.pos.y / noiseScale) *
      p5.TWO_PI *
      noiseScale
    this.dir.x = p5.cos(angle)
    this.dir.y = p5.sin(angle)
    this.vel = this.dir.copy()
    this.vel.mult(this.speed)
    this.pos.add(this.vel)
  }

  checkEdge = (p5: any) => {
    if (
      this.pos.x > p5.windowWidth ||
      this.pos.x < 0 ||
      this.pos.y > p5.windowHeight ||
      this.pos.y < 0
    ) {
      this.pos.x = p5.random(50, p5.windowWidth)
      this.pos.y = p5.random(50, p5.windowHeight)
    }
  }

  display = (r: number, p5: any) => {
    p5.ellipse(this.pos.x, this.pos.y, r, r)
  }
}

import React, {useState,useRef} from 'react'
import Sketch from 'react-p5'

const Seperator = () => {
   const sketchContainer = useRef(null)
   let currentPage
   const preload = p5 => {
      p5.loadImage('../resources/test.png', img => {
         currentPage = img
      })
   }
   const setup = (p5, sketchContainer) => {
      p5.createCanvas(500, 500, p5.WEBGL).parent(sketchContainer)
   }
   const draw = p5 => {
      p5.image(currentPage, 0, 0)
   }

   return (
      <div ref={sketchContainer}>
         <Sketch preload={preload} setup={setup} draw={draw} />
      </div>
   )
}
export default Seperator

import React, { Component } from 'react';
import Sketch from "react-p5";
import "react-p5/node_modules/p5/lib/p5";
import 'react-p5/node_modules/p5/lib/addons/p5.sound';

import './App.css';

export default class App extends Component {
    song;
    amp;
    loadedState = false;
  
  setup = p5 => {
      p5.createCanvas(p5.windowWidth, p5.windowHeight);
      p5.angleMode(p5.DEGREES);
      this.song =  p5.loudSound("song.mp3", this.loaded);
      this.amp = new p5.Amplitude();
  }
  
  loaded() {
      this.loadedState = true;
  }
  
  keyPressed() {
      if(this.loadedState)
        this.togglePlaying();
  }
  
  togglePlaying() {
      if (!this.song.isPlaying()) {
          this.song.play();
      } else {
          this.song.pause();
      }
  }
  
  volHistory = [];
  
  draw = p5 => {
      p5.background(0);
  
      let vol = this.amp.getLevel();
      this.volHistory.push(vol);
  
      p5.stroke(255);
      p5.noFill();
  
      p5.translate(p5.width/2, p5.height/2);
      p5.beginShape();
      for(let i = 0; i < 360; i++) {
          let r = p5.map(this.volHistory[i], 0, 1, 50, 500);
          let x = r * p5.cos(i);
          let y = r * p5.sin(i);
  
          p5.vertex(x, y);
      }
      p5.endShape();
  
      if(this.volHistory.length > 360) {
        this.volHistory.splice(0, 1);
      }
  }

  render() {
      return <Sketch setup={this.setup} draw={this.draw}/>
  }
}

test.jpg:1 GET http://localhost:3000/assets/test.jpg 404 (Not Found)
p5.js says: It looks like there was a problem loading your image. Try checking if the file path [http://localhost:3000/assets/test.jpg] is correct, hosting the image online, or running a local server.[https://github.com/processing/p5.js/wiki/Local-server]

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.2.0" from [email protected]
npm ERR! node_modules/react-p5
npm ERR!   react-p5@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Do\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Do\AppData\Local\npm-cache\_logs\2021-02-10T16_05_35_458Z-debug.log
PS D:\Side\fastest-hand-in-the-west> npm i p5
Terminate batch job (Y/N)?
^C
PS D:\Side\fastest-hand-in-the-west> npm i p5

added 1 package, and audited 1964 packages in 5s

125 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS D:\Side\fastest-hand-in-the-west> npm i react-p5
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.2.0" from [email protected]
npm ERR! node_modules/react-p5
npm ERR!   react-p5@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Do\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Do\AppData\Local\npm-cache\_logs\2021-02-10T16_07_08_889Z-debug.log
PS D:\Side\fastest-hand-in-the-west> npm i --save react-p5
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.2.0" from [email protected]
npm ERR! node_modules/react-p5
npm ERR!   react-p5@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Do\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Do\AppData\Local\npm-cache\_logs\2021-02-10T16_08_57_364Z-debug.log
PS D:\Side\fastest-hand-in-the-west> npm i --save react-p5@latest
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.2.0" from [email protected]
npm ERR! node_modules/react-p5
npm ERR!   react-p5@"1.3.8" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See C:\Users\Do\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Do\AppData\Local\npm-cache\_logs\2021-02-10T16_09_10_516Z-debug.log

import p5Types from "p5"; //Import this for typechecking and intellisense

    initDrawing(p5: p5Types) {
        p5.blendMode(p5.BLEND)
...

export default (props) => {
	colorTeal;
	console.log('🚀 ~ file: index.js ~ line 10 ~ colorTeal', colorTeal);
	const x = props.x;
	const y = props.y;
	const setup = (p5, canvasParentRef) => {
		p5.createCanvas(window.innerWidth, window.innerHeight).parent(
			canvasParentRef
		);
	};

	const draw = (p5) => {
		p5.background('#319795');
		p5.ellipse(x, y, 70, 70);
		x++;
	};
	const windowResized = () => {
		resizeCanvas(window.innerWidth / 2, window.innerHeight / 2);
	};
	// Will only render on client-side
	return <Sketch setup={setup} draw={draw} windowResized={windowResized} />;
};