Download (choose the recommended one on the left)
npx create-react-app cc-workshop-demo
cd cc-workshop-demo;npm start
npm i react-p5-wrapper —save
vi package.json
and you should be able to see the following line
"react-p5-wrapper": "0.0.4",
:wq
cd ..;open .
import React, { Component } from 'react';
import './App.css';
//dependencies
import P5Wrapper from 'react-p5-wrapper';
class App extends Component {
render() {
return (
<div className="App">
</div>
);
}
}
export default App;
12. Right click on the src folder icon and create a new file, name it “sketch.js”, and then copy the following code
export default function sketch (p) {
p.preload = function () {
}
p.setup = function () {
p.createCanvas(600, 400, p.WEBGL);
};
p.myCustomRedrawAccordingToNewPropsHandler = function (props) {
};
p.draw = function () {
p.background(255);
p.rotateX(p.frameCount * 0.01);
p.rotateY(p.frameCount * 0.01);
p.box(50);
};
};
import sketch from './sketch';
And the following code below line 11
<P5Wrapper sketch={sketch}/>
Due to security concern, our employee laptops (Beijing Office) do not support serial I/O (our keyboards are the only source of input), which means if you want to get hands on Part B, please bring your own laptop to the workshop, I will guide you through the rest of the installation steps.
Sorry for the inconvenience.