Skip to content
Snippets Groups Projects
Commit 889628b9 authored by 전승곤's avatar 전승곤
Browse files

Functionality finished

parents
No related branches found
No related tags found
No related merge requests found
Pipeline #1894 canceled
node_modules
language: node_js
git:
depth: 3
node_js:
- "node"
install: npm install
script:
- npm test
- gulp
cache:
directories:
- node_modules
notifications:
email: false
LICENSE 0 → 100644
The MIT License (MIT)
Copyright (c) 2013-2019 Blackrock Digital LLC
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
# [Start Bootstrap - Resume](https://startbootstrap.com/template-overviews/resume/)
[Resume](https://startbootstrap.com/template-overviews/resume/) is a resume and CV theme for [Bootstrap](http://getbootstrap.com/) created by [Start Bootstrap](http://startbootstrap.com/). This theme features a fixed sidebar with content sections to build a simple, yet elegant resume.
## Preview
[![Resume Preview](https://startbootstrap.com/assets/img/screenshots/themes/resume.png)](https://blackrockdigital.github.io/startbootstrap-resume/)
**[View Live Preview](https://blackrockdigital.github.io/startbootstrap-resume/)**
## Status
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/BlackrockDigital/startbootstrap-resume/master/LICENSE)
[![npm version](https://img.shields.io/npm/v/startbootstrap-resume.svg)](https://www.npmjs.com/package/startbootstrap-resume)
[![Build Status](https://travis-ci.org/BlackrockDigital/startbootstrap-resume.svg?branch=master)](https://travis-ci.org/BlackrockDigital/startbootstrap-resume)
[![dependencies Status](https://david-dm.org/BlackrockDigital/startbootstrap-resume/status.svg)](https://david-dm.org/BlackrockDigital/startbootstrap-resume)
[![devDependencies Status](https://david-dm.org/BlackrockDigital/startbootstrap-resume/dev-status.svg)](https://david-dm.org/BlackrockDigital/startbootstrap-resume?type=dev)
## Download and Installation
To begin using this template, choose one of the following options to get started:
* [Download the latest release on Start Bootstrap](https://startbootstrap.com/template-overviews/resume/)
* Install via npm: `npm i startbootstrap-resume`
* Clone the repo: `git clone https://github.com/BlackrockDigital/startbootstrap-resume.git`
* [Fork, Clone, or Download on GitHub](https://github.com/BlackrockDigital/startbootstrap-resume)
## Usage
### Basic Usage
After downloading, simply edit the HTML and CSS files included with the template in your favorite text editor to make changes. These are the only files you need to worry about, you can ignore everything else! To preview the changes you make to the code, you can open the `index.html` file in your web browser.
### Advanced Usage
After installation, run `npm install` and then run `npm start` which will open up a preview of the template in your default browser, watch for changes to core template files, and live reload the browser when changes are saved. You can view the `gulpfile.js` to see which tasks are included with the dev environment.
#### Gulp Tasks
- `gulp` the default task that builds everything
- `gulp watch` browserSync opens the project in your default browser and live reloads when changes are made
- `gulp css` compiles SCSS files into CSS and minifies the compiled CSS
- `gulp js` minifies the themes JS file
- `gulp vendor` copies dependencies from node_modules to the vendor directory
You must have npm installed globally in order to use this build environment.
## Bugs and Issues
Have a bug or an issue with this template? [Open a new issue](https://github.com/BlackrockDigital/startbootstrap-resume/issues) here on GitHub or leave a comment on the [template overview page at Start Bootstrap](http://startbootstrap.com/template-overviews/resume/).
## About
Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.
* https://startbootstrap.com
* https://twitter.com/SBootstrap
Start Bootstrap was created by and is maintained by **[David Miller](http://davidmiller.io/)**, Owner of [Blackrock Digital](http://blackrockdigital.io/).
* http://davidmiller.io
* https://twitter.com/davidmillerskt
* https://github.com/davidtmiller
Start Bootstrap is based on the [Bootstrap](http://getbootstrap.com/) framework created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thorton](https://twitter.com/fat).
## Copyright and License
Copyright 2013-2019 Blackrock Digital LLC. Code released under the [MIT](https://github.com/BlackrockDigital/startbootstrap-resume/blob/gh-pages/LICENSE) license.
/*!
* Start Bootstrap - Resume v5.0.7 (https://startbootstrap.com/template-overviews/resume)
* Copyright 2013-2019 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-resume/blob/master/LICENSE)
*/
body {
font-family: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
padding-top: 54px;
color: #868e96;
}
@media (min-width: 992px) {
body {
padding-top: 0;
padding-left: 17rem;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Saira Extra Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-weight: 700;
text-transform: uppercase;
color: #343a40;
}
h1 {
font-size: 6rem;
line-height: 5.5rem;
}
h2 {
font-size: 3.5rem;
}
h3 {
font-size: 2rem;
}
p.lead {
font-size: 1.15rem;
font-weight: 400;
}
.subheading {
text-transform: uppercase;
font-weight: 500;
font-family: 'Saira Extra Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-size: 1.5rem;
}
.social-icons a {
display: inline-block;
height: 3.5rem;
width: 3.5rem;
background-color: #495057;
color: #fff !important;
border-radius: 100%;
text-align: center;
font-size: 1.5rem;
line-height: 3.5rem;
margin-right: 1rem;
}
.social-icons a:last-child {
margin-right: 0;
}
.social-icons a:hover {
background-color: #BD5D38;
}
.dev-icons {
font-size: 3rem;
}
.dev-icons .list-inline-item i:hover {
color: #BD5D38;
}
#sideNav .navbar-nav .nav-item .nav-link {
font-weight: 800;
letter-spacing: 0.05rem;
text-transform: uppercase;
}
#sideNav .navbar-toggler:focus {
outline-color: #d48a6e;
}
@media (min-width: 992px) {
#sideNav {
text-align: center;
position: fixed;
top: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 17rem;
height: 100vh;
}
#sideNav .navbar-brand {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: auto auto 0;
padding: 0.5rem;
}
#sideNav .navbar-brand .img-profile {
max-width: 10rem;
max-height: 10rem;
border: 0.5rem solid rgba(255, 255, 255, 0.2);
}
#sideNav .navbar-collapse {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: 100%;
margin-bottom: auto;
}
#sideNav .navbar-collapse .navbar-nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
#sideNav .navbar-collapse .navbar-nav .nav-item {
display: block;
}
#sideNav .navbar-collapse .navbar-nav .nav-item .nav-link {
display: block;
}
}
section.resume-section {
padding-top: 5rem !important;
padding-bottom: 5rem !important;
max-width: 75rem;
}
section.resume-section .resume-item .resume-date {
min-width: none;
}
@media (min-width: 768px) {
section.resume-section {
min-height: 100vh;
}
section.resume-section .resume-item .resume-date {
min-width: 18rem;
}
}
@media (min-width: 992px) {
section.resume-section {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
}
.bg-primary {
background-color: #BD5D38 !important;
}
.text-primary {
color: #BD5D38 !important;
}
a {
color: #BD5D38;
}
a:hover, a:focus, a:active {
color: #824027;
}
/*!
* Start Bootstrap - Resume v5.0.7 (https://startbootstrap.com/template-overviews/resume)
* Copyright 2013-2019 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-resume/blob/master/LICENSE)
*/body{font-family:Muli,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';padding-top:54px;color:#868e96}@media (min-width:992px){body{padding-top:0;padding-left:17rem}}h1,h2,h3,h4,h5,h6{font-family:'Saira Extra Condensed',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-weight:700;text-transform:uppercase;color:#343a40}h1{font-size:6rem;line-height:5.5rem}h2{font-size:3.5rem}h3{font-size:2rem}p.lead{font-size:1.15rem;font-weight:400}.subheading{text-transform:uppercase;font-weight:500;font-family:'Saira Extra Condensed',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:1.5rem}.social-icons a{display:inline-block;height:3.5rem;width:3.5rem;background-color:#495057;color:#fff!important;border-radius:100%;text-align:center;font-size:1.5rem;line-height:3.5rem;margin-right:1rem}.social-icons a:last-child{margin-right:0}.social-icons a:hover{background-color:#bd5d38}.dev-icons{font-size:3rem}.dev-icons .list-inline-item i:hover{color:#bd5d38}#sideNav .navbar-nav .nav-item .nav-link{font-weight:800;letter-spacing:.05rem;text-transform:uppercase}#sideNav .navbar-toggler:focus{outline-color:#d48a6e}@media (min-width:992px){#sideNav{text-align:center;position:fixed;top:0;left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:17rem;height:100vh}#sideNav .navbar-brand{display:-webkit-box;display:-ms-flexbox;display:flex;margin:auto auto 0;padding:.5rem}#sideNav .navbar-brand .img-profile{max-width:10rem;max-height:10rem;border:.5rem solid rgba(255,255,255,.2)}#sideNav .navbar-collapse{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;width:100%;margin-bottom:auto}#sideNav .navbar-collapse .navbar-nav{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}#sideNav .navbar-collapse .navbar-nav .nav-item{display:block}#sideNav .navbar-collapse .navbar-nav .nav-item .nav-link{display:block}}section.resume-section{padding-top:5rem!important;padding-bottom:5rem!important;max-width:75rem}section.resume-section .resume-item .resume-date{min-width:none}@media (min-width:768px){section.resume-section{min-height:100vh}section.resume-section .resume-item .resume-date{min-width:18rem}}@media (min-width:992px){section.resume-section{padding-top:3rem!important;padding-bottom:3rem!important}}.bg-primary{background-color:#bd5d38!important}.text-primary{color:#bd5d38!important}a{color:#bd5d38}a:active,a:focus,a:hover{color:#824027}
\ No newline at end of file
.explanation_container{
background-color: #fcf8e3;
box-sizing: border-box;
width: 100%;
display: block;
margin-bottom: 1em;
}
/*
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border: 1px solid black;
}*/
input.valid {
border: 1px solid green;
}
input.invalid {
border: 1px solid red;
}
input.invalid + .error-message {
display: initial;
}
.error-message {
display: none;
}
\ No newline at end of file
"use strict";
// Load plugins
const autoprefixer = require("gulp-autoprefixer");
const browsersync = require("browser-sync").create();
const cleanCSS = require("gulp-clean-css");
const del = require("del");
const gulp = require("gulp");
const header = require("gulp-header");
const merge = require("merge-stream");
const plumber = require("gulp-plumber");
const rename = require("gulp-rename");
const sass = require("gulp-sass");
const uglify = require("gulp-uglify");
// Load package.json for banner
const pkg = require('./package.json');
// Set the banner content
const banner = ['/*!\n',
' * Start Bootstrap - <%= pkg.title %> v<%= pkg.version %> (<%= pkg.homepage %>)\n',
' * Copyright 2013-' + (new Date()).getFullYear(), ' <%= pkg.author %>\n',
' * Licensed under <%= pkg.license %> (https://github.com/BlackrockDigital/<%= pkg.name %>/blob/master/LICENSE)\n',
' */\n',
'\n'
].join('');
// BrowserSync
function browserSync(done) {
browsersync.init({
server: {
baseDir: "./"
},
port: 3000
});
done();
}
// BrowserSync reload
function browserSyncReload(done) {
browsersync.reload();
done();
}
// Clean vendor
function clean() {
return del(["./vendor/"]);
}
// Bring third party dependencies from node_modules into vendor directory
function modules() {
// Bootstrap
var bootstrap = gulp.src('./node_modules/bootstrap/dist/**/*')
.pipe(gulp.dest('./vendor/bootstrap'));
// Font Awesome CSS
var fontAwesomeCSS = gulp.src('./node_modules/@fortawesome/fontawesome-free/css/**/*')
.pipe(gulp.dest('./vendor/fontawesome-free/css'));
// Font Awesome Webfonts
var fontAwesomeWebfonts = gulp.src('./node_modules/@fortawesome/fontawesome-free/webfonts/**/*')
.pipe(gulp.dest('./vendor/fontawesome-free/webfonts'));
// jQuery Easing
var jqueryEasing = gulp.src('./node_modules/jquery.easing/*.js')
.pipe(gulp.dest('./vendor/jquery-easing'));
// jQuery
var jquery = gulp.src([
'./node_modules/jquery/dist/*',
'!./node_modules/jquery/dist/core.js'
])
.pipe(gulp.dest('./vendor/jquery'));
return merge(bootstrap, fontAwesomeCSS, fontAwesomeWebfonts, jquery, jqueryEasing);
}
// CSS task
function css() {
return gulp
.src("./scss/**/*.scss")
.pipe(plumber())
.pipe(sass({
outputStyle: "expanded",
includePaths: "./node_modules",
}))
.on("error", sass.logError)
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(header(banner, {
pkg: pkg
}))
.pipe(gulp.dest("./css"))
.pipe(rename({
suffix: ".min"
}))
.pipe(cleanCSS())
.pipe(gulp.dest("./css"))
.pipe(browsersync.stream());
}
// JS task
function js() {
return gulp
.src([
'./js/*.js',
'!./js/*.min.js'
])
.pipe(uglify())
.pipe(header(banner, {
pkg: pkg
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./js'))
.pipe(browsersync.stream());
}
// Watch files
function watchFiles() {
gulp.watch("./scss/**/*", css);
gulp.watch(["./js/**/*", "!./js/**/*.min.js"], js);
gulp.watch("./**/*.html", browserSyncReload);
}
// Define complex tasks
const vendor = gulp.series(clean, modules);
const build = gulp.series(vendor, gulp.parallel(css, js));
const watch = gulp.series(build, gulp.parallel(watchFiles, browserSync));
// Export tasks
exports.css = css;
exports.js = js;
exports.clean = clean;
exports.vendor = vendor;
exports.build = build;
exports.watch = watch;
exports.default = build;
img/explain1.png

80.3 KiB

img/explain2.png

96.1 KiB

img/explain3.jpg

55.7 KiB

<!--(CC-NC-BY) 전승곤 2019-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>MVP model</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet">
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/resume.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"></link>
<script type="text/javascript" src="js/gl-matrix.js"></script>
<script type="text/javascript" src="js/WebGLHelloAPI.js"></script>
</head>
<body id="page-top" onload="main()">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<span class="d-none d-lg-block">
<!-- <img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="img/profile.jpg" alt="">
--></span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#explanation">What is MVP?</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#example">Example</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#reference">References</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid p-0">
<section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="explanation">
<div class="w-100">
<h1 class="mb-0">What is
<span class="text-primary">MVP?</span>
</h1>
<div class="subheading mb-5">
</div>
<p class="lead mb-5"><b>컴퓨터 그래픽스</b>에서 MVP 모델이란 물체들의 위치, 크기, 회전의 변환을 행렬 곱으로 쉽게 표현하는 방식을 가르킵니다. Model-View-Projection의 약자로, 각 단계를 순서대로 걸쳐서 비로소 우리가 화면에서 보는 물체들이 보여지게 됩니다.</p>
<h3 class="mb-0">Model</h3>
<p>Model 단계에서는 각 물체들을 구성하는 Vertex들의 위치를 World 좌표로 바꿔줍니다. </p>
<img width=500 height=300 style="margin: 30px;" src="img/explain1.png"></img>
<br/>
<p>위 그림과 같이 구와 직육면체가 있을 경우, 사용자가 구의 위치만 옮기고 싶으면 구를 구성하고 있는 vertex들의 위치만 변형시켜 주고, 직육면체의 vertex들의 위치는 바꾸면 안됩니다. 그렇기 때문에 각각의 물체(object)들은 자신만의 변환 행렬을 가져야하고, 이를 Model matrix라고 부릅니다. 이를 통해 각 물체들이 가지는 위치, 회전, 크기를 각각 정해줄 수 있습니다.</p>
<h3 class="mb-0">View</h3>
<p>View 단계에서는 물체들을 보고 있는 눈(Camera)의 위치를 정해줍니다. </p>
<img width=500 height=300 style="margin: 30px;" src="img/explain2.png"></img>
<br/>
<p>위 그림과 같이 카메라의 위치에 따라서 보여지는 직육면체나 구의 위치나 크기가 다르게 보입니다. 그렇게 때문에 모델 자체의 local 좌표를 World 좌표로 바꿔 준 다음, 보는 사람의 위치에 따라서 전체 세상(world)를 다르게 보여주는 처리를 해야합니다. 이를 위해서 카메라를 뒤로 움직이고 싶다면 반대로 모든 vertex들을 앞으로 보내거나, 카메라를 왼쪽으로 회전하고자 하면 전체 화면을 반대로 오른쪽으로 회전하는 변환행렬을 적용시켜 줘야하는데, 이를 View 행렬이라 부릅니다.</p>
<h3 class="mb-0">Projection</h3>
<p>Projection 단계에서는 물체들의 vertex들이 카메라 화면의 어느 위치에 존재하는지를 정합니다. </p>
<img width=250 height=400 style="margin: 30px;float: left;" src="img/explain3.jpg"></img>
<br/><br/><br/><br/><br/><br/>
<p>Projection은 우리말로 표현하면 정사영과 비슷한 개념이라고 생각하시면 됩니다. View 단계에서 카메라의 위치를 정해줬으면 모든 vertix를 카메라가 보는 방향과 수직인 방향으로 정사영시켜서 한 평면을 만들고, 그것을 화면에 보여주는 겁니다. Projection의 방식에 따라서 다양한 방식으로 세상을 표현할 수 있습니다. 수학 시간때 3차원 좌표를 그릴때 자주 쓰는 직각 투시법(orthographic projection), 원근법이 보장되는 투시원근법(perspective projection) 등 다양한 종류가 있습니다. 수업시간때 배운 왼쪽 사진처럼 projection도 가능합니다.</p>
</div>
</section>
<hr class="m-0">
<section class="resume-section p-3 p-lg-5 d-flex justify-content-center" id="example">
<div class="w-100">
<h2 class="mb-5">Example</h2>
<div class="subheading mb-3">MVP 행렬을 전부 정하였으면 이제 각 행렬을 곱하면 됩니다!!</div>
<div id="explanation" class="explanation_container container">
<div class="row">
<div class="col-sm-5">
<canvas id="helloapicanvas" style="border: none;" width="400" height="400"></canvas>
<!-- <button onclick="trXinc()">Translate X + 0.1</button>
<button onclick="animRotate()">Animation Rotate + 0.01</button> -->
</div>
<div class="col-sm-7">
<div class="row" style="margin: 10px;">
<p> 이 예제에서 위에서 배운 Model, View 행렬의 값을 바꾸어서 화면을 전환시켜 봅시다. Model 행렬은 가운데에 보이는 큐브 object에만 적용됩니다.</p>
<p> Projection 행렬은 고정되어있습니다. </p>
</div>
<div class="row">
<div class="col-sm">
<p id="webTrX"> Projection Matrix </p>
<table border=1>
<tr ><td id="Pmatrix0"></td> <td id="Pmatrix4"></td> <td id="Pmatrix8"></td> <td id="Pmatrix12"></td> </tr>
<tr><td id="Pmatrix1"></td> <td id="Pmatrix5"></td> <td id="Pmatrix9"></td> <td id="Pmatrix13"></td> </tr>
<tr><td id="Pmatrix2"></td> <td id="Pmatrix6"></td> <td id="Pmatrix10"></td> <td id="Pmatrix14"></td> </tr>
<tr><td id="Pmatrix3"></td> <td id="Pmatrix7"></td> <td id="Pmatrix11"></td> <td id="Pmatrix15"></td> </tr>
</table>
</div>
<div class="col-sm">
<p id="webTrX"> View Matrix </p>
<table border=1>
<tr ><td id="Vmatrix0"></td> <td id="Vmatrix4"></td> <td id="Vmatrix8"></td> <td id="Vmatrix12"></td> </tr>
<tr><td id="Vmatrix1"></td> <td id="Vmatrix5"></td> <td id="Vmatrix9"></td> <td id="Vmatrix13"></td> </tr>
<tr><td id="Vmatrix2"></td> <td id="Vmatrix6"></td> <td id="Vmatrix10"></td> <td id="Vmatrix14"></td> </tr>
<tr><td id="Vmatrix3"></td> <td id="Vmatrix7"></td> <td id="Vmatrix11"></td> <td id="Vmatrix15"></td> </tr>
</table>
</div>
<div class="col-sm">
<p id="webTrX"> Model Matrix </p>
<table border=1>
<tr ><td id="Mmatrix0"></td> <td id="Mmatrix4"></td> <td id="Mmatrix8"></td> <td id="Mmatrix12"></td> </tr>
<tr><td id="Mmatrix1"></td> <td id="Mmatrix5"></td> <td id="Mmatrix9"></td> <td id="Mmatrix13"></td> </tr>
<tr><td id="Mmatrix2"></td> <td id="Mmatrix6"></td> <td id="Mmatrix10"></td> <td id="Mmatrix14"></td> </tr>
<tr><td id="Mmatrix3"></td> <td id="Mmatrix7"></td> <td id="Mmatrix11"></td> <td id="Mmatrix15"></td> </tr>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
Model matrix
<br/>Translate
<br/> X:&nbsp;&nbsp;&nbsp;-1.0 <input type="range" id="Md_xtranslate" min="-1.0" max="1.0" value="0.0" step="0.01" style="width:250px"> 1.0 &nbsp; value: <span>0</span>
<br/> Y:&nbsp;&nbsp;&nbsp;-1.0 <input type="range" id="Md_ytranslate" min="-1.0" max="1.0" value="0.0" step="0.01" style="width:250px"> 1.0 &nbsp; value: <span>0</span>
<br/> Z:&nbsp;&nbsp;&nbsp;-1.0 <input type="range" id="Md_ztranslate" min="-1.0" max="1.0" value="0.0" step="0.01" style="width:250px"> 1.0 &nbsp; value: <span>0</span>
<br/> Rotate
<br/> X:&nbsp;&nbsp;&nbsp;-180.0 <input type="range" id="Md_xrotate" min="-180.0" max="180.0" value="0.0" step="0.01" style="width:250px"> 180.0 &nbsp; value: <span>0</span>
<br/> Y:&nbsp;&nbsp;&nbsp;-180.0 <input type="range" id="Md_yrotate" min="-180.0" max="180.0" value="0.0" step="0.01" style="width:250px"> 180.0 &nbsp; value: <span>0</span>
<br/> Z:&nbsp;&nbsp;&nbsp;-180.0 <input type="range" id="Md_zrotate" min="-180.0" max="180.0" value="0.0" step="0.01" style="width:250px"> 180.0 &nbsp; value: <span>0</span>
</div>
<div class="col-sm">
View matrix
<br/>Translate
<br> X:&nbsp;&nbsp;&nbsp;-10.0 <input type="range" id="Vi_xtranslate" min="-10.0" max="10.0" value="0.0" step="0.01" style="width:250px"> 10.0 &nbsp; value: <span>0</span>
<br> Y:&nbsp;&nbsp;&nbsp;-10.0 <input type="range" id="Vi_ytranslate" min="-10.0" max="10.0" value="0.0" step="0.01" style="width:250px"> 10.0 &nbsp; value: <span>0</span>
<br> Z:&nbsp;&nbsp;&nbsp;-10.0 <input type="range" id="Vi_ztranslate" min="-10.0" max="10.0" value="4.0" step="0.01" style="width:250px"> 10.0 &nbsp; value: <span>4</span>
<br/> Rotate
<br/> X:&nbsp;&nbsp;&nbsp;-180.0 <input type="range" id="Vi_xrotate" min="-180.0" max="180.0" value="0.0" step="0.01" style="width:250px"> 180.0 &nbsp; value: <span>0</span>
<br/> Y:&nbsp;&nbsp;&nbsp;-180.0 <input type="range" id="Vi_yrotate" min="-180.0" max="180.0" value="0.0" step="0.01" style="width:250px"> 180.0 &nbsp; value: <span>0</span>
<br/> Z:&nbsp;&nbsp;&nbsp;-180.0 <input type="range" id="Vi_zrotate" min="-180.0" max="180.0" value="0.0" step="0.01" style="width:250px"> 180.0 &nbsp; value: <span>0</span>
</div>
</div>
<!-- <div class="resume-date text-md-right">
<span class="text-primary">March 2013 - Present</span>
</div> -->
</div>
</section>
<hr class="m-0">
<section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="reference">
<div class="w-100">
<h2 class="mb-5">References</h2>
<div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
<div class="resume-content">
<div class="subheading mb-3">Design Idea</div>
<div><a href="http://learnwebgl.brown37.net/transformations2/transformations_rotate.html">http://learnwebgl.brown37.net/transformations2/transformations_rotate.html</a></div>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row justify-content-between">
<div class="resume-content">
<div class="subheading mb-3">Explanation</div>
<div><a href="http://www.opengl-tutorial.org/kr/beginners-tutorials/tutorial-3-matrices/#%EB%AA%A8%EB%8D%B8-%EB%B7%B0-%ED%94%84%EB%A1%9C%EC%A0%9D%EC%85%98-%ED%96%89%EB%A0%AC">http://www.opengl-tutorial.org/kr/beginners-tutorials/tutorial-3-matrices/#%EB%AA%A8%EB%8D%B8-%EB%B7%B0-%ED%94%84%EB%A1%9C%EC%A0%9D%EC%85%98-%ED%96%89%EB%A0%AC</a></div>
<div class="resume-item d-flex flex-column flex-md-row justify-content-between">
<div class="resume-content">
<br/>
<div class="subheading mb-3">Web template</div>
<div<a href="https://startbootstrap.com/themes/resume/">https://startbootstrap.com/themes/resume/</a></div>
</div>
</div>
</div>
</section>
</div>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/resume.min.js"></script>
<script type="text/javascript" src="js/subfunctions.js"></script>
</body>
</html>
This diff is collapsed.
This diff is collapsed.
(function($) {
"use strict"; // Start of use strict
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top)
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').click(function() {
$('.navbar-collapse').collapse('hide');
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#sideNav'
});
})(jQuery); // End of use strict
/*!
* Start Bootstrap - Resume v5.0.7 (https://startbootstrap.com/template-overviews/resume)
* Copyright 2013-2019 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-resume/blob/master/LICENSE)
*/
!function(t){"use strict";t('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var e=t(this.hash);if((e=e.length?e:t("[name="+this.hash.slice(1)+"]")).length)return t("html, body").animate({scrollTop:e.offset().top},1e3,"easeInOutExpo"),!1}}),t(".js-scroll-trigger").click(function(){t(".navbar-collapse").collapse("hide")}),t("body").scrollspy({target:"#sideNav"})}(jQuery);
\ No newline at end of file
var tmp;
// Add error message element after input.
$('#some-number').after('<span class="error-message">Please enter numbers only!</span>')
$('.matrix-element').on('input', function (evt) {
console.log("fasd");
var value = evt.target.value;
if (value.length === 0) {
evt.target.className = ''
return;
}
if ($.isNumeric(value)) {
evt.target.className = 'valid';
tmp = value;
$('#some-number').after('<span>' + tmp + '</span>');
} else {
evt.target.className = 'invalid';
}
})
//************************************** Model matrix modifications **************************************
//*************************** Translate modification ***************************
$('#Md_xtranslate').on('change mousemove', function (evt) {
$(this).next().html($(this).val());
Md_transX = $(this).val();
})
$('#Md_ytranslate').on('change mousemove', function (evt) {
$(this).next().html($(this).val());
Md_transY = $(this).val();
})
$('#Md_ztranslate').on('change mousemove', function (evt) {
$(this).next().html($(this).val());
Md_transZ = $(this).val();
})
//*************************** Rotation modification ***************************
$('#Md_xrotate').on('change mousemove', function (evt) {
$(this).next().html($(this).val());
Md_rotX = $(this).val();
})
$('#Md_yrotate').on('change mousemove', function (evt) {
$(this).next().html($(this).val());
Md_rotY = $(this).val();
})
$('#Md_zrotate').on('change mousemove', function (evt) {
$(this).next().html($(this).val());
Md_rotZ = $(this).val();
})
//************************************** View matrix modifications **************************************
//*************************** Translate modification ***************************
$('#Vi_xtranslate').on('change mousemove', function (evt) {
$(this).next().html($(this).val());
Vi_transX = -1 * $(this).val();
console.log(Vi_transX);
})
$('#Vi_ytranslate').on('change mousemove', function (evt) {
$(this).next().html($(this).val());
Vi_transY = -1 * $(this).val();
})
$('#Vi_ztranslate').on('change mousemove', function (evt) {
$(this).next().html($(this).val());
Vi_transZ = -1 * $(this).val();
})
//*************************** Rotation modification ***************************
$('#Vi_xrotate').on('change mousemove', function (evt) {
$(this).next().html($(this).val());
Vi_rotX = -1 * $(this).val();
})
$('#Vi_yrotate').on('change mousemove', function (evt) {
$(this).next().html($(this).val());
Vi_rotY = -1 * $(this).val();
})
$('#Vi_zrotate').on('change mousemove', function (evt) {
$(this).next().html($(this).val());
Vi_rotZ = -1 * $(this).val();
})
This diff is collapsed.
{
"title": "Resume",
"name": "startbootstrap-resume",
"version": "5.0.7",
"scripts": {
"start": "node_modules/.bin/gulp watch"
},
"description": "Resume is a simple, yet elegant resume and CV theme for Bootstrap 4.",
"keywords": [
"css",
"sass",
"html",
"responsive",
"theme",
"template"
],
"homepage": "https://startbootstrap.com/template-overviews/resume",
"bugs": {
"url": "https://github.com/BlackrockDigital/startbootstrap-resume/issues",
"email": "feedback@startbootstrap.com"
},
"license": "MIT",
"author": "Start Bootstrap",
"contributors": [
"David Miller (http://davidmiller.io/)"
],
"repository": {
"type": "git",
"url": "https://github.com/BlackrockDigital/startbootstrap-resume.git"
},
"dependencies": {
"@fortawesome/fontawesome-free": "5.9.0",
"bootstrap": "4.3.1",
"jquery": "3.4.1",
"jquery.easing": "^1.4.1"
},
"devDependencies": {
"browser-sync": "2.26.7",
"del": "4.1.1",
"gulp": "4.0.2",
"gulp-autoprefixer": "6.1.0",
"gulp-clean-css": "4.2.0",
"gulp-header": "2.0.7",
"gulp-plumber": "^1.2.1",
"gulp-rename": "1.4.0",
"gulp-sass": "4.0.2",
"gulp-uglify": "3.0.2",
"merge-stream": "2.0.0"
}
}
.bg-primary {
background-color: $primary !important;
}
.text-primary {
color: $primary !important;
}
a {
color: $primary;
&:hover,
&:focus,
&:active {
color: darken($primary, 15%);
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment