Coder Social home page Coder Social logo

gherciu / react-p5 Goto Github PK

View Code? Open in Web Editor NEW
589.0 8.0 63.0 386 KB

🎨 This Component lets you integrate p5 Sketches into your React App.

Home Page: https://codesandbox.io/s/k09k8knxz5

License: MIT License

JavaScript 100.00%
p5 p5js react-p5 react-p5js react react-canvas

react-p5's Introduction

react-p5

This Component lets you integrate p5 Sketches into your React App. DEMO

GitHub ggpack

sponsors backers

For Tips and Advanced Usage you can read this Blog Post

Installation

  • npm

    npm i --save react-p5
  • yarn

    yarn add react-p5

Usage

For Tips and Advanced Usage you can read this Blog Post

JavaScript

import React from "react";
import Sketch from "react-p5";

let x = 50;
let y = 50;
export default (props) => {
  const setup = (p5, canvasParentRef) => {
    // use parent to render the canvas in this ref
    // (without that p5 will render the canvas outside of your component)
    p5.createCanvas(500, 500).parent(canvasParentRef);
  };

  const draw = (p5) => {
    p5.background(0);
    p5.ellipse(x, y, 70, 70);
    // NOTE: Do not use setState in the draw function or in functions that are executed
    // in the draw function...
    // please use normal variables or class properties for these purposes
    x++;
  };

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

Typescript

import React from "react";
import Sketch from "react-p5";
import p5Types from "p5"; //Import this for typechecking and intellisense

interface ComponentProps {
  // Your component props
}

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

  // 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++;
  };

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

Tips

  • If you need to get the browser event object inside your p5 methods like mouseClicked or others you can do it by accessing the second arg.
mouseClicked(_p5, event) {
  console.log(event)
}

Events that are accessed using props are always attached to window.

That means that events are triggered throughout the whole page (see the p5 docs for reference).

If you would like to attach events only to canvas see the example below. As an example limiting click events to the canvas:

const setup = (p5, canvasParentRef) => {
  cnv = p5.createCanvas(width, height).parent(canvasParentRef)
  cnv.mousePressed((event) => {
    console.log("Clicked on the canvas. Event:", event)
  })
}

Using it in an SSR environment (Next.js or Gatsby)

Importing this package for example in a Next.js or Gatsby app may give you this error:

ReferenceError: window is not defined

This is because importing p5 requires window to be available, and it isn't when server side rendering.

For Next.js we can fix this using Next.js dynamic imports with No SSR.

import dynamic from 'next/dynamic'

// Will only import `react-p5` on client-side
const Sketch = dynamic(() => import('react-p5').then((mod) => mod.default), {
  ssr: false,
})

For Gatsby we can use loadable-components. See Gatsby docs: Load client-side dependent components with loadable-components.

import Loadable from "@loadable/component"

const Sketch = Loadable(
  () => import("react-p5")
);

export default Sketch;

With p5.sound

I frequently see this question even if the implimentation is super simple. The only needed thing is to import the p5.sound lib. I created a special CodeSandbox demo if someone needs to see the implementation.

With p5.sound + next.js (or other framework which has support for SSR)

This question also is frequently asked and the only difference from the normal aprouch is that in SSR mode the react-p5 lib should not be loaded because p5 doesn't support SSR and there is no sense for it to be support. So, if you are using react-p5 plus next.js and you need p5.sound as well, then try to use dynamic imports as in the code below which will definitely help you.

import dynamic from 'next/dynamic'

// Will only import `react-p5` on client-side
const Sketch = dynamic(() => import("react-p5").then((mod) => {

  // importing sound lib only after react-p5 is loaded
  require('p5/lib/addons/p5.sound');

  // returning react-p5 default export
  return mod.default
}), {
  ssr: false
});

When using dynamic import, the type information for the methods extended by p5.sound.d.ts is not loaded. Therefore, we can use Type-Only Imports to address this.

import dynamic from 'next/dynamic'

// importing only type information from p5.sound addons.
import type from "p5/lib/addons/p5.sound"

// Will only import `react-p5` on client-side
const Sketch = dynamic(() => import("react-p5").then((mod) => {

  // importing sound lib only after react-p5 is loaded.
  require('p5/lib/addons/p5.sound');

  // returning react-p5 default export
  return mod.default
}), {
  ssr: false
});

Props

Prop Required Type Description
className ❌ String ClassName for canvas parent ref
style ❌ Object Styles for canvas parent ref
setup βœ”οΈ Function The setup() function is called once when the program starts.
draw ❌ Function Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called.
windowResized ❌ Function The windowResized() function is called once every time the browser window is resized.
preload ❌ Function Called directly before setup(), the preload() function is used to handle asynchronous loading of external files in a blocking way.
mouseClicked ❌ Function The mouseClicked() function is called once after a mouse button has been pressed and then released.
mouseMoved ❌ Function The mouseMoved() function is called every time the mouse moves and a mouse button is not pressed.
doubleClicked ❌ Function The doubleClicked() function is executed every time a event listener has detected a dblclick event which is a part of the DOM L3 specification.
mousePressed ❌ Function The mousePressed() function is called once after every time a mouse button is pressed.
mouseWheel ❌ Function The function mouseWheel() is executed every time a vertical mouse wheel event is detected either triggered by an actual mouse wheel or by a touchpad.
mouseDragged ❌ Function The mouseDragged() function is called once every time the mouse moves and a mouse button is pressed. If no mouseDragged() function is defined, the touchMoved() function will be called instead if it is defined.
mouseReleased ❌ Function The mouseReleased() function is called every time a mouse button is released.
keyPressed ❌ Function The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable.
keyReleased ❌ Function The keyReleased() function is called once every time a key is released. See key and keyCode for more information.
keyTyped ❌ Function The keyTyped() function is called once every time a key is pressed, but action keys such as Backspace, Delete, Ctrl, Shift, and Alt are ignored.
touchStarted ❌ Function The touchStarted() function is called once after every time a touch is registered.
touchMoved ❌ Function The touchMoved() function is called every time a touch move is registered.
touchEnded ❌ Function The touchEnded() function is called every time a touch ends. If no touchEnded() function is defined, the mouseReleased() function will be called instead if it is defined.
deviceMoved ❌ Function The deviceMoved() function is called when the device is moved by more than the threshold value along X, Y or Z axis. The default threshold is set to 0.5. The threshold value can be changed using setMoveThreshold()
deviceTurned ❌ Function The deviceTurned() function is called when the device rotates by more than 90 degrees continuously.
deviceShaken ❌ Function The deviceShaken() function is called when the device total acceleration changes of accelerationX and accelerationY values is more than the threshold value. The default threshold is set to 30.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Or you can sponsor via Open Collective

Author

@Gherciu/react-p5 Released under the MIT License.
Authored and maintained by GHERCIU GHEORGHE with help from contributors (list).

If you like this repository star⭐ and watchπŸ‘€ on GitHub

react-p5's People

Contributors

0p3r4t0r avatar armedi avatar ggorlen avatar gherciu avatar hahlh avatar hirokiyoshida837 avatar hug0hq avatar icytv avatar imadrafter avatar jankaifer avatar kiastorm avatar lambertbrady avatar md-rehman avatar teyeb avatar thejanitor337 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-p5's Issues

Functional component with useEffect

I'm getting close to a solution here. My problem is that I need to use a p5 method inside my useEffect to load an image but the useEffect doesn't have access to the p5 object. I'm going to need to use the p5 object for some other useEffects as well. Is there a way to pass it to it somehow?

// 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;

p5.loadSound in next.js

hello! I would be super happy if anyone could share code where p5 sound library is used with react-p5 and next.js.
keep getting p5.loadSound() is not a function

Can't resolve 'react-p5'

Hey! I have a problem:
With the following code I get the error 'Module not found: Can't resolve 'react-p5' in 'C:....'.
I ran 'npm i p5 react-p5' and also checked the package.json. If I hover over the importet 'Sketch' it even shows the proper information on that. Everything seems to be correct but it just won't work and I couldn't find anything in the Internet.

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

use p5 webcam/VIDEO functionality in react

I am trying to use p5's webcam / video capture functional in my react application. I found an example with Sketch and it worked. However, when I try to change the given sketch to the video thing (code inspired by ml5.js documentation), it does not work because VIDEO is not defined.

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'.

It's the same for invert.
Here's something similar but it is in plain javascript, not react.

https://github.com/ml5js/ml5-library/blob/main/examples/p5js/ImageClassification/ImageClassification_Video/sketch.js
How can I reproduce this in react?

functional component

how would i use this as a functional component rather than a class based one. Not essential, but I'm doing everything else that way and ran into a few errors when i tried to convert it

Trouble using p5 sound library

Hi, this is probably a rookie issue but I am having some issues accessing the p5 sound library via react-p5. I got the simple sketch working via vanilla HTML and JS and I am now trying to get it working with React. I see that the code for p5.sound.js in the the addons of the node module, however, I can't seem to make use of it.

The error I am receiving is that p5.loudSound is not a function. Any help at all would be greatly appreciated!

Here is the code:

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}/>
  }
}

How do I create Audio?

I tried to get the AudioIn working, but couldn't figure it out. I'm trying to record audio. How would I call the new AudioIn(). Thanks!

Cannot read property 'remove' of undefined using Typescript.

I'm trying to embed a p5.js sketch using this library in a project I'm working on.

The following sketch yields the following error:

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)
  }
}

p5 WebGL mode?

Can't seem to invoke the webgl mode of p5.js the usual way (adding the keyword WEBGL as a third parameter in createCanvas). Is the WEBGL mode supported?

Loading data from local server

This is an error about loadImage().

I'm currently running a p5js program in the following environment.

  • Environment
    • Node.JS v13.1.0
    • Next.js v9.3.6
    • react v16.13.1

When I try to load the test.jpg in assets folder, I get the following error.

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]

How do I get the images on the server to load?

Thank you.

textWrap

TypeError: p.textWrap is not a function

Does p.textWrap(p.CHAR) not work or is it just me?

Canvas stops drawing when invoking useState in next.js

Hey I'm using this Component in a Next.js project to animate a low-poly landscape.
When invoking useState (see _app.js), the canvas suddenly stops drawing or at least it seems to no longer be visible.

The canvas is still in the DOM, resizing the window seems to fix this. Something similar happens when something is changed in the next.js project and hot-reload is kicking in, so these might be related to one another.

https://codesandbox.io/s/interesting-rgb-r09mf?file=/components/animatedTerrain.js

MouseDragged/MousePressed/MouseReleased etc outside of canvas

Hi,

So this might be down to wrong usage, but I have a problem:
I want to use the p5 mouse/touch event stuff in order for my user to be able to interact with the canvas. I also have other Components on the same page. When I now register a listener for these events, it always executes, even outside of the canvas bounds. Is this an issue on your end? Or a p5 issue? Does it come down to wrong usage?

Thank you for your time

P5 windowResized

Hi, thank you for your work on this package. I wondered if there is a way of implementing p5's windowResized function. I'm trying something like the below:

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} />;
};

4px Bottom margin in container around canvas

There seems to be a 4px bottom margin in the react-p5 div surrounding the canvas. This is creating overflow when I try to make the entire window the canvas.

The sandbox code shows the height of the div at 204px.

Thanks!

Problem Load Canvas Over Router

For example i have to pages:

  • Home
  • Game

In the Game Page, i maked a canvas, and when i open e.g localhost/game the canvas can load.

but when i enter to game page from other routes, canvas can't be load at all.

Canvas fit width

I can't find a way of using the windowWidth property and was wondering if something is different here.

createVideo

How can I use p5.dom methods like createVideo with react-p5?

fit p5 canvas into react component

Hi,

I'd like to render a p5 canvas inside of a react component.
Is there a convenient way to make the canvas fit the component dimensions?
My original idea was to fetch the parent component's dimensions using the useRef hook and pass them to a child that contains the p5 canvas.
But this way I alway had the problem that scroll bars were introduced and I wasn't able to hide them.

thanks in advance :)

There is no p5.Vector.add() or p5.p5.Vector.add()

I was trying to move a circle using p5.Vector.add() but neither p5.Vector.add() nor p5.p5.Vector.add() exists. How do I access these properties? If I can't access them, is there some workarounds to do so?

Thanks in advance.

New version of React doesnt seem to be compatible with dependencies of the package

when i run npm install react-p5, it's getting errors relating to new version reactjs "Could not resolve dependency peer react@"^16.2.0" from [email protected]"

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

Super Expression either be null or function

I am getting this error when I try to use npm run build.
It works well when I run locally , but whenever I try to build this , it shows this error "Super Expression either be null or a function. Please help

windowResized not working for me

I'm having trouble getting the windowResized function to work. I've got the following in my code (the console.log is just to try to see if its being called):

windowResized = p5 => { p5.resizeCanvas(p5.windowWidth, p5.windowHeight) console.log('resize') }

I've also tried windowResized() { ... }

thanks for any help you can give

p5 global type definitions?

I have this:

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

but that doesn't define the global types

if i pass around an instance of that I can use it:

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

but that is a bit of hassle.

do you define the global types in a more accessible way?

react-p5 with p5.sound and tone.js cannot be used at the same time?

If I use the work around to use p5.sound by importing as -

import "p5/lib/addons/p5.sound";

and I am using tone.js in another react class like -

const osc = new Oscillator("100").toDestination();

I get the following error on page load -
Screenshot 2021-08-16 at 11 16 07

Is this something I shouldn't be doing i.e. you can only use one sound library at a time or is there a way round this? If I remove the p5.sound import the error goes away...

Not able to call createVector

I am trying to call the function createVector outside the setup and draw functions. I have tried window.p5.createVector, createVector and p5.createVector, but all of them cause is not a function error. So how should I instead call createVector ?

Gatsby: WebpackError: ReferenceError: window is not defined

Although there is a check in place:

if (typeof window !== "undefined") window.p5 = p5;

The build still fails for me. This could be the case, because of the one-liner if statement. It could lead to an error during static analysis, but that's speculation. Do you have more insight on what could cause this even though it should normally be prevented?

The complete error from the console:

WebpackError: ReferenceError: window is not defined
  
  - index.js:1 
    [Dolce Stil Criollo]/[react-p5]/build/index.js:1:330179
  
  - index.js:1 
    [Dolce Stil Criollo]/[react-p5]/build/index.js:1:1439
  
  - index.js:1 
    [Dolce Stil Criollo]/[react-p5]/build/index.js:1:1475
  
  - index.js:1 
    [Dolce Stil Criollo]/[react-p5]/build/index.js:1:272442
  
  - index.js:1 
    [Dolce Stil Criollo]/[react-p5]/build/index.js:1:1439
  
  - index.js:1 
    [Dolce Stil Criollo]/[react-p5]/build/index.js:1:1475
  
  - index.js:1 
    [Dolce Stil Criollo]/[react-p5]/build/index.js:1:230003
  
  - index.js:1 
    [Dolce Stil Criollo]/[react-p5]/build/index.js:1:1439
  
  - index.js:1 
    [Dolce Stil Criollo]/[react-p5]/build/index.js:1:1570
  
  - index.js:1 
    [Dolce Stil Criollo]/[react-p5]/build/index.js:1:1591
  
  - index.js:1 
    [Dolce Stil Criollo]/[react-p5]/build/index.js:1:612542
  
  - index.js:1 
    [Dolce Stil Criollo]/[react-p5]/build/index.js:1:373
  
  - index.js:1 
    [Dolce Stil Criollo]/[react-p5]/build/index.js:1:612637
  
  - index.js:1 
    [Dolce Stil Criollo]/[react-p5]/build/index.js:1:373
  
  - index.js:1 
    [Dolce Stil Criollo]/[react-p5]/build/index.js:1:1176
  
  - index.js:1 
    [Dolce Stil Criollo]/[react-p5]/build/index.js:1:1193

Could the code be included unminified during development and be minified only for production? Are the gains through minifing so great here, that it justifies the increased difficulty with debugging?
Otherwise it makes all errors really hard to follow, also with errors unrelated to the build.

I will create a PR for adding brackets to the one-liner as a fail-safe. I am not sure whether that will actually fix the issue, but it is worth a shot? Unfortunately I can't test this out myself as there are some build steps involved that I don't quite understand. Maybe you could clarify in the docs, how one goes about local development of this package.

I will also create a new issue asking about local development of this package.

Is anybody else building successfully using Gatsby v3?

how to include a class in the code?

I am trying include a class, but gets error message "TypeError: Symbol is not a constructor"

Here is code

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}  />
    }
}

Typescript and p5.erase()

I bumped into an issue with using erase() and noErase() in Typescript. The interpreter insists that these are unknown properties:

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

They definitely exist, everything works perfectly when I instruct Typescript to ignore these lines.

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

Dom Element

I am not able to use DOM elements in react.
var button = p5.createButton('click me') button.position(this.x, this.y)

it is not showing on the screen.

How to go about local development of react-p5?

Hey @Gherciu !

Thank again for your work!

Could you elaborate on how to go about local development of the package?

I wanted to create this issue specifically for getting to know more about how to develop react-p5 locally.
Forking it, then including the fork as a dependency in package.json doesn't seem to work as there are some built steps missing that go along with npm publish?

Including information about development in the docs

So far the docs only include information on how to contribute to the project, but not how to do successful local development.

This could be awesome additional information for the docs as it would allow many more people to contribute.

(if you prefer to move this issue to the discussion feature of Github, please feel free to do so)

stops drawing when navigating with react router dom

I have a Router, and a component which implements a <Sketch />. This is placed on the top of the Router, so it will stay there on every page. When i am pragmatically navigating between the pages, the p5 drawing stops. The canvas is still exists in the DOM, but it gets cleared. Only way to get them back is by refreshing the entire page.

Any idea how to go around this problem?

Thank you!

Trouble resolving module in Gatsby

Hi! I noticed an issue with resolved this module in Gatsby project I'm working on using the latest version (1.3.8).

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

Switching to 1.3.6 seemed to have resolved the issue. Here's a reference to the code in question if you'd like to take a look and try switching the version of the react-p5 to the latest one and running npm install and gatsby develop!
https://github.com/bomanimc/personal/tree/noc

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.