-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathriverKanies_model.html
112 lines (91 loc) · 3.25 KB
/
riverKanies_model.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
<html>
<head>
<title>Art / Dev - Motion 2</title>
<script src="p5.min.js"></script>
<script>
var IMAGE_WIDTH = 640; // Don't change this.
var IMAGE_HEIGHT = 640; // Don't change this.
//may need to scale models based on different unit values
//just assume all same scale for now
var unit = 0.2;
//========= Parent Model
function setup() {
createCanvas(IMAGE_WIDTH, IMAGE_HEIGHT); // don't change this
//call all setup methods here
models = [];
setupFuncs = [setupModel];//everyone's setup functions will go here
drawFuncs = [drawModel];//everyone's draw functions will go here
//loop through for each model and init the model with it's setup function:
for(var i=0;i<setupFuncs.length;i++){
models[i] = setupFuncs[i](unit);//all sizing values: radius, magnitue, lenght, velocity, ... should be multiplied by a unit that can be controlled from the outside
}
}
function draw() {
var origins = [{x:320,y:100}];
for(var i=0; i<models.length;i++){
drawFuncs[i](models[i],origins[i],unit);
}
}
//=========Individual Models
function setupModel(unit){//every model has it's onw setupModel function
//no globals! all 'global' variables must be decalred within your setup function
//and should be namespaced as part of your individual model object (m below)
var m = {};
//m.o={x:320,y:100};
m.particleCount = 200;
m.particles = [];
m.particleCounter = 0;
for (var i=0; i<m.particleCount; i++) {
var magnitude = random(0,2)*unit;//note use of unit
var angle = random(0,TWO_PI);
m.particles[i] = {
x:10000,
y:10000,
vx: magnitude*cos(angle),
vy: magnitude*sin(angle),
r: random(5,12)*unit,//note use of unit
hue: random(0.05,0.1),
};
}
//return the model object created in your setupModel function,
//it will be added to the models array
return m;
}
function drawModel(m,o,unit){
//*** this was in the global draw function, include this kind of stuff in your individual drawModel function instead
noStroke()
colorMode(HSB, 1)
//**
fill(.5,1,.4,0.01);
rect(0,0,width,height);
var magnitude = random(0,2)*unit;//note use of unit
var angle = random(0,TWO_PI);
var currentParticle = m.particles[m.particleCounter];
m.particleCounter = (m.particleCounter+1) % m.particleCount;
currentParticle.x = o.x;//320//mouseX;
currentParticle.y = o.y;//100//mouseY;
currentParticle.vx = magnitude*cos(angle)
currentParticle.vy = magnitude*sin(angle)
m.particles.forEach(drawParticle);
//move all functions into your drawModel function (to make my job easier and avoid naming conflicts)
function calculateParticle(particle) {
particle.x += particle.vx
particle.y += particle.vy
particle.vy += .01*unit
}
function drawParticle(particle) {
calculateParticle(particle)
fill(particle.hue,.5,1,0)//hue,sat,bright,alpha
ellipse(particle.x,particle.y,particle.r,particle.r)
}
}
// =============== STOP WORKING HERE ==========================
</script>
<style>
body { padding: 0; margin: 5% 0 0; background-color: #666;}
canvas { margin: 0 auto; display:block; }
</style>
</head>
<body>
</body>
</html>