├── .babelrc ├── .browserslistrc ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── src ├── assets │ ├── audio │ │ └── bensound-acoustic-breeze.mp3 │ ├── demo │ │ ├── screencast-2.gif │ │ └── screencast.gif │ └── img │ │ ├── audio-bgnd.jpg │ │ ├── favicon.png │ │ ├── github-logo.png │ │ ├── pause-btn.svg │ │ └── play-btn.svg ├── components │ ├── App │ │ ├── AppStateProvider │ │ │ ├── index.jsx │ │ │ ├── init-state.js │ │ │ └── reducer.js │ │ ├── index.jsx │ │ └── style.css │ ├── AppContent │ │ └── index.jsx │ ├── P5Wrapper │ │ └── index.jsx │ ├── Section1 │ │ └── index.jsx │ ├── Section2 │ │ └── index.jsx │ ├── Section3 │ │ └── index.jsx │ ├── Section31 │ │ └── index.jsx │ └── Section4 │ │ └── index.jsx ├── index.ejs ├── index.jsx └── sketches │ ├── sketch-1.js │ ├── sketch-2.js │ └── sketch-sound.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "production": { 4 | "presets": [ 5 | [ 6 | "@babel/preset-env", 7 | { 8 | "useBuiltIns": "entry", 9 | "corejs": { 10 | "version": 3, 11 | "proposals": true 12 | } 13 | } 14 | ], 15 | [ 16 | "@babel/preset-react", 17 | { 18 | "useBuiltIns": true 19 | } 20 | ] 21 | ] 22 | }, 23 | "development": { 24 | "plugins": [ 25 | "react-hot-loader/babel" 26 | ], 27 | "presets": [ 28 | [ 29 | "@babel/preset-env", 30 | { 31 | "modules": false, 32 | "useBuiltIns": "entry", 33 | "corejs": { 34 | "version": 3, 35 | "proposals": true 36 | } 37 | } 38 | ], 39 | [ 40 | "@babel/preset-react", 41 | { 42 | "useBuiltIns": true 43 | } 44 | ] 45 | ] 46 | } 47 | }, 48 | "ignore": [ 49 | "__storage__", 50 | "build", 51 | "dist", 52 | "docs", 53 | "externals", 54 | "node_modules" 55 | ] 56 | } 57 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 5% # can add an human readable comment 2 | Last 2 versions # Or last two versions 3 | IE 11 4 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | __storage__ 2 | build 3 | dist 4 | docs 5 | externals 6 | node_modules 7 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: 'airbnb', 3 | parser: 'babel-eslint', 4 | plugins: ['react-hooks'], 5 | rules: { 6 | 'brace-style': ['error', 'stroustrup'], 7 | 'camelcase': 0, 8 | 'default-case': 0, 9 | 'indent': ['error', 10 | 4, 11 | { 'SwitchCase': 1 } 12 | ], 13 | 'new-cap': 0, 14 | 'max-len': 0, 15 | 'no-bitwise': 0, 16 | 'no-console': 0, 17 | 'no-param-reassign': 0, 18 | 'no-underscore-dangle': 0, 19 | 'no-plusplus': 0, 20 | 'prefer-destructuring': 0, 21 | 'prefer-template': 0, 22 | 'semi': 0, 23 | 'semi-style': ['error', 'first'], 24 | 25 | 'react/forbid-prop-types': 0, 26 | 'react/destructuring-assignment': 0, 27 | 'react-hooks/rules-of-hooks': 'error', 28 | 'react-hooks/exhaustive-deps': 'warn', 29 | 30 | 'react/jsx-indent': ['error', 4], 31 | 'react/jsx-indent-props': ['error', 4], 32 | 'react/no-array-index-key': 0, 33 | 'react/prefer-stateless-function': 0, 34 | }, 35 | globals: { 36 | window: true 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | test_reports 17 | 18 | # nyc test coverage 19 | .nyc_output 20 | 21 | # node-waf configuration 22 | .lock-wscript 23 | 24 | # Compiled binary addons (http://nodejs.org/api/addons.html) 25 | build/Release 26 | 27 | # Dependency directories 28 | node_modules 29 | jspm_packages 30 | 31 | # Optional npm cache directory 32 | .npm 33 | 34 | # Optional REPL history 35 | .node_repl_history 36 | 37 | # Editor files 38 | *.iml 39 | 40 | # Custom 41 | __storage__ 42 | .DS_Store 43 | build 44 | dist 45 | docs 46 | .idea/ 47 | stats.json 48 | .tmp 49 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.words": [ 3 | "atorov", 4 | "bensound", 5 | "bgnd", 6 | "camelcase", 7 | "chunkhash", 8 | "color", 9 | "contenthash", 10 | "devtool", 11 | "entrypoint", 12 | "max", 13 | "minified", 14 | "plusplus", 15 | "size", 16 | "stroustrup" 17 | ] 18 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 atorov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Using React with p5.js 2 | 3 | ![alt application screenshot](https://github.com/atorov/react-hooks-p5js/blob/master/src/assets/demo/screencast.gif) 4 | ![alt application screenshot](https://github.com/atorov/react-hooks-p5js/blob/master/src/assets/demo/screencast-2.gif) 5 | 6 | This project demonstrates how to combine React (including the latest features such as **hooks and context**) and p5.js: 7 | 8 | - Multiple p5 sketches on a same screen; 9 | - Multiple instances of one sketch mounted in a same component; 10 | - Mount sketches in different points of the DOM tree; 11 | - Dynamically switch on/off sketches; 12 | - p5.js libraries support (p5.sound example) 13 | - Bidirectional communication between the main React app and sketches; 14 | - Using the latest React features: 15 | - memo() 16 | - useContext() 17 | - useEffect() 18 | - useReducer() 19 | - Hot Module Replacement (HMR): exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways: 20 | - Retain application state which is lost during a full reload; 21 | - Save valuable development time by only updating what's changed. 22 | 23 | --- 24 | 25 | Check the online version [here](http://react-hooks-p5js.surge.sh/). 26 | 27 | The basic idea is that the p5.js sketch is wrapped in a React component. The data that comes into the sketch is passed on to this component as props. Callbacks are used to return information back from the sketch to the application. 28 | 29 | --- 30 | 31 | Another examples, build on the same concept but using class-based components, can be found [here](https://github.com/atorov/react-p5js) and [here](https://github.com/atorov/fractal-tree-simulator). 32 | 33 | --- 34 | 35 | ## Available Scripts 36 | 37 | In the project directory, you can run: 38 | 39 | ### `npm start` 40 | 41 | Runs the app in the development mode. Open [http://localhost:8080](http://localhost:8080) to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console. 42 | 43 | ### `npm run build` 44 | 45 | Builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. Your app is ready to be deployed. 46 | 47 | ## Supported Language Features and Polyfills 48 | 49 | This project supports a superset of the latest JavaScript standard. 50 | 51 | ## Syntax Highlighting and Displaying Lint Output in the Editor 52 | 53 | Тhe most popular editors should be covered and your editor should report the linting warnings. 54 | 55 | ## Adding a Router and Redux 56 | 57 | [React Router](https://reacttraining.com/react-router/) is the most popular option. 58 | 59 | [Redux](https://redux.js.org/) is a predictable state container for JavaScript apps. 60 | 61 | React Router and Redux can easily be added to the project. 62 | 63 | --- 64 | 65 | [React](https://reactjs.org/) is one of the most popular JavaScript libraries for creating single page applications. 66 | 67 | [p5.js](https://p5js.org/) is a JavaScript library with a full set of drawing functionality. 68 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-hooks-p5js", 3 | "version": "2.2.0", 4 | "private": true, 5 | "description": "Using ", 6 | "keywords": [ 7 | "react", 8 | "context", 9 | "hooks", 10 | "p5js" 11 | ], 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/atorov/react-hooks-p5js.git" 15 | }, 16 | "bugs": "https://github.com/atorov/react-hooks-p5js.git/issues", 17 | "author": "atorov", 18 | "license": "MIT", 19 | "main": "src/index.jsx", 20 | "scripts": { 21 | "clean": "rm -rf ./build", 22 | "build": "npm run clean && NODE_ENV=production webpack", 23 | "start": "nodemon --watch webpack.*.js --exec \"NODE_ENV=development webpack-dev-server\"" 24 | }, 25 | "dependencies": { 26 | "@hot-loader/react-dom": "^16.8.6", 27 | "prop-types": "^15.7.2", 28 | "react": "^16.8.6", 29 | "react-dom": "^16.8.6", 30 | "react-hot-loader": "^4.8.4", 31 | "shortid": "^2.2.14" 32 | }, 33 | "devDependencies": { 34 | "@babel/core": "^7.4.3", 35 | "@babel/preset-env": "^7.4.3", 36 | "@babel/preset-react": "^7.0.0", 37 | "autoprefixer": "^9.6.0", 38 | "babel-eslint": "^10.0.1", 39 | "babel-loader": "^8.0.5", 40 | "copy-webpack-plugin": "^5.0.2", 41 | "core-js": "^3.0.1", 42 | "css-loader": "^2.1.1", 43 | "eslint": "^5.16.0", 44 | "eslint-config-airbnb": "^17.1.0", 45 | "eslint-plugin-import": "^2.17.2", 46 | "eslint-plugin-jsx-a11y": "^6.2.1", 47 | "eslint-plugin-react": "^7.12.4", 48 | "eslint-plugin-react-hooks": "^1.6.0", 49 | "html-webpack-plugin": "^3.2.0", 50 | "mini-css-extract-plugin": "^0.7.0", 51 | "nodemon": "^1.18.11", 52 | "postcss-loader": "^3.0.0", 53 | "regenerator-runtime": "^0.13.2", 54 | "style-loader": "^0.23.1", 55 | "webpack": "^4.33.0", 56 | "webpack-cli": "^3.3.0", 57 | "webpack-dev-server": "^3.3.1" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/assets/audio/bensound-acoustic-breeze.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atorov/react-hooks-p5js/a72a42f4e2bdec7dbf1f19cba15031c0654ef067/src/assets/audio/bensound-acoustic-breeze.mp3 -------------------------------------------------------------------------------- /src/assets/demo/screencast-2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atorov/react-hooks-p5js/a72a42f4e2bdec7dbf1f19cba15031c0654ef067/src/assets/demo/screencast-2.gif -------------------------------------------------------------------------------- /src/assets/demo/screencast.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atorov/react-hooks-p5js/a72a42f4e2bdec7dbf1f19cba15031c0654ef067/src/assets/demo/screencast.gif -------------------------------------------------------------------------------- /src/assets/img/audio-bgnd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atorov/react-hooks-p5js/a72a42f4e2bdec7dbf1f19cba15031c0654ef067/src/assets/img/audio-bgnd.jpg -------------------------------------------------------------------------------- /src/assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atorov/react-hooks-p5js/a72a42f4e2bdec7dbf1f19cba15031c0654ef067/src/assets/img/favicon.png -------------------------------------------------------------------------------- /src/assets/img/github-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atorov/react-hooks-p5js/a72a42f4e2bdec7dbf1f19cba15031c0654ef067/src/assets/img/github-logo.png -------------------------------------------------------------------------------- /src/assets/img/pause-btn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/assets/img/play-btn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /src/components/App/AppStateProvider/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { createContext, useReducer } from 'react' 2 | import PropTypes from 'prop-types' 3 | 4 | import initState from './init-state' 5 | import reducer from './reducer' 6 | 7 | export const AppDispatchContext = createContext(() => { }) 8 | export const AppStateContext = createContext(initState) 9 | 10 | function AppStateProvider({ children }) { 11 | const [state, dispatch] = useReducer(reducer, initState) 12 | 13 | return ( 14 | 15 | 16 | {children} 17 | 18 | 19 | ) 20 | } 21 | 22 | AppStateProvider.propTypes = { 23 | children: PropTypes.any.isRequired, 24 | } 25 | 26 | export default AppStateProvider 27 | -------------------------------------------------------------------------------- /src/components/App/AppStateProvider/init-state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | slider: 40, 3 | sketch1L: true, 4 | sketch1R: true, 5 | sketch2: true, 6 | sketchAudio: true, 7 | bgndColor: '#ddd', 8 | playAudio: false, 9 | } 10 | -------------------------------------------------------------------------------- /src/components/App/AppStateProvider/reducer.js: -------------------------------------------------------------------------------- 1 | export default function (state, { type, payload }) { 2 | switch (type) { 3 | case 'SET_BGND_COLOR': 4 | return { 5 | ...state, 6 | bgndColor: payload, 7 | } 8 | 9 | case 'SET_PLAY_AUDIO': 10 | return { 11 | ...state, 12 | playAudio: payload, 13 | } 14 | 15 | case 'SET_SLIDER_VALUE': 16 | return { 17 | ...state, 18 | slider: payload, 19 | } 20 | 21 | case 'TOGGLE_PLAY_AUDIO': 22 | return { 23 | ...state, 24 | playAudio: !state.playAudio, 25 | } 26 | 27 | case 'TOGGLE_SKETCH': 28 | return { 29 | ...state, 30 | [payload.key]: payload.value, 31 | } 32 | 33 | default: 34 | return state 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/components/App/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { hot } from 'react-hot-loader' 3 | 4 | import AppContent from '../AppContent' 5 | 6 | import AppStateProvider from './AppStateProvider' 7 | 8 | import './style.css' 9 | 10 | function App() { 11 | return ( 12 | 13 | 14 | 15 | ) 16 | } 17 | 18 | export default module.hot ? hot(module)(App) : App 19 | -------------------------------------------------------------------------------- /src/components/App/style.css: -------------------------------------------------------------------------------- 1 | h5 { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | #app-root { 7 | font-family: Roboto, sans-serif; 8 | } 9 | 10 | .app-content { 11 | max-width: 1024px; 12 | } 13 | 14 | .github { 15 | text-align: center; 16 | } 17 | 18 | .section { 19 | margin: 8px auto; 20 | padding: 8px; 21 | border: 1px dashed lightgray; 22 | border-radius: 4px; 23 | } 24 | 25 | .section-content { 26 | display: flex; 27 | justify-content: space-around; 28 | } 29 | 30 | .slider { 31 | width: 100%; 32 | } 33 | 34 | .inputs-wrapper { 35 | text-align: center; 36 | } 37 | -------------------------------------------------------------------------------- /src/components/AppContent/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Section1 from '../Section1' 4 | import Section2 from '../Section2' 5 | import Section3 from '../Section3' 6 | import Section4 from '../Section4' 7 | 8 | export default function AppContent() { 9 | return ( 10 | <> 11 |
12 |
App content
13 | 14 | 15 | 16 | 17 |
18 | 19 |

20 | 21 | github logo 28 | 29 |

30 | 31 | ) 32 | } 33 | -------------------------------------------------------------------------------- /src/components/P5Wrapper/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { memo, useEffect, useRef } from 'react' 2 | import PropTypes from 'prop-types' 3 | 4 | import { generate } from 'shortid' 5 | 6 | export default function (id = generate()) { 7 | let canvas = null 8 | 9 | function P5Wrapper({ 10 | sketch = () => { }, 11 | state = {}, 12 | dispatch = () => { }, 13 | }) { 14 | console.log(`::: P5Wrapper(${id}) component has been re-rendered`) 15 | 16 | const sketchContainer = useRef(null) 17 | 18 | useEffect(() => { 19 | console.log(`::: P5Wrapper(${id})/useEffect()`) 20 | canvas = new window.p5(sketch, sketchContainer.current) 21 | canvas.state = state 22 | canvas.dispatch = dispatch 23 | 24 | return () => { 25 | console.log(`::: P5Wrapper(${id})/useEffect.return()`) 26 | canvas.remove() 27 | } 28 | }, [dispatch, sketch, state]) 29 | 30 | return ( 31 |
32 |
{`P5Wrapper #${id}`}
33 |
34 | ) 35 | } 36 | 37 | P5Wrapper.propTypes = { 38 | state: PropTypes.object, 39 | 40 | dispatch: PropTypes.func, 41 | sketch: PropTypes.func, 42 | } 43 | 44 | P5Wrapper.defaultProps = { 45 | state: {}, 46 | 47 | dispatch: () => { }, 48 | sketch: () => { }, 49 | } 50 | 51 | return memo(P5Wrapper, (_, nextProps) => { 52 | canvas.state = { ...nextProps.state } 53 | 54 | return true 55 | }) 56 | } 57 | -------------------------------------------------------------------------------- /src/components/Section1/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | 3 | import { AppDispatchContext, AppStateContext } from '../App/AppStateProvider' 4 | 5 | export default function Section1() { 6 | const dispatch = useContext(AppDispatchContext) 7 | const { 8 | slider, 9 | sketch1L, 10 | sketch1R, 11 | sketch2, 12 | sketchAudio, 13 | bgndColor, 14 | } = useContext(AppStateContext) 15 | 16 | return ( 17 |
21 |
Section #1
22 |
23 | {slider} 24 | dispatch({ 32 | type: 'SET_SLIDER_VALUE', 33 | payload: +event.target.value, 34 | })} 35 | /> 36 |
37 |
38 |
39 | 51 | 63 |
64 | 76 |
77 | 95 |
96 |
97 | ) 98 | } 99 | -------------------------------------------------------------------------------- /src/components/Section2/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | 3 | import { generate } from 'shortid' 4 | 5 | import sketch1Src from '../../sketches/sketch-1' 6 | 7 | import { AppDispatchContext, AppStateContext } from '../App/AppStateProvider' 8 | import p5Wrapper from '../P5Wrapper' 9 | 10 | const P5Wrapper1 = p5Wrapper(generate()) 11 | const P5Wrapper2 = p5Wrapper(generate()) 12 | 13 | export default function Section2() { 14 | const dispatch = useContext(AppDispatchContext) 15 | const { 16 | slider, 17 | sketch1L, 18 | sketch1R, 19 | } = useContext(AppStateContext) 20 | 21 | return ( 22 |
23 |
Section #2
24 |
25 | {sketch1L && ( 26 | 31 | )} 32 | {sketch1R && ( 33 | 38 | )} 39 |
40 |
41 | ) 42 | } 43 | -------------------------------------------------------------------------------- /src/components/Section3/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Section31 from '../Section31' 4 | 5 | export default function Section3() { 6 | return ( 7 |
8 |
Section #3
9 | 10 |
11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /src/components/Section31/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | 3 | import { generate } from 'shortid' 4 | 5 | import sketch2Src from '../../sketches/sketch-2' 6 | 7 | import { AppDispatchContext, AppStateContext } from '../App/AppStateProvider' 8 | import p5Wrapper from '../P5Wrapper' 9 | 10 | const P5Wrapper = p5Wrapper(generate()) 11 | 12 | export default function Section31() { 13 | const dispatch = useContext(AppDispatchContext) 14 | const { sketch2 } = useContext(AppStateContext) 15 | 16 | return ( 17 |
18 |
Section #31
19 | Select a color 20 |
21 | {sketch2 && ( 22 | 26 | )} 27 |
28 |
29 | ) 30 | } 31 | -------------------------------------------------------------------------------- /src/components/Section4/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react' 2 | 3 | import { generate } from 'shortid' 4 | 5 | import sketchSoundSrc from '../../sketches/sketch-sound' 6 | 7 | import { AppDispatchContext, AppStateContext } from '../App/AppStateProvider' 8 | import p5Wrapper from '../P5Wrapper' 9 | 10 | const P5Wrapper = p5Wrapper(generate()) 11 | 12 | export default function Section4() { 13 | const dispatch = useContext(AppDispatchContext) 14 | const { 15 | playAudio, 16 | sketchAudio, 17 | } = useContext(AppStateContext) 18 | 19 | return ( 20 |
21 |
Section #4
22 | 23 | {playAudio ? 'Playing audio...' : 'Audio is stopped'} 24 | 25 |
26 | {sketchAudio && ( 27 | 32 | )} 33 |
34 |
35 | ) 36 | } 37 | -------------------------------------------------------------------------------- /src/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | React Hooks P5JS 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 |
22 | Loading... 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom' 3 | 4 | import App from './components/App' 5 | 6 | render(, window.document.querySelector('#app-root')) 7 | -------------------------------------------------------------------------------- /src/sketches/sketch-1.js: -------------------------------------------------------------------------------- 1 | export default function (s) { 2 | s.state = {} 3 | // s.dispatch = () => { } 4 | 5 | s.setup = () => { 6 | s.createCanvas(150, 150) 7 | 8 | // console.log('::: displayDensity:', s.displayDensity()) 9 | // console.log('::: pixelDensity:', s.pixelDensity()) 10 | 11 | console.log('::: sketch-1 has been initialized') 12 | } 13 | 14 | s.draw = () => { 15 | s.background(127, 0, 50) 16 | s.strokeWeight(s.map(s.state.slider, 0, 100, 0, 10)) 17 | s.stroke(127, 255, 205) 18 | s.fill(127, 255, 205, s.map(s.state.slider, 0, 100, 255, 0)) 19 | s.ellipse(s.width / 2, s.height / 2, s.state.slider) 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/sketches/sketch-2.js: -------------------------------------------------------------------------------- 1 | export default function (s) { 2 | s.state = {} 3 | s.dispatch = () => { } 4 | 5 | s.setup = () => { 6 | s.createCanvas(640, 120) 7 | s.colorMode(s.HSB) 8 | 9 | for (let i = 0; i < 6; i++) { 10 | for (let j = 0; j < s.width; j++) { 11 | const hue = s.map(j, 0, s.width - 1, 0, 360) 12 | const sat = 100 * (i + 1) / 6 13 | s.stroke(hue, sat, 100) 14 | 15 | const top = s.height * i / 6 16 | const bottom = top + s.height / 6 17 | 18 | s.line(j, top, j, bottom) 19 | } 20 | } 21 | 22 | s.noLoop() 23 | 24 | console.log('::: sketch-2 has been initialized') 25 | } 26 | 27 | s.mouseClicked = () => { 28 | if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height) { 29 | const [r, g, b] = s.get(s.mouseX, s.mouseY) 30 | const comb = (r << 16) | (g << 8) | b 31 | let hex = comb.toString(16) 32 | while (hex.length < 6) { 33 | hex = '0' + hex 34 | } 35 | s.dispatch({ 36 | type: 'SET_BGND_COLOR', 37 | payload: '#' + hex, 38 | }) 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/sketches/sketch-sound.js: -------------------------------------------------------------------------------- 1 | export default function (s) { 2 | s.state = {} 3 | s.dispatch = () => { } 4 | 5 | let imgBgnd 6 | let imgPauseBtn 7 | let imgPlayBtn 8 | 9 | s.preload = () => { 10 | imgBgnd = s.loadImage('img/audio-bgnd.jpg') 11 | imgPauseBtn = s.loadImage('img/pause-btn.svg') 12 | imgPlayBtn = s.loadImage('img/play-btn.svg') 13 | 14 | s.soundFormats('mp3') 15 | s.mySound = s.loadSound('audio/bensound-acoustic-breeze.mp3') 16 | } 17 | 18 | s.setup = () => { 19 | s.createCanvas(320, 240) 20 | 21 | s.mySound.setLoop(true) 22 | } 23 | 24 | s.draw = () => { 25 | const { playAudio } = s.state 26 | 27 | s.imageMode(s.CORNER) 28 | s.image(imgBgnd, 0, 0, s.width, s.height) 29 | 30 | s.tint(255, 127) 31 | s.imageMode(s.CENTER) 32 | if (playAudio) { 33 | s.image(imgPlayBtn, s.width / 2, s.height / 2) 34 | 35 | s.stroke(255, 127) 36 | s.strokeWeight(1) 37 | for (let index = 0; index < s.width; index += 4) { 38 | const height = 100 * s.noise((s.frameCount + index) / 10) 39 | const y1 = s.height * 2 / 3 - height / 2 40 | const y2 = s.height * 2 / 3 + height / 2 41 | s.line(index, y1, index, y2) 42 | } 43 | } 44 | else { 45 | s.image(imgPauseBtn, s.width / 2, s.height / 2) 46 | s.filter(s.GRAY) 47 | } 48 | } 49 | 50 | s.mouseClicked = () => { 51 | const { playAudio } = s.state 52 | 53 | if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height) { 54 | if (playAudio) { 55 | s.mySound.pause() 56 | } 57 | else { 58 | s.mySound.setVolume(0.1) 59 | s.mySound.play() 60 | } 61 | 62 | s.dispatch({ type: 'TOGGLE_PLAY_AUDIO' }) 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | 4 | const Autoprefixer = require('autoprefixer') 5 | const CopyWebpackPlugin = require('copy-webpack-plugin') 6 | const HtmlWebpackPlugin = require('html-webpack-plugin') 7 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 8 | 9 | const NODE_MODULES = path.resolve(__dirname, 'node_modules') 10 | const EXTERNALS = path.resolve(__dirname, 'externals') 11 | const STORAGE = path.resolve(__dirname, '__storage__') 12 | const EXCLUDE_DEFAULT = [NODE_MODULES, EXTERNALS, STORAGE] 13 | 14 | const SRC = path.resolve(__dirname, 'src') 15 | const DIST = path.resolve(__dirname, 'build/www') 16 | 17 | const NODE_ENV = process.env.NODE_ENV 18 | const MODE = NODE_ENV !== 'development' ? 'production' : 'development' 19 | process.env.BABEL_ENV = MODE 20 | 21 | const config = { 22 | mode: MODE, 23 | resolve: { 24 | extensions: ['.js', '.jsx'], 25 | alias: { 'react-dom': '@hot-loader/react-dom' }, 26 | }, 27 | entry: [ 28 | 'core-js/stable', 29 | 'regenerator-runtime/runtime', 30 | SRC, 31 | ], 32 | output: { 33 | path: DIST, 34 | publicPath: '/', 35 | }, 36 | devtool: 'source-map', 37 | module: { 38 | rules: [ 39 | { 40 | test: /\.css$/, 41 | include: SRC, 42 | exclude: EXCLUDE_DEFAULT, 43 | use: (() => { 44 | if (MODE === 'development') { 45 | return [ 46 | 'style-loader', 47 | 'css-loader', 48 | { 49 | loader: 'postcss-loader', 50 | options: { 51 | plugins: () => ([Autoprefixer]), 52 | }, 53 | }, 54 | ] 55 | } 56 | return [ 57 | MiniCssExtractPlugin.loader, 58 | 'css-loader', 59 | { 60 | loader: 'postcss-loader', 61 | options: { 62 | plugins: () => ([Autoprefixer]), 63 | }, 64 | }, 65 | ] 66 | })(), 67 | }, 68 | { 69 | test: /\.jsx?$/, 70 | include: SRC, 71 | exclude: EXCLUDE_DEFAULT, 72 | use: { loader: 'babel-loader' }, 73 | }, 74 | ], 75 | }, 76 | plugins: [ 77 | new webpack.WatchIgnorePlugin(EXCLUDE_DEFAULT), 78 | new HtmlWebpackPlugin({ 79 | filename: DIST + '/index.html', 80 | template: SRC + '/index.ejs', 81 | }), 82 | new MiniCssExtractPlugin({ 83 | filename: '[name].[contenthash:4].css', 84 | }), 85 | new CopyWebpackPlugin( 86 | [ 87 | { 88 | from: SRC + '/assets/img/favicon.png', 89 | to: DIST, 90 | }, 91 | { 92 | from: SRC + '/assets/img', 93 | to: DIST + '/img', 94 | }, 95 | { 96 | from: SRC + '/assets/audio', 97 | to: DIST + '/audio', 98 | }, 99 | ], 100 | { 101 | ignore: ['.DS_Store'], 102 | }, 103 | ), 104 | ], 105 | } 106 | 107 | if (MODE === 'production') { 108 | config.output.chunkFilename = '[name].[chunkhash:4].js' 109 | config.output.filename = '[name].[chunkhash:4].js' 110 | config.optimization = { 111 | splitChunks: { chunks: 'initial' }, 112 | runtimeChunk: { name: 'manifest' }, 113 | } 114 | } 115 | 116 | if (MODE === 'development') { 117 | config.devServer = { 118 | historyApiFallback: true, 119 | disableHostCheck: true, 120 | stats: 'errors-only', 121 | overlay: true, 122 | hotOnly: true, 123 | watchOptions: { 124 | aggregateTimeout: 300, 125 | poll: 1000, 126 | ignored: EXCLUDE_DEFAULT, 127 | }, 128 | } 129 | config.plugins.push(new webpack.HotModuleReplacementPlugin()) 130 | } 131 | 132 | module.exports = config 133 | --------------------------------------------------------------------------------