Scribd
Upload
7 views5 pages

Computer Graphics Programming Assignment Unit 3

This document describes a programming assignment for a computer graphics course, focusing on creating a 3D animated scene with a bouncing ball that changes color upon hitting edges. The scene features a shadow-casting ball illuminated by a fixed yellow light, set against a gradient background that enhances the visual effects. The provided code implements the animation using the Three.js library, detailing the setup of the scene, camera, lighting, and ball motion.

Uploaded by

George Bwire
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views5 pages

Computer Graphics Programming Assignment Unit 3

This document describes a programming assignment for a computer graphics course, focusing on creating a 3D animated scene with a bouncing ball that changes color upon hitting edges. The scene features a shadow-casting ball illuminated by a fixed yellow light, set against a gradient background that enhances the visual effects. The provided code implements the animation using the Three.js library, detailing the setup of the scene, camera, lighting, and ball motion.

Uploaded by

George Bwire
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Programming Assignment Unit 3

University of the People

CS4406 – Computer Graphics

Color and Blending

Ankita Gangwar (Instructor)

February 18th, 2026.


This code creates a 3D scene with a spherical ball that bounces and changes color each time it

hits the edges. As the ball moves, it casts a shadow adding depth to the scene. The scene is

illuminated by a fixed yellow directional light positioned in the upper-left corner, and the

background features a yellow glow that gradually fades into dark gray, enhancing the lighting

effect and making the shadows more visible. The animation runs continuously, producing a

visually dynamic and engaging display of a color-changing bouncing ball.

The following is the URL for the Full Page View: [Link]

The following is the URL for the Code View: [Link]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CS4406 Unit 3 – Bouncing Color Changing Ball with Shadow</title>

<style>
body {
margin: 0;
background: #000000;
}

#container {
width: 500;
height: 500;
}
</style>
</head>

<body>
<div id="container"></div>

<script src="[Link]

<script>

// STANDARD TEMPLATE
var WIDTH = 500;
var HEIGHT = 500;

var scene = new [Link]();

var camera = new [Link](45, WIDTH / HEIGHT, 1, 1000);


[Link](0, 150, 200); // raise camera to see shadow
[Link](0, 0, 0);

var renderer = new [Link]({ antialias: true });


[Link](WIDTH, HEIGHT);
[Link](0x000000, 1);
[Link] = true; // enable shadows
[Link] = [Link];

[Link]("container").appendChild([Link]);

// Illuminated light-yellow (FFFFAA) light source in a fixed position at the upper left
corner
var bgCanvas = [Link]("canvas");
[Link] = 256;
[Link] = 256;
var ctx = [Link]("2d");

var grad = [Link](0, 0, 10, 0, 0, 256);


[Link](0, "#FFFFAA");
[Link](0.4, "#555522");
[Link](1, "#222222");

[Link] = grad;
[Link](0, 0, 256, 256);

[Link] = new [Link](bgCanvas);

// CUSTOM CODE
// FLOOR (to receive shadow)
var floor = new [Link](
new [Link](500, 500),
new [Link]({ opacity: 0.5 })
);
[Link].x = -[Link] / 2;
[Link].y = 0;
[Link] = true;
[Link](floor);

// BALL (casts shadow)


var ball = new [Link](
new [Link](30, 32, 32),
new [Link]({ color: 0x00ff00 })
);
[Link](0, 30, 0); // start above floor
[Link] = true;
[Link](ball);

// LIGHTING
[Link](new [Link](0x331100));

var yellowLight = new [Link](0xffff66, 1.5);


[Link](-50, 100, 50); // upper-left
[Link] = true;
[Link] = 1024;
[Link] = 1024;
[Link] = -150;
[Link] = 150;
[Link] = 150;
[Link] = -150;
[Link] = 1;
[Link] = 500;
[Link](yellowLight);

// BALL MOTION
var speedX = 1.5;
var speedZ = 1.2;
var limit = 90;

function randomColor() {
[Link]([Link]() * 0xffffff);
}

// RENDER LOOP
function animate() {
requestAnimationFrame(animate);

// move ball in X-Z plane (so shadow is visible on floor)


[Link].x += speedX;
[Link].z += speedZ;

if ([Link].x > limit || [Link].x < -limit) {


speedX *= -1;
randomColor();
}

if ([Link].z > limit || [Link].z < -limit) {


speedZ *= -1;
randomColor();
}

[Link](scene, camera);
}
animate();
</script>
</body>
</html>

You might also like