Browse Source

readme fix + some changes (untested)

Sebastian Kreisel 3 years ago
parent
commit
87e1b4508b
4 changed files with 119 additions and 113 deletions
  1. 0 9
      README
  2. 9 0
      README.md
  3. 84 84
      index.html
  4. 26 20
      src/test/sad/pillar.coffee

+ 0 - 9
README

@@ -1,9 +0,0 @@
-(:
-
--------------------------------------------------------------------------------
-WHYILIKETREES
--------------------------------------------------------------------------------
-(*) why i do like trees
-(*) not quite recent versions might be hosted on
-    http://elfeck.com/games/whyiliketrees but no guarantee
-(*) once in a while I might stream programming on https://twitch.tv/elfeck

+ 9 - 0
README.md

@@ -0,0 +1,9 @@
+(:
+
+WHYILIKETREES
+================================================================================
+* why i do like trees
+* not quite recent versions might be hosted on
+  [elfeck.com](https://elfeck.com/games/whyiliketrees) but no guarantee
+* once in a while I might stream programming on
+  [twitch.tv/elfeck](https://twitch.tv/elfeck)

+ 84 - 84
index.html

@@ -1,89 +1,89 @@
 <!DOCTYPE html>
 <head>
-  <meta charset="utf-8">
-  <title>why I like trees</title>
-  <script type="text/javascript" src="whyiliketrees.js"></script>
-  <style>
-   html {
-     color: #eeeeee;
-     font-family: "sans serif";
-     background-color: #222222;
-   }
-   body {
-     width: 600px;
-     height: 100%;
-     margin: auto;
-     margin-top: 50px;
-   }
-   div#main {
-   }
-   canvas#canvas {
-     border-width: 1px;
-     border-style: solid;
-     border-color: transparent;
-     display: block;
-     margin: auto;
-   }
-   textarea#console {
-     overflow: hidden;
-     background-color: inherit;
-     font-family: inherit;
-     font-size: 12px;
-     color: #cccccc;
-     border-width: 1px;
-     border-style: solid;
-     border-color: #333333;
-     width: 100%;
-     height: 54px;
-     display: block;
-     margin: auto;
-     margin-top: 10px;
-   }
-   div.inf {
-     width: 50%;
-     height: 14px;
-     background-color: inherit;
-     font-family: inherit;
-     font-size: 12px;
-     color: #777777;
-     margin: auto;
-     margin-bottom: 2px;
-   }
-   div.controls {
-     font-family: inherit;
-     font-size: 11px;
-     text-align: center;
-     color: #777777;
-   }
-   div.inf1 {
-     float: left;
-     width: 60%;
-   }
-   div.inf2 {
-     overflow: hidden;
-     width: 40%;
-     text-align: right;
-   }
-  </style>
+	<meta charset="utf-8">
+	<title>why I like trees</title>
+	<script type="text/javascript" src="whyiliketrees.js"></script>
+	<style>
+	html {
+		color: #eeeeee;
+		font-family: "sans serif";
+		background-color: #222222;
+	}
+	body {
+		width: 600px;
+		height: 100%;
+		margin: auto;
+		margin-top: 50px;
+	}
+	div#main {
+	}
+	canvas#canvas {
+		border-width: 1px;
+		border-style: solid;
+		border-color: transparent;
+		display: block;
+		margin: auto;
+	}
+	textarea#console {
+		overflow: hidden;
+		background-color: inherit;
+		font-family: inherit;
+		font-size: 12px;
+		color: #cccccc;
+		border-width: 1px;
+		border-style: solid;
+		border-color: #333333;
+		width: 100%;
+		height: 54px;
+		display: block;
+		margin: auto;
+		margin-top: 10px;
+	}
+	div.inf {
+		width: 50%;
+		height: 14px;
+		background-color: inherit;
+		font-family: inherit;
+		font-size: 12px;
+		color: #777777;
+		margin: auto;
+		margin-bottom: 2px;
+	}
+	div.controls {
+		font-family: inherit;
+		font-size: 11px;
+		text-align: center;
+		color: #777777;
+	}
+	div.inf1 {
+		float: left;
+		width: 60%;
+	}
+	div.inf2 {
+		overflow: hidden;
+		width: 40%;
+		text-align: right;
+	}
+	</style>
 </head>
 <html>
-  <body>
-    <div id="main">
-      <div class="inf inf1" id="info1"></div>
-      <div class="inf inf2" id="info2"></div>
-      <div class="inf inf1" id="info3"></div>
-      <div class="inf inf2" id="info4"></div>
-      <div class="inf inf1" id="info5"></div>
-      <div class="inf inf2" id="info6"></div>
-      <canvas id="canvas"></canvas>
-      <textarea readonly id="console"></textarea>
-      <div class="controls" style="margin-top: 3px">
-	Controls: WASD, Space, Space+Shift, Arrow Keys<br>
-      </div>
-      <div class="controls" id="info7" style="font-size: 10px">
-	Toggle Debug: P<br>
-	Toggle Mouse Drag Controlled Camera Angle: I<br>
-      </div>
-    </div>
-  </body>
+	<body>
+		<div id="main">
+			<div class="inf inf1" id="info1"></div>
+			<div class="inf inf2" id="info2"></div>
+			<div class="inf inf1" id="info3"></div>
+			<div class="inf inf2" id="info4"></div>
+			<div class="inf inf1" id="info5"></div>
+			<div class="inf inf2" id="info6"></div>
+			<canvas id="canvas"></canvas>
+			<textarea readonly id="console"></textarea>
+			<div class="controls" style="margin-top: 3px">
+				Controls: WASD, Space, Space+Shift, Arrow Keys<br>
+			</div>
+			<div class="controls" id="info7" style="font-size: 10px">
+				Toggle Debug: P<br>
+				Toggle Mouse Drag Controlled Camera Angle: I<br>
+			</div>
+		</div>
+	</body>
 </html>

+ 26 - 20
src/test/sad/pillar.coffee

@@ -5,17 +5,28 @@ class window.Pillar
     @color = new Vec([1, 0, 0])
     @position = new Vec([0, 0.01, 0])
 
-    @initGeom()
+    @sinePillar()
     @initShader scene
     @initGfx scene
 
-  initGeom: ->
-    @line = new Line(@position.copy(), new Vec([0, 1, 0]))
-    @comps = []
-    for i in [0..4]
-      @comps.push new PillarComponent(@line, 0.01 + i * 2, 5 - i, 2)
-    console.log @comps
-    return
+  sinePillar: ->
+    n = 5
+    tresHeight = 10
+    totalHeight = 0
+    totalAngle = 0
+    line = new Line(@position, new Vec [0, 1, 0])
+
+    @segments = [Polygon.regularFromLine line, 1, n, -1.0]
+    while totalHeight < tresHeight
+      step = 0.5
+      totalHeight += step
+      w = (window.rndBetween(1.2, 1.83) + Math.sin(totalHeight * 0.2 * Math.PI)) * 0.8
+      totalAngle += window.rndBetween(0, 0.05) * Math.PI
+      excepAngle = if window.rndBetween(0, 1) < 0.2 then window.rndBetween(0, 0.5) * Math.PI else 0
+      poly = Polygon.regularFromLine(line.shiftBaseC(totalHeight), w, n, -1.0)
+      #poly.rotateAroundLine line, totalAngle
+      @segments.push poly
+    console.log @segments
 
   initShader: (scene) ->
     window.camera.addToProgram scene.fillShader, @uid
@@ -27,10 +38,13 @@ class window.Pillar
 
   initGfx: (scene) ->
     @prims = []
-    for comp in @comps
-      @prims = @prims.concat comp.bot.gfxAddFill(@color)
-      @prims = @prims.concat comp.top.gfxAddFill(@color)
-      @prims = @prims.concat c.gfxAddFill(@color) for c in comp.conn
+    @prims = @prims.concat @segments[0].gfxAddFill(@color)
+    @prims = @prims.concat @segments[@segments.length-1].gfxAddFill(@color)
+    for i in [0..@segments.length-2]
+      d = -1 #i % 4 == 0 ? 1.0 : -1.0
+      console.log d
+      connPolys = Polygon.connectPolygons(@segments[i], @segments[i + 1], d)
+      @prims = @prims.concat c.gfxAddFill(@color) for c in connPolys
 
     @dataSet = new GeomData @uid, scene.fillShader, @prims, GL.TRIANGLES
     scene.fillGeom.addData @dataSet
@@ -38,11 +52,3 @@ class window.Pillar
 
   doLogic: (delta) ->
     return
-
-class window.PillarComponent
-
-  constructor: (@line, @y, @w, @h) ->
-    @bot = Polygon.regularFromLine @line.shiftBaseC(@y), @w, 5
-    @top = Polygon.regularFromLine @line.shiftBaseC(@y + @h), @w, 5, -1.0
-    @conn = Polygon.connectPolygons @bot, @top
-    return