diff --git a/.hintrc b/.hintrc new file mode 100644 index 00000000..ec1d9a47 --- /dev/null +++ b/.hintrc @@ -0,0 +1,25 @@ +{ + "extends": [ + "development" + ], + "hints": { + "axe/text-alternatives": [ + "default", + { + "document-title": "off" + } + ], + "axe/language": [ + "default", + { + "html-has-lang": "off" + } + ], + "meta-viewport": "off" + }, + "browserslist": [ + "defaults", + "not ie 11", + "not ios_saf <= 16.1" + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/02/index.html b/02/index.html index 7274c2b5..0618e72d 100644 --- a/02/index.html +++ b/02/index.html @@ -1,5 +1,6 @@ + CS460.org Assignment 2 + + + + + diff --git a/03/index.html b/03/index.html index 8693c011..152f28db 100644 --- a/03/index.html +++ b/03/index.html @@ -26,12 +26,128 @@ import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; - var renderer, controls, scene, camera; + var renderer, controls, scene, camera, torusKnot_pink, geometry_pink, material_pink, LASTOBJECT = null, DELTA; 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 ){ + controls.enabled = false; + 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); + + + + if (!e.shiftKey){ + return; // jumps only if shift is pressed + } + + if (e.shiftKey){ + // configure hot pink torusKnot + geometry_pink = new THREE.TorusKnotGeometry( 10, 3, 100, 16 ); + material_pink = new THREE.MeshBasicMaterial( { color: 0xFF69B4, wireframe: true } ); + torusKnot_pink = new THREE.Mesh( geometry_pink, material_pink ); + scene.add( torusKnot_pink ); + // place hot pink torusKnots + torusKnot_pink.position.set(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z); + } + + }; + + renderer.domElement.onmouseup = function( e ){ + controls.enabled = true; + }; + + renderer.domElement.onmousemove = function( e ){ + + + LASTOBJECT = torusKnot_pink; // just an idea.... e.onmousedown == true && e.onmouseup == false + + if ( e.onmousedown == true && e.onmouseup == false){ + DELTA = e.movementY; + LASTOBJECT.scale.set(LASTOBJECT.scale.x + DELTA, + LASTOBJECT.scale.y + DELTA, + LASTOBJECT.scale.z + DELTA); + if (LASTOBJECT.scale.x < 0){ + LASTOBJECT.material.color.set({color : 0x7CFC00}) + } + } + console.log('Are we good?', LASTOBJECT) + + + + + + } + + // 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 purple torusKnot + var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 ); + var material = new THREE.MeshBasicMaterial( { color: 0xAB00FF, wireframe: true } ); + var torusKnot = new THREE.Mesh( geometry, material ); + scene.add( torusKnot ); + + + // + // 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(); @@ -42,10 +158,11 @@ requestAnimationFrame( animate ); // and here.. + controls.update(); + renderer.render( scene, camera ); }; - diff --git a/04/index.html b/04/index.html index 7d9a5c71..5a5e5f66 100644 --- a/04/index.html +++ b/04/index.html @@ -94,8 +94,8 @@ gl_Position = final_position; // TODO Part 2 - - + // Size of the point + gl_PointSize = 8.0; } @@ -173,7 +173,7 @@ animate(); }; - function createRectangle(color, offset) { + function createPaddle(color, offset) { @@ -185,12 +185,12 @@ // // TODO Part 1 // - vertices = new Float32Array([ - -0.5, 0.5, 0.0, // V0 // 0 - -0.5, -0.5, 0.0, // V1, V4 // 1 - 0.5, 0.5, 0.0, // V2, V3 // 2 - 0.5, -0.5, 0.0 // V5 // 3 - ]); + vertices = new Float32Array( [ + -0.1, 0.05, 0.0, // V0 // 0 + -0.1, -0.05, 0.0, // V1, V4 // 1 + 0.1, 0.05, 0.0, // V2, V3 // 2 + 0.1, -0.05, 0.0 // V5 // 3 + ] ); indices = new Uint8Array([0, 1, 2, // Triangle 1 2, 1, 3]); // Triangle 2 @@ -208,7 +208,7 @@ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); // unbind // TODO Part 2 - return [v_buffer, i_buffer, color, offset, 6]; + return [v_buffer, i_buffer, color, offset, 6, gl.TRIANGLES]; } @@ -217,7 +217,21 @@ function createBall(color, offset) { // // TODO Part 2 - // + // Create geometry + vertices = new Float32Array( [0, 0, 0]); + indices = new Uint8Array([0]); + + v_buffer = gl.createBuffer(); // create + gl.bindBuffer( gl.ARRAY_BUFFER, v_buffer ); // bind + gl.bufferData( gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW ); // put data in + gl.bindBuffer( gl.ARRAY_BUFFER, null ); // unbind + + var i_buffer = gl.createBuffer(); // create + gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, i_buffer ); // bind + gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW ); // put data in + gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, null ); // unbind + + return [v_buffer, i_buffer, color, offset, 1, gl.POINTS]; } @@ -262,19 +276,20 @@ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); // unbind // TODO Part 2 - return [v_buffer, i_buffer, color, offset, 6, score]; + return [v_buffer, i_buffer, color, offset, 6, gl.TRIANGLES , score]; } function createBricks() { offset_x = -0.8 offset_y = 0.9 color = [ - [1, 1, 1, 1], - [1, 1, 1, 1], - [1, 1, 1, 1], - [1, 1, 1, 1], + [1, 0, 0, 1], + [1, 1, 0, 1], + [0, 0, 1, 1], + [1, 0, 1, 1], + [0 ,1, 0, 1], ] - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 5; i++) { for (let j = 0; j < 9; j++) { OBJECTS.push(createBrick(color[i], [offset_x, offset_y, 0], 4 - i)) offset_x += 0.2 @@ -296,6 +311,7 @@ gl.clear(gl.COLOR_BUFFER_BIT); // TODO Part 4 + updateBall(); for (var o = 0; o < OBJECTS.length; o++) { var current = OBJECTS[o]; @@ -345,7 +361,8 @@ // gl.drawArrays( gl.LINES, 0, 6 ); // TODO Part 2 - gl.drawElements(gl.TRIANGLES, VERTEXCOUNT, gl.UNSIGNED_BYTE, 0); + gl.drawElements(current[5], VERTEXCOUNT, gl.UNSIGNED_BYTE, 0); + // gl.drawElements(gl.POINTS, VERTEXCOUNT, gl.UNSIGNED_BYTE, 0); } } @@ -431,12 +448,69 @@ OBJECTS[1][3][1] += Math.sin(BALLDIRECTION) * 0.02; } + var step_x = .06; + var direction = -1; + window.onkeydown = function (e) { - if (STOPPED) { - // restart the game - window.location.reload(); + // Method 1 + // var paddleSpeed = 0.05; // Adjust the paddle speed + // var paddleWidth = 0.2; // Define the width of the paddle in normalized coordinates + // offset = OBJECTS[0]; + // // OBJECTS.push(createPaddle([1, 1, 1, 1], [0, -0.9, 0])); + // if (STOPPED) { + // // restart the game + // window.location.reload(); + // } + // if (e.code == 'ArrowLeft'){ + // if (offset[1] - paddleSpeed - paddleWidth / 2 >= -1.0) { + // offset[1] -= paddleSpeed; + // } + // } + // else if (e.code == 'ArrowRight') { + // // Make sure the paddle doesn't go off the right edge of the viewport + // if (offset[1] + paddleSpeed + paddleWidth / 2 <= 1.0) { + // offset[1] += paddleSpeed; + // } + // } + + // Method 2 + // for (var o = 0; o < (OBJECTS.length - OBJECTS.length + 1); o++) { + // var current = OBJECTS[o]; + + // var v_buffer = current[0]; + // var i_buffer = current[1]; + // var COLOR = current[2]; + // var OFFSET = current[3]; + // var VERTEXCOUNT = current[4]; + // } + // Remember: OBJECTS.push(createPaddle([1, 1, 1, 1], [0, -0.9, 0])); // BOTTOM PADDLE + + var paddle = OBJECTS[0]; + var OFFSET = paddle[3]; + + if (e.code != 'ArrowLeft' && e.code != 'ArrowRight'){ + direction = 0; + } + + if (e.code == 'ArrowLeft'){ + if ( OFFSET[0] <= -1. ) { + // If it hits the wall do nothing, else keep moving left + direction = null; + + } else { + direction = -1; + } } - // TODO Part 3 + if (e.code == 'ArrowRight') { + if ( OFFSET[0] >= 1. ) { + // If it hits the wall do nothing, else keep moving right + direction = null; + } else{ + direction = 1; + } + } + OFFSET[0] += direction*step_x; + }; diff --git a/05/Model.blend b/05/Model.blend new file mode 100644 index 00000000..cff29297 Binary files /dev/null and b/05/Model.blend differ diff --git a/05/Model.stl b/05/Model.stl new file mode 100644 index 00000000..df4a398c Binary files /dev/null and b/05/Model.stl differ diff --git a/05/Patrick.glb b/05/Patrick.glb new file mode 100644 index 00000000..ccfcb356 Binary files /dev/null and b/05/Patrick.glb differ diff --git a/05/poly.glb b/05/poly.glb new file mode 100644 index 00000000..ccfcb356 Binary files /dev/null and b/05/poly.glb differ