I recently started exploring p5js to up my math game a little and practice per-pixel manipulation. I picked p5js because I like the interactivity and real-time feedback, it has an easy syntax and it's easy to test the code in either the web-editor or with the processing app (using the p5js plugin).
After some fiddling around the "finished product" can distort any image using noise and the mouse position:
![Transform with MousePos](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9fcd4f23-a447-431a-87ca-4fd9a25617e9%2F2a3df63f-29ca-485a-860f-8837603ad6b5%2Fstag_02.gif%3Fid%3Dee2a4061-f754-4962-acb8-bbcdb7729386%26table%3Dblock%26spaceId%3D9fcd4f23-a447-431a-87ca-4fd9a25617e9%26expirationTimestamp%3D1722016800000%26signature%3DxuZ1-5HjdBjFJlqyulcQLAdUJZySJ-awKBf2p7xuX7U?table=block&id=ee2a4061-f754-4962-acb8-bbcdb7729386&cache=v2)
MousePos
![Transform with MousePos*noise](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F9fcd4f23-a447-431a-87ca-4fd9a25617e9%2Fec6a621d-19cb-453a-a1d7-457069bcd08e%2Fstag_03.gif%3Fid%3Da33e7e1c-a31e-437e-ba9b-1aa6f388512a%26table%3Dblock%26spaceId%3D9fcd4f23-a447-431a-87ca-4fd9a25617e9%26expirationTimestamp%3D1722016800000%26signature%3DeFNXIEk1QMi83EebnplF9TLQZDK_yc2y9hH8gQYepXw?table=block&id=a33e7e1c-a31e-437e-ba9b-1aa6f388512a&cache=v2)
MousePos*noise
In the process I realized that it might not be the best solution for advanced image manipulation because it gets slow - even with small images. So I spent a large portion of the time on performance optimization which involved writing replacements for the built in get and set functions:
function fget(x, y, src=pixels) {
x = parseInt(x);
y = parseInt(y);
let off = ((y * width) + (x)) * pxd * 4;
return [
src[off],
src[off + 1],
src[off + 2],
src[off + 3]
];
}
function fset(x, y, col, src=pixels) {
x = parseInt(x);
y = parseInt(y);
let off = ((y * width) + (x)) * pxd * 4;
src[off] = col[0];
src[off + 1] = col[1];
src[off + 2] = col[2];
src[off + 3] = col[3];
}
If you feel like playing around with it you can find the p5.js source here.