-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgraphics.html
More file actions
119 lines (112 loc) · 4.51 KB
/
graphics.html
File metadata and controls
119 lines (112 loc) · 4.51 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS Styles -->
<link rel="stylesheet" href="css/styles.css" />
<!-- Favicons -->
<!--<link
rel="apple-touch-icon"
sizes="180x180"
href="assets/icons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="assets/icons/favicon-32x32.png"
/>->>
<!-- Animate CSS CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>Graphics Work</title>
</head>
<body class="gamepage">
<nav>
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<div class="dropdown">
<button class="dropbtn nav-link"><a href="index.html#projects">Stuff I've Made</a>
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="hookfoot.html" class="nav-link">Captain Hookfoot</a>
<a href="visvi.html" class="nav-link">Visvi</a>
<a href="wormgame.html" class="nav-link">Funny Worm Game</a>
<a href="bearswithguns.html" class="nav-link">Bears with Guns</a>
<a href="eden.html" class="nav-link">EDEN</a>
<a href="thrillertheater.html" class="nav-link">Thriller Theater</a>
<a href="shadow.html" class="nav-link">Shadow Mesh Generator</a>
<a href="graphics.html" class="nav-link">Graphics Programming</a>
<a href="wilderness.html" class="nav-link">Wilderness Supervision</a>
<a href="bestbefore.html" class="nav-link">Best Before 90 Seconds</a>
<a href="lucifur.html" class="nav-link">Lucifur</a>
</div>
</div>
<!--<li><a href="index#contact">Contact</a></li>-->
<li><a href="Demetrius Nekos Resume.pdf">Resume</a></li>
</ul>
<button class="burger-menu" id="burger-menu">
<ion-icon class="bars" name="menu-outline"></ion-icon>
</button>
</nav>
<main>
<div class="wrapper">
<div class="left">
<div class="info">
<h2>Raymarched Lightcycle</h1>
<p>For my Graphics midterm I learned and utilized the raymarching algorithm to recreate the Lightcycle from the 1982 film TRON. It is built in a fragment shader in ShaderToy. It has two buffers, which handle data from the keyboard and mouse to allow you to move around the environment. The model itself is made of over 40 shapes.</p>
</div>
</div>
<div class="right">
<iframe width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/3sVyzc?gui=true&t=10&paused=true&muted=false" allowfullscreen></iframe>
</div>
</div>
<div class="wrapper">
<div class="left">
<div class="info">
<h2>Particle Generator</h1>
<p>My Graphics final was a particle system shader built in SHADERed. It uses a compute shader to calculate and store the particle data and apply a vector field to the particles. A geometry shader is then used to convert the particle points in to planes for to be textured by the fragment shader. Simplex noise is also used to randomly create the particles within a circle and to give randomized lifetimes and speeds.</p>
</div>
</div>
<div class="right">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Vs6OGY0BNcM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</main>
<!-- Scroll to top -->
<i class="scroll-up" id="scroll-up">
<img
src="https://img.icons8.com/color/480/000000/circled-up--v3.png"
class="socicon up-arrow"
alt="scroll-up"
/></i>
<!-- Footer section -->
<footer>
<p class="copy">© Copyright 2021</p>
<p>You can find me at:</p>
<ul class="social-links">
<li><a href="https://github.com/Dnekos">Github</a></li>
<li><a href="https://dnekos.itch.io/">Itch.io</a></li>
<li><a href="https://www.linkedin.com/in/demetrius-nekos/">LinkedIn</a></li>
</ul>
<p>Or, you can <a href="mailto:demetrius.nekos@mymail.champlain.edu">send me an email</a>.</p>
</p>
</footer>
<!-- Website scripts -->
<script src="js/app.js"></script>
<!-- Ion icons scripts -->
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
</body>
</html>