cmbuhler.github.io/graphics.html at master · cmbuhler/cmbuhler.github.io · GitHub

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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!doctype html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/custom.css">
    <title>Chase Buhler</title>
</head>
<body class="w3-light-gray">
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-blue w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:300px;font-weight:bold;" id="mySidebar"><br>
    <!--<a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-bottomleft" style="width:100%;font-size:22px">Close Menu</a>-->
    <a href="javascript:void(0)" class="w3-button w3-xlarge w3-hide-large w3-blue w3-margin-right w3-display-topleft" style="margin: 10px 15px 0px;" onclick="w3_close()">✖</a>
    <div class="w3-container">
        <img src="images/me2.jpg" class="w3-circle w3-hide-medium w3-hide-small" alt="Chase" width="175">
        <h3 class="w3-padding-32"><b>Chase Buhler</b></h3>
    </div>
    <div class="w3-bar-block">
        <a href="index.html" onclick="w3_close()" class="w3-bar-item w3-button">Home</a>
        <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-light-gray">Graphics</a>
        <a href="music.html" onclick="w3_close()" class="w3-bar-item w3-button">Music</a>
    </div>
</nav>

<!-- Top menu on small screens -->
<header class="w3-container w3-top w3-hide-large w3-blue w3-xlarge w3-padding">
    <a href="javascript:void(0)" class="w3-button w3-blue w3-margin-right" onclick="w3_open()">☰</a>
    <span><a href=index.html style="text-decoration: none;">Chase Buhler</a></span>
</header>

<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>

<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:340px;margin-right:40px">
    <!-- Graphics -->
    <div class="w3-container" style="margin-top:80px" id="showcase">
        <h1 class="w3-xxlarge w3-text-blue"><b>About my Graphics</b></h1>
        <hr class="w3-round big-hr">
        <p>
            Computer Animation has been something I have really enjoyed watching for a long time. I have seen every film from Disney, Pixar,
            Dreamworks, etc. During my degree in computing science I began to really enjoy the science behind 3D computer graphics and have
            since spent a lot of time self-teaching myself 3D rendering concepts and learning more about the history of the field. I took a few
            courses as an introduction to 3D modelling and animation, but most of my work has been done as a hobby.<br/>
            <br/>
            During school, I spent some of my free time reading about 3D computer science topics while trying out some simple projects. I graduated
            in the middle of the COVID-19 pandemic and found myself with a lot of time on my hands. I decided to use that time to actually learn to
            3D model and even animate. <br/>
            <br/>
            I am still learning a lot each day, and I am having a lot of fun with this hobby. I have started by using Blender, and probably will for
            the forseeable future. Blender is an absolutly amazing tool with an even more amazing community. I hope to one day begin contributing to
            it's development as I learn to use it to make art. Keep scrolling if you would like to see some of my work
            and the progress I have made!
        </p>
        <h1 class="w3-xxlarge w3-text-blue"><b>Images</b></h1>
        <hr class="w3-round big-hr">
        <div class="w3-row">
            <!-- populated in the script at the bottom -->
            <div id="left-column" class="w3-third">

            </div>
            <div id="mid-column" class="w3-third">

            </div>
            <div id="right-column" class="w3-third">

            </div>
        </div>


        <!-- CONTACT -->
        <h1 class="w3-xxlarge w3-text-blue"><b>Contact</b></h1>
        <hr class="w3-round big-hr">
        <h4>Personal</h4>
        <a href="https://twitter.com/ChaseBuhler" class="fa fa-twitter"></a>
        <h4>Professional</h4>
        <a href="https://www.linkedin.com/in/chase-buhler/" class="fa fa-linkedin"></a>
        <a href="https://github.com/cmbuhler" class="fa fa-github"></a>
        <script type="text/javascript" language="javascript">
            // Email obfuscator script 2.1 by Tim Williams, University of Arizona
            // Random encryption key feature coded by Andrew Moulden
            // This code is freeware provided these four comment lines remain intact
            // A wizard to generate this code is at http://www.jottings.com/obfuscator/
            { coded = "tguhcXxk@hiXuxkWi.ti"
                key = "UcRbnAEHirXPmypSxCMw7tJuQZ1N3kD9gKOB85f2jWYh6sLzdGa4l0oFvqeVIT"
                shift=coded.length
                link=""
                for (i=0; i<coded.length; i++) {
                    if (key.indexOf(coded.charAt(i))==-1) {
                        ltr = coded.charAt(i)
                        link += (ltr)
                    }
                    else {
                        ltr = (key.indexOf(coded.charAt(i))-shift+key.length) % key.length
                        link += (key.charAt(ltr))
                    }
                }
                document.write("<a href='mailto:"+link+"' class='fa fa-envelope'></a>")
            }
        </script><noscript>Sorry, you need Javascript on to email me.</noscript>
    </div>

    <!-- End page content -->
</div>

<!-- W3.CSS Container -->
<!--<div class="w3-green w3-container w3-padding-32" style="margin-top:75px;padding-right:58px"><p class="w3-right">Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-opacity">w3.css</a></p></div>-->
<template id="image-template">
    <div class="image-box">
        <a class="image-link" href=""><img src="" width="100%"/></a>
        <p class="caption"></p>
    </div>
</template>
<template id="vid-template">
    <div class="image-box">
            <video width="100%" controls loop>
                <source src="" type="video/mp4">
            </video>
        <p class="caption"></p>
    </div>
</template>

<script>
    // Script to open and close sidebar
    function w3_open() {
        document.getElementById("mySidebar").style.display = "block";
        document.getElementById("myOverlay").style.display = "block";
    }

    function w3_close() {
        document.getElementById("mySidebar").style.display = "none";
        document.getElementById("myOverlay").style.display = "none";
    }

    // Modal Image Gallery
    function onClick(element) {
        document.getElementById("img01").src = element.src;
        document.getElementById("modal01").style.display = "block";
        var captionText = document.getElementById("caption");
        captionText.innerHTML = element.alt;
    }

    function createImageFromTemplate(image, caption, parentElement){
        let template = document.getElementById("image-template");
        let clone = template.content.cloneNode(true);
        clone.querySelector('.image-box .image-link').href = image;
        clone.querySelector('.image-box .image-link img').src = image;
        clone.querySelector('.image-box .caption').innerHTML = caption;
        parentElement.appendChild(clone);
    }
    function createVideoFromTemplate(vid, caption, parentElement){
        let template = document.getElementById("vid-template");
        let clone = template.content.cloneNode(true);
        clone.querySelector('.image-box video source').src = vid;
        clone.querySelector('.image-box .caption').innerHTML = caption;
        parentElement.appendChild(clone);
    }

    //Load All Images
    let l = document.getElementById("left-column");
    let m = document.getElementById("mid-column");
    let r = document.getElementById("right-column");

    createImageFromTemplate('images/Truck.png', 'My first render EVER that I did on my own.', l);
    createImageFromTemplate('images/Far.png', 'My chess set from an introduction Blender Course.', m);
    createImageFromTemplate("images/King.png", "Closer shot of the king.", m);
    createImageFromTemplate("images/Knights2k.png", "Closer shot of the knights.", m);
    createImageFromTemplate("images/bowling2.png", "My bowling ball scene from the intro course.", r);
    createImageFromTemplate("images/smash.png", "My bowling ball scene from the intro course.", r);
    createImageFromTemplate("images/FirstHumanRig.png", "First time rigging and posing a character I modeled.", l);
    createImageFromTemplate("images/HumanRig2.png", "Another pose.", l);
    createImageFromTemplate("images/beardedHead.png", "A random low-poly guy I made.", r);
    createImageFromTemplate("images/DonutNoIcing.png", "My Donut following BlenderGuru's tutorial.", l);
    createImageFromTemplate("images/CoffeeWIP.png", "My Coffee Cupt following BlenderGuru's tutorial.", l);
    createImageFromTemplate("images/DonutNTeaStill.png", "Completed donut scene with a Plate, Spoon, and some Sugar Cubes.", l);
    createVideoFromTemplate("videos/Ball.mp4", "My first bouncing ball animation.", m);
    createVideoFromTemplate("videos/Ocean.mkv", "A rendering using Blender's Ocean Modifier.", r);
    createVideoFromTemplate("videos/banner.mkv", "A banner in the wind. Trying out cloth simulation.", m);
    createImageFromTemplate("images/CabinWIP1.png", "A work in progress render of a cabin I am making.", m);
    createVideoFromTemplate("videos/monster.mp4", "A Run Cycle for a monster I created!", r);
    createImageFromTemplate("images/couchRender.png", "A render of the leather couch I modeled for my cabin.", l);
    createImageFromTemplate("images/couchRenderStitch.png", "Procedural Leather Texture with Stitches on the couch.", m);
    createImageFromTemplate("images/couchRenderWear.png", "Testing out some wear textures on the couch.", r);
    createImageFromTemplate("images/couchRenderWear2.png", "Another wear texture.", r);
    createImageFromTemplate("images/Fireplace.png", "Fireplace from my WIP Cabin", m);

</script>

</body>
</html>