-
Notifications
You must be signed in to change notification settings - Fork 7
/
P5L_p5.glitch-webcam.html
96 lines (79 loc) · 1.85 KB
/
P5L_p5.glitch-webcam.html
1
2
3
4
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
<head>
<title>p5.glitch-webcam</title>
<meta charset="utf-8">
<!-- Compiled w/ P5LIVE, http://github.com/ffd8/p5live -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/addons/p5.sound.min.js"></script>
<style type="text/css">
body{
margin:0;
overflow:hidden;
}
canvas{
position:fixed;
top:0;
left:0;
z-index:-1;
width:100vw;
height:100vh;
margin:0;
}
</style>
<script type="text/javascript">
// eco-mode = only render if window focused
window.onblur = function () {
noLoop()
}
window.onfocus = function () {
loop();
}
</script>
<script type="text/javascript" src="includes/libs/p5.glitch.js"></script>
<script type="text/javascript">
//p5.glitch-webcam
// p5.glitch-webcam
// cc teddavis.org 2020
let libs = ["includes/libs/p5.glitch.js"];
let glitch, capture, w = 320, h = 240;
function setup() {
capture = createCapture(VIDEO);
capture.size(w, h);
capture.hide();
createCanvas(windowWidth, windowHeight);
background(0);
imageMode(CENTER);
glitch = new Glitch();
glitch.pixelate(1);
}
function draw() {
if(frameCount % 3 === 0) {
if(!mouseIsPressed){
glitch.loadImage(capture);
}
// map mouseX to # of randomBytes() + mouseY to limitBytes()
glitch.limitBytes(map(mouseY, 0, height, 0, 1));
glitch.randomBytes(map(mouseX, 0, width, 0, 100));
glitch.buildImage();
}
image(glitch.image, width / 2, height / 2, glitch.width, glitch.height)
}
/* CUSTOM FUNCTIONS FOR P5LIVE */
// keep fullscreen if window resized
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
// custom ease function
function ease(iVal, oVal, eVal){
return oVal += (iVal - oVal) * eVal;
}
// processing compatibility
function println(msg){
print(msg);
}
</script>
</head>
<body>
</body>
</html>