-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsketch2.html
132 lines (114 loc) · 4.43 KB
/
sketch2.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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mycelial Growth (Study)</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;600&display=swap" rel="stylesheet">
<link href="./style.css?v=3" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"></script>
</head>
<body>
<div id="container">
<div id="canvasFrame">
<div id="mainCanvas"></div>
<div id="canvasOutput">
Click on the screen to add new blooms
</div>
</div>
<div id="detailsFrame">
<div id="detailsTitle">Mycelial Growth (Study)</div>
<div id="detailsBlurb">
Using P5.JS to explore mycelial growth patterns.
The fungus hyphae bloom outward and split looking for food.
This is the algorithm study for what is used in the next project, "Mycelial Portaits"
</div>
<button id="btnGithub" onclick="location.href='https://github.com/mrharfang';"></button>
</div>
<div id="projectsFrame">
<input type="radio" onclick="window.location='index.html';" title="Gray-Scott Reactions"/>
<input type="radio" onclick="window.location='sketch_lines.html';" title="THREE.JS Sketch Lines"/>
<input type="radio" checked title="Study: Mycelial Growth"/>
<input type="radio" onclick="window.location='sketch3.html';" title="Mycelial Portraits"/>
</div>
<div id="footerFrame">
RICKBARRAZA.COM
</div>
</div>
<script>
let sketch = function(p) {
var heads = [];
class Head {
constructor(_x, _y, _size, _life) {
this.x = _x;
this.y = _y;
this.dx = 3 * (Math.random() - Math.random());
this.dy = 3 * (Math.random() - Math.random());
this.size = _size;
this.life = _life;
}
}
p.setup = function() {
for ( var i = 0; i < 3; i++ ) {
var temp = new Head(.5*930, .5*600, 10 + Math.random()*10, 60 + Math.random() * 40);
heads.push(temp);
}
with (p) {
createCanvas(930, 600);
stroke(255, 100);
}
};
p.mousePressed = function() {
var temp = new Head(p.mouseX, p.mouseY, 10 + Math.random()*10, 60 + Math.random() * 40);
heads.push(temp);
}
function checkLife(head) {
return head.life > 0;
}
p.draw = function() {
with (p) {
//p.background(0,0,0,1);
var newHeads = [];
for ( var i = 0; i < heads.length; i++ ) {
var temp = heads[i];
// DO WE NEED A SPAWN?
if ( Math.random() < .02 && heads.length < 500 && temp.life > 10) {
var spawn = new Head(temp.x, temp.y,
temp.size * (temp.life / 100.0),
temp.life);
newHeads.push(spawn);
}
temp.x = temp.x < 0 ? 0 : temp.x;
temp.x = temp.x > 930 ? 930 : temp.x;
temp.y = temp.y < 0 ? 0 : temp.y;
temp.y = temp.y > 600 ? 600 : temp.y;
temp.life -= .25;
var size = temp.size * (temp.life / 100.0)
ellipse(temp.x, temp.y, size, size);
temp.x += temp.dx;
temp.y += temp.dy;
temp.dx += .5*(random() - random());
temp.dy += .5*(random() - random());
temp.dx *= .98;
temp.dy *= .98;
}
heads = heads.filter(checkLife);
for ( var i =0; i < newHeads.length; i++ ) {
heads.push(newHeads[i]);
}
newHeads = [];
}
};
function segment(x, y, a) {
p.push();
p.translate(x, y);
p.rotate(a);
p.line(0, 0, segLength, 0);
p.pop();
}
};
new p5(sketch, 'mainCanvas');
</script>
</body>
</html>