playing with react.js

i taught an intro to p5.js workshop earlier this summer, and a big part of what made it possible was jess klein and atul varma’s widget, which lets people play with p5.js sketches and see their changes in the browser without having to refresh the page.

i think it’s an amazing teaching tool, but it currently doesn’t support p5 libraries like p5.dom. this means we can’t incorporate video capture into widget views. ultimately, i’d love to contribute to the widget project and use p5.dom support to create some interactive documentation for kyle mcdonald’s computer vision examples. it’d also be great for making computer vision a little more accessible to beginners.

to contribute to the widget, i need to know some react so i’m playing around with atul’s react tutorial for p5 programmers. react seems really powerful in ways that i don’t totally understand yet. at this point, i’m trying to figure out how everything is wired up in a react program—syntax, which APIs are being referenced where and how, etc.

this code & video is just a slight change from the tutorial. from what i can tell, SVG has?/is? an API, which defines certain shapes like circle and rect. the function within the SVG tag, onClick, is a global event listener. i changed it from what was in the example, onMouseMove. things like clientY and clientX are part of another API; they’re built in (to what? idk) and have specific parameters/syntax rules that you have to follow. none of this is required for react programs, but this exercise is helpful for starting to learn structure and what references i might look to when i get stuck.

and here’s the example from the tutorial. the index.html file is the same, but there are some slight differences in the react-sketch.js file.

Leave a Reply