p5.js Project | Notion

Project Requirements

[ ] Create a p5.js account and set up the browser so that you can save sketches on the site.
[ ] Choose 3 examples that you find on the p5 site or associated libraries and reference. Choses sketches that are complicated and detailed enough to have various elements that can be changed by modifying the variables in the code.
[ ] For each of the 3 examples modify the code in some way that significant changes to the timing, responsiveness aesthetics and functionality. Use the reference library to learn about at least one function for each sketch. Save a few variations for each sketch.
[ ] Through this work begin to identify how the functions run, and what the different properties and variables are effecting the sketch - research these by studying the p5.js program flow page and any other related tutorials until you are able to identify which chunks of code are responsible for the visible or auditory aspects of the sketch.

Name	Email Address	Sketch 1	Sketch 1 Reference	Sketch 2	Sketch 2 Reference	Sketch 3	Sketch 3 Reference
Wilson, Victoria	[email protected]
Xu, Dingyi	[email protected]	<iframe src="https://editor.p5js.org/aisaka0531/full/awIHDDlBK"></iframe>		@Anonymous p5sketch updates<iframe src="https://editor.p5js.org/aisaka0531/full/WeVHrlTJx"></iframe>
Liu, Lindsay	[email protected]	<iframe src="https://editor.p5js.org/lindsayliu1010/full/ivVHfXdK3"></iframe>	https://p5js.org/examples/input-keyboard.html	<iframe src="https://editor.p5js.org/lindsayliu1010/full/RTDzPmNgs"></iframe>	inspo1: https://p5js.org/examples/motion-linear.html inspo2:https://p5js.org/examples/hello-p5-simple-shapes.html	<iframe src="https://editor.p5js.org/lindsayliu1010/full/RTDzPmNgs"></iframe>	https://p5js.org/examples/motion-circle-collision.html
McFarlane, Simone	[email protected]	<iframe src="https://editor.p5js.org/simonen/full/NNJ0E7Gb8"></iframe>	https://p5js.org/examples/interaction-kaleidoscope.html	<iframe src="https://editor.p5js.org/simonen/full/x535EC0C1"></iframe>	https://p5js.org/examples/3d-multiple-lights.html	<iframe src="https://editor.p5js.org/simonen/full/IprsiOk64"></iframe>	https://p5js.org/examples/3d-blur-using-framebuffer-depth.html
Ni, Jingcheng	[email protected]
Sun, Yijia	[email protected]	<iframe src="https://editor.p5js.org/evvvvvvva0504/full/HGBpxAQRA"></iframe>	https://editor.p5js.org/kate_alexandrite/sketches/vPlXPpx2p
Wen, Yili	[email protected]	https://editor.p5js.org/AWYGELL/sketches/1tGnjTsXX
Xu, Flora	[email protected]
Yang, Ellen	[email protected]
Zhang, Yiteng	[email protected]
Zhang, Yiyang	[email protected]	https://editor.p5js.org/YiyangZhangyz738/full/XFU6erYgM	https://bmoren.github.io/p5js-cheat-sheet/zh.html
Zhou, Zelo	[email protected]

home | p5.js

Creating a Local p5.js Project | Codecademy

Examples:

p5.js Web Editor

https://editor.p5js.org/kate_alexandrite/sketches/QnNZcvCmd

(shaders!)

p5.js shaders

GitHub - aferriss/p5jsShaderExamples: A collection of heavily commented WebGL shaders created with p5.js and GLSL