Skip to content

Commit 5a6b46b

Browse files
xiaohkxiaohk
committed
Add sheep jumping, and add description
1 parent 8db75a2 commit 5a6b46b

File tree

3 files changed

+54
-7
lines changed

3 files changed

+54
-7
lines changed

‎project7/graphicstown.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,16 +36,19 @@ it sets up the main function to be called on window.onload
3636
window.onload = function() {
3737
"use strict";
3838

39+
// I want to add description after the canvas
40+
var des = document.getElementById("description")
41+
3942
// set up the canvas and context
4043
var canvas = document.createElement("canvas");
4144
canvas.setAttribute("width",600);
4245
canvas.setAttribute("height",600);
43-
document.body.appendChild(canvas);
46+
document.body.insertBefore(canvas, des);
4447

4548
// make a place to put the drawing controls - a div
4649
var controls = document.createElement("DIV");
4750
controls.id = "controls";
48-
document.body.appendChild(controls);
51+
document.body.insertBefore(controls, des);
4952

5053
// a switch between camera modes
5154
var uiMode = document.createElement("select");

‎project7/index.html‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
-->
66
<head>
77
<meta charset="UTF-8">
8-
<title>GraphicsTown JS 2015!</title>
8+
<title>Brokeback Mountain</title>
99
</head>
1010
<body>
1111
<!-- load this stuff first -->
@@ -205,6 +205,7 @@
205205
float xs = step(1.0,mod(outPos.x,2.0));
206206
float zs = step(1.0,mod(outPos.z,2.0));
207207
float ss = (xs>.5) ? zs : 1.0-zs;
208+
ss = 1.0-zs;
208209
gl_FragColor = mix(vec4(0.5,0.5,0.5,1),
209210
vec4(0.3,0.5,0.4,1),
210211
ss
@@ -213,4 +214,36 @@
213214
}
214215
</script>
215216

216-
</html>
217+
<body>
218+
<p id="description">
219+
<h1> Description</h1>
220+
The inspiration for this project is Ang Lee's movie "Brokeback Mountain".
221+
Here are some scenes of the movie in case you haven't watched it.
222+
<br><br>
223+
<a ><img src="https://i.imgur.com/7edHlEu.jpg"/></a>
224+
<a ><img src="https://i.imgur.com/IlayTwo.jpg"/></a>
225+
<br><br>
226+
<a ><img src="https://i.imgur.com/gEIubUe.jpg"/></a>
227+
<br><br>
228+
So, I try to implement some of the "brokebackish" features: Tent, Campfire, Cowboys, Sheeps, Pine trees, and some Trunks.
229+
230+
<h1> Implementing comments </h1>
231+
<h2> Models Created by Me </h2>
232+
<ul>
233+
234+
<li> <b> Campfire: </b> I added randomness to generate the size of stones around the campfire, so it looks more natural and asymmetric. The design of middle woods is also used in the framework of the tent. </li>
235+
<li> <b> Tent: </b> I added some poles around the tent to make it more like the one in the movie. I also added a special shader (High specular light) to the pole, for its metallic looking.</li>
236+
<li> <b> Pine trees: </b> I am very proud that I designed a dynamic way to draw different pine trees. If you look the trees in detail, you will find each tree is special, in terms of the shape, layer and height.</li>
237+
<li> <b> Trunks: </b> They are just basic cylinders.</li></ul>
238+
239+
240+
<h2> Models Found on Web </h2>
241+
<ul>
242+
<li> <b> Cowboy: </b> Still need to figure out how to map the texture.</li>
243+
<li> <b> Sheep: </b> I added a path and animation for the sheeps.</li></ul>
244+
245+
246+
247+
</p>
248+
</body>
249+
</html>

‎project7/loaded_objects/sheep.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ var v3 = v3 || twgl.v3;
2626
this.rotatingPos = position
2727
this.theta = 0
2828
this.backing = false
29+
this.jump = 0
30+
this.yOffset = 0
2931
}
3032

3133
// One of the object necessary function
@@ -64,19 +66,28 @@ var v3 = v3 || twgl.v3;
6466
// Move sheeps using real time
6567
var zOffset = (Number(drawingState.realtime - this.now) / 1000.0) % 8
6668

69+
if (Math.floor(Number(drawingState.realtime)) % 6 == 0){
70+
if (this.jump != Math.floor(Number(drawingState.realtime))){
71+
this.yOffset = Math.random() * 0.2
72+
this.jump = Math.floor(Number(drawingState.realtime))
73+
}
74+
}
75+
6776
if (this.backing){
68-
var newPosition = [this.rotatingPos[0], this.rotatingPos[1],
77+
var newPosition = [this.rotatingPos[0], this.rotatingPos[1] +
78+
this.yOffset,
6979
this.rotatingPos[2] - zOffset]
7080
} else {
71-
var newPosition = [this.rotatingPos[0], this.rotatingPos[1],
81+
var newPosition = [this.rotatingPos[0], this.rotatingPos[1] +
82+
this.yOffset,
7283
this.rotatingPos[2] + zOffset]
7384
}
7485

7586
if (zOffset > 7 && !this.rotating){
7687
this.backing = false
7788
this.rotating = true
7889
this.now = drawingState.realtime
79-
this.rotatingPos = newPosition
90+
this.rotatingPos = [newPosition[0], 0, newPosition[2]]
8091
}
8192

8293
if (this.rotating){

0 commit comments

Comments
 (0)