Skip to content
Snippets Groups Projects
Commit 75550ed1 authored by Hwanyong Lee's avatar Hwanyong Lee
Browse files

Re2018

parent 4b581b28
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
basic_course/webgl_02.pptx
+ 0
− 0
View file @ 75550ed1
No preview for this file type
student2018/201420984/moviesample.mp4 0 → 100644
+ 0
− 0
View file @ 75550ed1
File added
student2018/201520986/cg_final_assignment_201520986_syk_report.pptx 0 → 100644
+ 0
− 0
View file @ 75550ed1
File added
student2018/201520986/sphere_cg_final_assignment_201520986.html 0 → 100644
+ 239
− 0
View file @ 75550ed1
<!--
Copyright 2011 (C) by Guido D'Albore (guido@bitstorm.it)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<title>How to make a 3D sphere with HTML5 - di Guido D'Albore</title>
<script type="text/javascript">
var sphere = new Sphere3D();
var html5logo = new Image();
var html5radius = 50;
var html5direction = 0.5;
var rotation = 0;
var distance = 0;
function Point3D() {
this.x = 0;
this.y = 0;
this.z = 0;
}
function Sphere3D(radius) {
this.point = new Array();
this.color = "rgb(255,0,255)"
this.radius = (typeof (radius) == "undefined") ? 20.0 : radius;
this.radius = (typeof (radius) != "number") ? 20.0 : radius;
this.numberOfVertexes = 0;
// Ciclo da 0� a 360� con passo di 10�...calcola la circonf. di mezzo
for (alpha = 0; alpha <= 6.28; alpha += 0.17) {
p = this.point[this.numberOfVertexes] = new Point3D();
p.x = Math.cos(alpha) * this.radius;
p.y = 0;
p.z = Math.sin(alpha) * this.radius;
this.numberOfVertexes++;
}
// Ciclo da 0� a 90� con passo di 10�...calcola la prima semisfera (direction = 1)
// Ciclo da 0� a 90� con passo di 10�...calcola la seconda semisfera (direction = -1)
for (var direction = 1; direction >= -1; direction -= 2) {
for (var beta = 0.17; beta < 1.445; beta += 0.17) {
var radius = Math.cos(beta) * this.radius;
var fixedY = Math.sin(beta) * this.radius * direction;
for (var alpha = 0; alpha < 6.28; alpha += 0.17) {
p = this.point[this.numberOfVertexes] = new Point3D();
p.x = Math.cos(alpha) * radius;
p.y = fixedY;
p.z = Math.sin(alpha) * radius;
this.numberOfVertexes++;
}
}
}
}
function rotateX(point, radians) {
var y = point.y;
point.y = (y * Math.cos(radians)) + (point.z * Math.sin(radians) * -1.0);
point.z = (y * Math.sin(radians)) + (point.z * Math.cos(radians));
}
function rotateY(point, radians) {
var x = point.x;
point.x = (x * Math.cos(radians)) + (point.z * Math.sin(radians) * -1.0);
point.z = (x * Math.sin(radians)) + (point.z * Math.cos(radians));
}
function rotateZ(point, radians) {
var x = point.x;
point.x = (x * Math.cos(radians)) + (point.y * Math.sin(radians) * -1.0);
point.y = (x * Math.sin(radians)) + (point.y * Math.cos(radians));
}
function projection(xy, z, xyOffset, zOffset, distance) {
return ((distance * xy) / (z - zOffset)) + xyOffset;
}
function render() {
var canvas = document.getElementById("sphere3d");
var width = canvas.getAttribute("width");
var height = canvas.getAttribute("height");
var ctx = canvas.getContext('2d');
var x, y;
var rgb_r = 255;
var rgb_g = 0;
var rgb_b = 0;
var rgb_add = 30;
var p = new Point3D();
draw();
ctx.save();
ctx.clearRect(0, 0, width, height);
//drawHtml5Logo(ctx, 10, 10);
ctx.globalCompositeOperation = "lighter";
for (i = 0; i < sphere.numberOfVertexes; i++) {
p.x = sphere.point[i].x;
p.y = sphere.point[i].y;
p.z = sphere.point[i].z;
rotateX(p, rotation);
rotateY(p, rotation);
rotateZ(p, rotation);
x = projection(p.x, p.z, width / 2.0, 100.0, distance);
y = projection(p.y, p.z, height / 2.0, 100.0, distance);
rgb_b += rgb_add;
if ((x >= 0) && (x < width)) {
if ((y >= 0) && (y < height)) {
if (p.z < 0) {
drawPoint(ctx, x, y, 4, "#FA58D0");
} else {
drawPointWithGradient(ctx, x, y, 10, "rgb(" + rgb_r + "," + rgb_g + "," + rgb_b + ")", 0.8);
}
}
}
}
ctx.restore();
ctx.fillStyle = "rgb(150,150,150)";
//ctx.fillText("di Guido D'Albore", width - 90, height - 5);
rotation += Math.PI / 100.0;
if (distance < 1000) {
distance += 10;
}
}
function drawPoint(ctx, x, y, size, color) {
ctx.save();
ctx.beginPath();
ctx.strokeStyle = color;
//ctx.arc(x, y, size, 0, 2*Math.PI, true);
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
ctx.moveTo(x, y);
ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
ctx.moveTo(x - 45, y - 10);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
ctx.moveTo(x - 15, y - 10);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
ctx.stroke();
//ctx.fill();
ctx.restore();
}
function drawPointWithGradient(ctx, x, y, size, color, gradient) {
var reflection;
reflection = size/4;
ctx.save();
ctx.translate(x, y);
var radgrad = ctx.createRadialGradient(-reflection, -reflection, reflection, 0, 0, size);
radgrad.addColorStop(0, '#FFFFFF');
radgrad.addColorStop(gradient, color);
radgrad.addColorStop(1, 'rgba(255,0,0,0)');
ctx.fillStyle = radgrad;
ctx.fillRect(-size, -size, size * 2, size * 2);
ctx.restore();
}
function draw() {
var ctx = document.getElementById('sphere3d').getContext('2d');
for (var i = 0; i < 6; i++) {
for (var j = 0; j < 6; j++) {
ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
Math.floor(255 - 42.5 * j) + ')';
ctx.beginPath();
ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
ctx.stroke();
}
}
}
function drawHalo(ctx, x, y, size, color, gradient) {
var reflection;
reflection = size / 4;
ctx.save();
ctx.translate(x, y);
var radgrad = ctx.createRadialGradient(0, 0, reflection, 0, 0, size);
radgrad.addColorStop(0, '#FFFFFF');
radgrad.addColorStop(gradient, color);
radgrad.addColorStop(1, 'rgba(255,0,98,0)');
ctx.fillStyle = radgrad;
ctx.fillRect(-size, -size, size * 2, size * 2);
ctx.restore();
}
function init() {
// Set framerate to 30 fps
setInterval(render, 1000 / 30);
//html5logo.src = "html5-badge-h-solo.png";
}
</script>
<style type="text/css">
canvas {
border: 4px solid #A0A0A0;
background: black;
display: block;
}
</style>
</head>
<body onload="init();">
<canvas id="sphere3d" width="800" height="800">
Il tuo browser non supporta l'HTML5.
</canvas>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr