Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit c201df4

Browse filesBrowse files
bethanyaconnorbethanyaconnor
authored
Merge pull request #19 from code-dot-org/pond-model
Remove the shared state between the fish
2 parents ecbf1ed + 1912e1c commit c201df4
Copy full SHA for c201df4

1 file changed

+56-46Lines changed: 56 additions & 46 deletions

File tree

Expand file treeCollapse file tree
Open diff view settings
Filter options
  • frontend/packages/labs/oceans/src/utils/sketches
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎frontend/packages/labs/oceans/src/utils/sketches/fish.js‎

Copy file name to clipboardExpand all lines: frontend/packages/labs/oceans/src/utils/sketches/fish.js
+56-46Lines changed: 56 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -6,54 +6,55 @@ const BG_COLOR = '#021a61';
66

77
const BODY_CENTER_X = CANVAS_WIDTH / 2;
88
const BODY_CENTER_Y = (2 * CANVAS_HEIGHT) / 3;
9-
let body = {
10-
width: 200,
11-
height: 50,
12-
color: '#DC1C4B'
13-
};
14-
let fins = {
15-
color: '#87D1EE',
16-
tail: {
17-
width_percent: 0.03,
18-
height_percent: 0.2
19-
},
20-
top_fin: {
21-
width_percent: 0.3,
22-
height_percent: 0.1
23-
},
24-
side_fin: {
25-
width_percent: 0.1,
26-
height_percent: 0.3
27-
}
28-
};
29-
let eyes = {
30-
x_offset_ratio: 0.7,
31-
y_offset_ratio: 0.25,
32-
diameter: 25,
33-
pupil_diameter: 5
34-
};
35-
let mouth = {
36-
teeth: {
37-
num: 5,
38-
height: 5
39-
}
40-
};
419

42-
const findBodyYOffsetFromXOffset = xOffset => {
10+
const findBodyYOffsetFromXOffset = (body, xOffset) => {
4311
return Math.sqrt(
4412
Math.pow(body.height / 2, 2) *
4513
(1 - Math.pow(xOffset, 2) / Math.pow(body.width / 2, 2))
4614
);
4715
};
4816

49-
const findBodyXOffsetFromYOffset = yOffset => {
17+
const findBodyXOffsetFromYOffset = (body, yOffset) => {
5018
return Math.sqrt(
5119
Math.pow(body.width / 2, 2) *
5220
(1 - Math.pow(yOffset, 2) / Math.pow(body.height / 2, 2))
5321
);
5422
};
5523

5624
module.exports = p5 => {
25+
let body = {
26+
width: 200,
27+
height: 50,
28+
color: '#DC1C4B'
29+
};
30+
let fins = {
31+
color: '#87D1EE',
32+
tail: {
33+
width_percent: 0.03,
34+
height_percent: 0.2
35+
},
36+
top_fin: {
37+
width_percent: 0.3,
38+
height_percent: 0.1
39+
},
40+
side_fin: {
41+
width_percent: 0.1,
42+
height_percent: 0.3
43+
}
44+
};
45+
let eyes = {
46+
x_offset_ratio: 0.7,
47+
y_offset_ratio: 0.25,
48+
diameter: 25,
49+
pupil_diameter: 5
50+
};
51+
let mouth = {
52+
teeth: {
53+
num: 5,
54+
height: 5
55+
}
56+
};
57+
5758
p5.getKnnData = () => {
5859
return [
5960
body.width,
@@ -82,7 +83,7 @@ module.exports = p5 => {
8283

8384
p5.setBodyColor = color => {
8485
body.color = color;
85-
draw();
86+
//draw();
8687
};
8788

8889
p5.setEyeSize = diameter => {
@@ -126,11 +127,20 @@ module.exports = p5 => {
126127
const top_fin = fins.top_fin;
127128
const topFinWidth = top_fin.width_percent * body.width;
128129
const topFinHeight = top_fin.height_percent * body.height;
129-
const bodyYOffsetFromWidth = findBodyYOffsetFromXOffset(topFinWidth / 2);
130+
const bodyYOffsetFromWidth = findBodyYOffsetFromXOffset(
131+
body,
132+
topFinWidth / 2
133+
);
130134
p5.beginShape();
131-
p5.vertex(BODY_CENTER_X - topFinWidth / 2, BODY_CENTER_Y - bodyYOffsetFromWidth);
135+
p5.vertex(
136+
BODY_CENTER_X - topFinWidth / 2,
137+
BODY_CENTER_Y - bodyYOffsetFromWidth
138+
);
132139
p5.vertex(BODY_CENTER_X, BODY_CENTER_Y - body.height / 2 - topFinHeight);
133-
p5.vertex(BODY_CENTER_X + topFinWidth / 2, BODY_CENTER_Y - bodyYOffsetFromWidth);
140+
p5.vertex(
141+
BODY_CENTER_X + topFinWidth / 2,
142+
BODY_CENTER_Y - bodyYOffsetFromWidth
143+
);
134144
p5.endShape(p5.CLOSE);
135145

136146
// tail
@@ -140,7 +150,7 @@ module.exports = p5 => {
140150
const tailHeight = tail.height_percent * body.height;
141151
p5.beginShape();
142152
p5.vertex(
143-
BODY_CENTER_X - findBodyXOffsetFromYOffset(tailHeight / 4),
153+
BODY_CENTER_X - findBodyXOffsetFromYOffset(body, tailHeight / 4),
144154
BODY_CENTER_Y - tailHeight / 4
145155
);
146156
p5.vertex(
@@ -152,7 +162,7 @@ module.exports = p5 => {
152162
BODY_CENTER_Y + tailHeight / 2
153163
);
154164
p5.vertex(
155-
BODY_CENTER_X - findBodyXOffsetFromYOffset(tailHeight / 4),
165+
BODY_CENTER_X - findBodyXOffsetFromYOffset(body, tailHeight / 4),
156166
BODY_CENTER_Y + tailHeight / 4
157167
);
158168
p5.endShape(p5.CLOSE);
@@ -169,7 +179,7 @@ module.exports = p5 => {
169179
p5.beginShape();
170180
//p5.vertex(230, 190);
171181
const startX = BODY_CENTER_X;
172-
const startY = BODY_CENTER_Y + body.height * .35;
182+
const startY = BODY_CENTER_Y + body.height * 0.35;
173183
p5.vertex(startX, startY);
174184
p5.vertex(startX - sideFinWidth, startY - sideFinHeight / 3);
175185
p5.vertex(startX - sideFinWidth, startY + (2 * sideFinHeight) / 3);
@@ -182,7 +192,7 @@ module.exports = p5 => {
182192
const yOffset = 0.15 * body.height;
183193
const mouthStartY = BODY_CENTER_Y + yOffset;
184194
const mouthStartX = Math.floor(
185-
BODY_CENTER_X + findBodyXOffsetFromYOffset(yOffset)
195+
BODY_CENTER_X + findBodyXOffsetFromYOffset(body, yOffset)
186196
);
187197
const mouthWidth = 0.25 * body.width;
188198
const mouthHeight = 0.12 * body.height;
@@ -191,7 +201,7 @@ module.exports = p5 => {
191201
p5.vertex(mouthStartX - mouthWidth, mouthStartY);
192202
const bottom_lip_start = [mouthStartX - mouthWidth, mouthStartY];
193203
const bottom_lip_end = [
194-
BODY_CENTER_X + findBodyXOffsetFromYOffset(yOffset + mouthHeight),
204+
BODY_CENTER_X + findBodyXOffsetFromYOffset(body, yOffset + mouthHeight),
195205
mouthStartY + mouthHeight
196206
];
197207

@@ -200,14 +210,14 @@ module.exports = p5 => {
200210
bottom_lip_start[1] + (bottom_lip_end[1] - bottom_lip_start[1]) * 0.85,
201211
bottom_lip_start[0] + (bottom_lip_end[0] - bottom_lip_start[0]) * 0.67,
202212
bottom_lip_start[1] + (bottom_lip_end[1] - bottom_lip_start[1]),
203-
BODY_CENTER_X + findBodyXOffsetFromYOffset(yOffset + mouthHeight),
213+
BODY_CENTER_X + findBodyXOffsetFromYOffset(body, yOffset + mouthHeight),
204214
mouthStartY + mouthHeight
205215
);
206216
p5.bezierVertex(
207217
285,
208-
findBodyYOffsetFromXOffset(85) + BODY_CENTER_Y,
218+
findBodyYOffsetFromXOffset(body, 85) + BODY_CENTER_Y,
209219
290,
210-
findBodyYOffsetFromXOffset(90) + BODY_CENTER_Y,
220+
findBodyYOffsetFromXOffset(body, 90) + BODY_CENTER_Y,
211221
mouthStartX,
212222
mouthStartY
213223
);

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.