Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pull Request HW 5 #187

Open
wants to merge 33 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
80c5e5f
asst1
Kingsam147 Sep 10, 2024
407ff56
Merge branch 'bostongfx:main' into main
Kingsam147 Sep 12, 2024
e3f06ad
added png
Kingsam147 Sep 17, 2024
82d3620
change #2
Kingsam147 Sep 17, 2024
4a62bd9
Merge branch 'main' of github.com:Kingsam147/CS460student
Kingsam147 Sep 17, 2024
602797d
more changes
Kingsam147 Sep 17, 2024
7258748
ben
Kingsam147 Sep 17, 2024
3a4ba28
ben
Kingsam147 Sep 19, 2024
c72fd1c
ben
Kingsam147 Sep 19, 2024
60b6d14
nice
Kingsam147 Sep 19, 2024
0d8c3ac
Merge branch 'bostongfx:main' into main
Kingsam147 Oct 1, 2024
17f1f45
1
Kingsam147 Oct 1, 2024
fc9023a
2
Kingsam147 Oct 1, 2024
dcee3d3
3
Kingsam147 Oct 1, 2024
f0cdf56
4
Kingsam147 Oct 2, 2024
a0af418
5
Kingsam147 Oct 2, 2024
c985d8a
6
Kingsam147 Oct 2, 2024
a88d2fd
final
Kingsam147 Oct 2, 2024
a8844bf
screenshot
Kingsam147 Oct 2, 2024
80b2f7f
moved screenshot
Kingsam147 Oct 2, 2024
adde9c0
Merge branch 'bostongfx:main' into main
Kingsam147 Oct 8, 2024
d6131bd
finished product
Kingsam147 Oct 16, 2024
444d4b4
Merge branch 'bostongfx:main' into main
Kingsam147 Oct 31, 2024
b53044d
rotate attempt
Kingsam147 Oct 31, 2024
b7f4b97
Merge branch 'main' of github.com:Kingsam147/CS460student
Kingsam147 Oct 31, 2024
b8f6d0e
adding blender files
Kingsam147 Nov 19, 2024
f46de03
added extra space
Kingsam147 Nov 19, 2024
496e0d3
did steps 1 - 4
Kingsam147 Nov 19, 2024
a3dac77
finished #5
Kingsam147 Nov 19, 2024
9cba62f
finish half of #10
Kingsam147 Nov 20, 2024
5849fc5
final project
Kingsam147 Nov 27, 2024
b44e8d6
final_final_project
Kingsam147 Nov 27, 2024
657c6c7
last touches
Kingsam147 Nov 27, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added 01/Screenshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 9 additions & 4 deletions 01/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -48,16 +48,21 @@ <h1>RO.ME "3 DREAMS OF BLACK"</h1>
<div class='demo'>

<!-- TODO: REPLACE WITH A SCREENSHOT OF RO.ME -->
<img id='screenshot' src='https://placehold.co/300x300'>
<img id='screenshot' src='Screenshot.png'>
<p id='description'>
<!-- TODO: FILL IN YOUR DESCRIPTION -->
RO.ME is a very cool webgl demo!
The RO.ME demo was pretty cool, half way through the demo I even thought that
it would go on forever and that I had to close the demo in order to stop it.
It's crazy to think that they could've made something this complex 13 years ago.
It also served as a template, paving the way for future demos.
</p>
<p id='technology'>
Technology: TODO! <!-- TODO: FILL IN THE TECHNOLOGIES USED -->
Technology: WebGl, Java.script, Html, and a browser such as google chrome <!-- TODO: FILL IN THE TECHNOLOGIES USED -->
</p>
<p id='comparison'>
Comparison: TODO! <!-- TODO: FILL IN THE COMPARISON -->
Comparison: https://quantumstretch.com/ <!-- TODO: FILL IN THE COMPARISON -->
I personally like the RO.ME experience. This new demo about quantum is informational, however it's kind of boring.
But at the same time the graphic design of the quantum better is a lot better and more smooth.
</p>


Expand Down
123 changes: 122 additions & 1 deletion 02/index.html
Original file line number Diff line number Diff line change
@@ -1,16 +1,137 @@
<html>
<head>
<script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>;
<script type = "text/javascript" src="loader.js"></script>;
<title>CS460.org Assignment 2</title>
<style>
body {
background-color:#000;
background-color:#000000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
}
</style>
<script>

window.onload = function() {

r = new X.renderer3D();
r.init();


c = new X.cube();
c.color = [1, 1, 1]; //r g b
c.center = [10, 0, 0]; // x y z

r.add(c);
r.render();

CUBE_SIDELENGTH = 10;
GAP = 2;

var spin = false;
r.onRender = function() {
if (spin) {
r.camera.rotate([1, 0]);
}

}

window.onkeypress = function(e) {

if (e.code == 'KeyD') { // D --> moves right
c.transform.translateX(-CUBE_SIDELENGTH - GAP);
}
// A --> moves left
else if (e.code == 'KeyA') {
c.transform.translateX(CUBE_SIDELENGTH + GAP);
}
// S moves down
else if (e.code == 'KeyS') {
c.transform.translateZ(-CUBE_SIDELENGTH - GAP);
}
// W moves up
else if (e.code == 'KeyW') {
c.transform.translateZ(CUBE_SIDELENGTH + GAP);
}
// Q moves back
else if (e.code == 'KeyQ') {
c.transform.translateY(-CUBE_SIDELENGTH - GAP);
}
// E moves forward
else if (e.code == 'KeyE') {
c.transform.translateY(CUBE_SIDELENGTH + GAP);
}

// change cube color to black
else if (e.code == 'Digit0') {
c.color = [0, 0, 0];
}
// change cube color to white
else if (e.code == 'Digit1') {
c.color = [1, 1, 1];
}
// change cube color to red
else if (e.code == 'Digit2') {
c.color = [1, 0, 0];
}
// change cube color to green
else if (e.code == 'Digit3') {
c.color = [0, 1, 0];
}
// change cube color to blue
else if (e.code == 'Digit4') {
c.color = [0, 0, 1];
}
// change cube color to yellow
else if (e.code == 'Digit5') {
c.color = [1, 1, 0];
}
// change cube color to pink
else if (e.code == 'Digit6') {
c.color = [1, 0, 1];
}
// change cube color to cyan
else if (e.code == 'Digit7') {
c.color = [0, 1, 1];
}

// 'Space' to add another cube
else if (e.code == 'Space') {
new_cube = new X.cube();
new_cube.color = c.color;
new_cube.transform.matrix = new Float32Array(c.transform.matrix);
new_cube.lengthX = new_cube.lengthY = new_cube.lengthZ = CUBE_SIDELENGTH;

r.add(new_cube);
}

// 'O' to download and 'L' to upload
else if (e.code == 'KeyO') {
download();
} else if (e.code == 'KeyL') {
upload("scene.json");
}

// press b to spin camera or stop spinning camera
else if (e.code == 'KeyB') {
if (spin == false) {
spin = true;
} else {
spin = false;
}

}

}

};

</script>

</head>

<body>
</body>
</html>
1 change: 1 addition & 0 deletions 02/scene.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"cubes":[[[1,0,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":96,"13":0,"14":72,"15":1}],[[1,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":84,"13":0,"14":36,"15":1}],[[1,0,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":84,"13":0,"14":24,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":84,"13":0,"14":12,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":84,"13":0,"14":0,"15":1}],[[1,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":84,"13":0,"14":-12,"15":1}],[[1,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":84,"13":0,"14":-24,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":84,"13":0,"14":-36,"15":1}],[[1,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":72,"13":0,"14":-36,"15":1}],[[1,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":60,"13":0,"14":-36,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":48,"13":0,"14":-36,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":36,"13":0,"14":-36,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":0,"13":0,"14":36,"15":1}],[[1,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-12,"13":0,"14":36,"15":1}],[[1,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-24,"13":0,"14":36,"15":1}],[[1,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-36,"13":0,"14":36,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-48,"13":0,"14":36,"15":1}],[[1,0,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-60,"13":0,"14":36,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-72,"13":0,"14":36,"15":1}],[[0,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-48,"13":0,"14":24,"15":1}],[[1,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-48,"13":0,"14":12,"15":1}],[[1,0,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-48,"13":0,"14":0,"15":1}],[[1,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-48,"13":0,"14":-12,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-48,"13":0,"14":-24,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-48,"13":0,"14":-36,"15":1}],[[1,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-36,"13":0,"14":-36,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-24,"13":0,"14":-36,"15":1}],[[0,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-12,"13":0,"14":-36,"15":1}],[[1,0,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":0,"13":0,"14":-36,"15":1}],[[1,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-72,"13":0,"14":-36,"15":1}],[[0,1,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-84,"13":0,"14":-36,"15":1}],[[1,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-96,"13":0,"14":-36,"15":1}],[[1,0,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-72,"13":0,"14":-36,"15":1}],[[1,0,1],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-60,"13":0,"14":-36,"15":1}],[[1,0,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-96,"13":0,"14":36,"15":1}],[[1,1,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-96,"13":0,"14":36,"15":1}],[[1,0,0],{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":-84,"13":0,"14":36,"15":1}]],"camera":{"0":-1,"1":0,"2":0,"3":0,"4":0,"5":0,"6":1,"7":0,"8":0,"9":1,"10":0,"11":0,"12":0,"13":0,"14":-100,"15":1}}
Binary file added 03/Screenshot (4).png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
168 changes: 167 additions & 1 deletion 03/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,152 @@
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

var renderer, controls, scene, camera;
var LASTOBJECT;
var HELD = false;
var DELTA = 0.25;
var PINK = true;

window.onload = function() {

// Three.js code goes here
scene = new THREE.Scene();

// setup the camera
var fov = 75;
var ratio = window.innerWidth / window.innerHeight;
var zNear = 1;
var zFar = 10000;
camera = new THREE.PerspectiveCamera( fov, ratio, zNear, zFar );
camera.position.set(0, 0, 100);


// create renderer and setup the canvas
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );


renderer.domElement.onmousedown = function( e ){

HELD = true;
console.log('Yay! We clicked!');

var pixel_coords = new THREE.Vector2( e.clientX, e.clientY );

console.log('Pixel coords', pixel_coords);

var vp_coords = new THREE.Vector2(
( pixel_coords.x / window.innerWidth ) * 2 - 1, //X
-( pixel_coords.y / window.innerHeight ) * 2 + 1) // Y

console.log('Viewport coords', vp_coords);

var vp_coords_near = new THREE.Vector3( vp_coords.x, vp_coords.y, 0);


var raycaster = new THREE.Raycaster();
raycaster.setFromCamera(vp_coords_near, camera);
var intersects = raycaster.intersectObject(invisible_plane);

// console.log('Ray to Invisible Plane', intersects[0].point);

// update cube position
//torus.position.set(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z);

if (e.shiftKey) {
controls.enabled = false;
}

var position = intersects[0].point;

if (controls.enabled == false) {
var geometry = new THREE.TorusKnotGeometry(10, 3, 64, 8, 2, 3);
var material = new THREE.MeshStandardMaterial({ color: 0xFF69B4});

var torus = new THREE.Mesh( geometry, material );
torus.position.copy(position);

scene.add(torus);
LASTOBJECT = torus;

// while (render.domElement.onmousemove ) {
// torus.scale.set(torus.scale.x + DELTA, torus.scale.y + DELTA, torus.scale.z + DELTA);
// }

}

};

renderer.domElement.onmousemove = function ( e ) {


if (HELD == true && controls.enabled == false) {


if (e.movementY > 0) {
LASTOBJECT.scale.set(LASTOBJECT.scale.x + DELTA, LASTOBJECT.scale.y + DELTA, LASTOBJECT.scale.z + DELTA);
} else if (e.movementY < 0) {
LASTOBJECT.scale.set(LASTOBJECT.scale.x - DELTA, LASTOBJECT.scale.y - DELTA, LASTOBJECT.scale.z - DELTA);
} else if (LASTOBJECT.scale.y > 0) {
LASTOBJECT.material.color.set(0x7CFC00);
} else {
LASTOBJECT.material.color.set(0xFF69B4);
}


}


};


renderer.domElement.onmouseup = function ( e ) {

HELD = false;

if (controls.enabled == false) {
controls.enabled = true;
}
};


// setup lights
var ambientLight = new THREE.AmbientLight();
scene.add( ambientLight );

var light = new THREE.DirectionalLight( 0xffffff, 5.0 );
light.position.set( 10, 100, 10 );
scene.add( light );

// configure cube
var geometry = new THREE.TorusKnotGeometry(10, 3, 64, 8, 2, 3);
var material = new THREE.MeshStandardMaterial({ color: 0xFFFF00});

var torusKnot = new THREE.Mesh( geometry, material );




//
// The invisible plane
//
geometry = new THREE.PlaneGeometry( 10000, 10000 );
material = new THREE.MeshBasicMaterial( {
visible: false
});

var invisible_plane = new THREE.Mesh( geometry, material );

scene.add( invisible_plane );
//
//
//



// interaction
controls = new OrbitControls( camera, renderer.domElement );

// call animation/rendering loop
animate();

Expand All @@ -41,11 +182,36 @@

requestAnimationFrame( animate );

for(var t in window.All_TORUSES) {
t = ALL-Toures(t);

console.log("We reached this part of the code");

var T = Math.PI/2;

var x = Math.sin(T/2) * 0;
var y = Math.sin(T/2) * 0;
var z = Math.sin(T/2)*1;
var w = Math.cos(T/2);

var q = new THREE.Quaternion(
x,
y,
z,
w);

t.Quaternion.slerp(q, 0.01);
}




// and here..
controls.update();
renderer.render( scene, camera );

};
</script>
</head>
<body></body>
</html>

Loading