garrit
/
shape.camp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

p5: init

master
Garrit Franke 3 years ago
parent
9050026774
commit
4612583860
Signed by: garrit
GPG Key ID: 65586C4DDA55EA2C
4 changed files with 92 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 63
      package-lock.json
  2. 1
      package.json
  3. 6
      src/components/App.js
  4. 24
      src/components/Game.js

63
package-lock.json generated
Unescape View File

@ -12,6 +12,7 @@
"@types/jest": "^24.0.22",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-p5": "^1.3.19",
"styled-components": "^5.3.0"
},
"devDependencies": {
@ -4291,6 +4292,11 @@
"integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
"dev": true
},
"node_modules/@types/p5": {
"version": "0.9.1",
"resolved": "https://registry.npmjs.org/@types/p5/-/p5-0.9.1.tgz",
"integrity": "sha512-4glOKdqdBiRWDFZwi/MjHudPV2U4t2L4fTTSacGapfFxyNXzZcAshAjqmrJkCIZcFlhRBEAL7AM95xRDMfrIwg=="
},
"node_modules/@types/parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@ -12270,6 +12276,14 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/opencollective-postinstall": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz",
"integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==",
"bin": {
"opencollective-postinstall": "index.js"
}
},
"node_modules/optionator": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@ -12455,6 +12469,11 @@
"node": ">=6"
}
},
"node_modules/p5": {
"version": "1.1.9",
"resolved": "https://registry.npmjs.org/p5/-/p5-1.1.9.tgz",
"integrity": "sha512-gU+UBEAXLGt3RQFzTtsKijF+eBidweIqRrg51AniuLG8LKHzylrB5ilIOzyDgcR1/hWt6danWPArjaVtXHWfWg=="
},
"node_modules/pako": {
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
@ -13831,6 +13850,25 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.11.0.tgz",
"integrity": "sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw=="
},
"node_modules/react-p5": {
"version": "1.3.19",
"resolved": "https://registry.npmjs.org/react-p5/-/react-p5-1.3.19.tgz",
"integrity": "sha512-jA/xmFOHiy6pIjlwMVu3hfcD9brB9pbfl5BSF0SCiruye6xjzv4jkcmTUKP0lgiTdcdEgu2CpAI7VFH05eaFJg==",
"hasInstallScript": true,
"dependencies": {
"@types/p5": "0.9.1",
"opencollective-postinstall": "2.0.2",
"p5": "1.1.9"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/gherciu-gheorghe"
},
"peerDependencies": {
"react": ">= 17.0.1",
"react-dom": ">= 17.0.1"
}
},
"node_modules/react-refresh": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",
@ -19955,6 +19993,11 @@
"integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
"dev": true
},
"@types/p5": {
"version": "0.9.1",
"resolved": "https://registry.npmjs.org/@types/p5/-/p5-0.9.1.tgz",
"integrity": "sha512-4glOKdqdBiRWDFZwi/MjHudPV2U4t2L4fTTSacGapfFxyNXzZcAshAjqmrJkCIZcFlhRBEAL7AM95xRDMfrIwg=="
},
"@types/parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@ -26137,6 +26180,11 @@
"is-wsl": "^2.1.1"
}
},
"opencollective-postinstall": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz",
"integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw=="
},
"optionator": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@ -26270,6 +26318,11 @@
"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
"dev": true
},
"p5": {
"version": "1.1.9",
"resolved": "https://registry.npmjs.org/p5/-/p5-1.1.9.tgz",
"integrity": "sha512-gU+UBEAXLGt3RQFzTtsKijF+eBidweIqRrg51AniuLG8LKHzylrB5ilIOzyDgcR1/hWt6danWPArjaVtXHWfWg=="
},
"pako": {
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
@ -27301,6 +27354,16 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.11.0.tgz",
"integrity": "sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw=="
},
"react-p5": {
"version": "1.3.19",
"resolved": "https://registry.npmjs.org/react-p5/-/react-p5-1.3.19.tgz",
"integrity": "sha512-jA/xmFOHiy6pIjlwMVu3hfcD9brB9pbfl5BSF0SCiruye6xjzv4jkcmTUKP0lgiTdcdEgu2CpAI7VFH05eaFJg==",
"requires": {
"@types/p5": "0.9.1",
"opencollective-postinstall": "2.0.2",
"p5": "1.1.9"
}
},
"react-refresh": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",

1
package.json
Unescape View File

@ -14,6 +14,7 @@
"@types/jest": "^24.0.22",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-p5": "^1.3.19",
"styled-components": "^5.3.0"
},
"devDependencies": {

6
src/components/App.js
Unescape View File

@ -1,6 +1,8 @@
import React, { Component } from "react";
import React from "react";
import styled from "styled-components";
import Game from "./Game";
const Container = styled.div`
text-align: center;
`;
@ -8,7 +10,7 @@ const Container = styled.div`
export default function App() {
return (
<Container>
<h1>Hello World!</h1>
<Game />
</Container>
);
}

24
src/components/Game.js
Unescape View File

@ -0,0 +1,24 @@
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} />;
};
Write Preview
Loading…
Cancel
Save