GraphicsContest.js

/*
 * File: GraphicsContest.js
 * ------------------------
 * Creates a landscape with pine trees. Moving the mouse changes the time from
 * day to night (dependent on the mouse's x-coordinate).
 */

"use strict";
// CONSTANTS
let GWINDOW_WIDTH = 600;
let GWINDOW_HEIGHT = 600;
let DAY_COLOR = "#87ceeb";
let NIGHT_COLOR = "#020035";
let GRASS_COLOR = "#1F932B";
let DIRT_COLOR = "#5E4125";
let GRASS_HEIGHT = 60;
let GROUND_Y = GWINDOW_HEIGHT / 2 + 40;
let GROUND_HEIGHT = GWINDOW_HEIGHT / 2 + GROUND_Y;
let TREE_HEIGHT = 40;
let TREE_WIDTH = 40;
let TREE_COLORS = ["#237521", "#2d992b", "#34b832"];
let TREE_COUNT = 5;
let TREE_TRI_COUNT = 3;
let SUN_RAD = 20;

// temp variables
let rotationAngle = 0;
let day = "";
let night = "";
let sun = "";

function GraphicsContest() {
   const gw = GWindow(GWINDOW_WIDTH, GWINDOW_HEIGHT);
   gw.add(createUniverse());
   gw.add(createSky());
   gw.add(createSun());
   gw.add(createGround());
   gw.add(createTrees());

   let mouseMove = function(e) {
    rotationAngle = 360 - (e.getX() / GWINDOW_WIDTH) * 360; // calculates an angle based off the ratio of the mouse's x-coordinate and the whole screen width.
    day.setStartAngle(rotationAngle); 
    night.setStartAngle(180 + rotationAngle);

    // Once the night arc shape passes the circle shape in the sky, turn the sun white to simulate a moon
    if (rotationAngle <= 265 && rotationAngle >= 86) {
        sun.setColor("White");
    } else { // once the night arc shape passes, turn the circle back into the sun 
        sun.setColor("Yellow");
    }

   };
   gw.addEventListener("mousemove", mouseMove);
}

/**
 * Function: createUniverse
 * --------------------------------
 * Creates the space background by drawing a grey rectangle and displaying astericks as stars.
 */
function createUniverse() {
    let universe = GCompound();
    let space = createFilledRect(0, 0, GWINDOW_WIDTH, GWINDOW_HEIGHT, "#1B1A1A");
    universe.add(space);
    let startY = 30;
    for (let i = 0; i < 8; i++) {
        let startX = 20;
        for (let j = 0; j < 20; j++) {
            let star = GLabel("*", startX, startY);
            star.setColor("White"); 
            star.setFont("700 36px Arial");
            universe.add(star);
            startX += 50;
        }
        startY += 30;
    }
    return universe;
}

/**
 * Function: createSky
 * --------------------------------
 * Creates the sky by making two arcs representing the day and night respectively. 
 */
function createSky() {
    let sky = GCompound();
    day = GArc(0, 0, GWINDOW_WIDTH, GWINDOW_HEIGHT, 0, 180);
    day.setFilled(true);
    day.setColor(DAY_COLOR);
    night = GArc(0, 0, GWINDOW_WIDTH, GWINDOW_HEIGHT, 180, 180);
    night.setFilled(true);
    night.setColor(NIGHT_COLOR);
    sky.add(day);
    sky.add(night);
    
    return sky;
}

/**
 * Function: createGround
 * --------------------------------
 * Creates the earth by creating a small green rectangle on top of a brown rectangle.
 */
function createGround() {
    let ground = GCompound();
    let grass = createFilledRect(0, GWINDOW_HEIGHT / 2, GWINDOW_WIDTH, GRASS_HEIGHT, GRASS_COLOR);
    ground.add(grass);
    let dirt = createFilledRect(0, GROUND_Y, GWINDOW_WIDTH, GROUND_HEIGHT, DIRT_COLOR);
    ground.add(dirt);
    return ground;
}

/**
 * Function: createTrees
 * --------------------------------
 * Creates multiple trees by stacking triangles on top of one another using the GPolygon class and using
 * a brown rectangle as the stump. 
 */
function createTrees() {
    let tree = GCompound();

    for (let i = 0; i <= TREE_COUNT; i++) {
        let treeX = (GWINDOW_WIDTH / TREE_COUNT) * i + (GWINDOW_WIDTH / TREE_COUNT) / 2;
        let treeY = GROUND_Y - TREE_HEIGHT * 3;
        let logX = treeX - TREE_WIDTH / 4 + 5;
        let logY = GROUND_Y - TREE_HEIGHT - 40;
        for (let j = 0; j < TREE_TRI_COUNT; j++) {
            let triangle = GPolygon();
            triangle.addVertex(treeX, treeY);
            triangle.addVertex(treeX + TREE_WIDTH / 2, treeY + TREE_HEIGHT);
            triangle.addVertex(treeX - TREE_WIDTH / 2, treeY + TREE_HEIGHT);
            triangle.setFilled(true);
            triangle.setColor(TREE_COLORS[j]); // switch between three different shades of green 
            tree.add(triangle);
            treeY -= 20;
        }
        let log = createFilledRect(logX, logY, TREE_WIDTH / 4, 40, "Brown");
        tree.add(log);
    }
    return tree;
}

/**
 * Function: createSun
 * --------------------------------
 * Creates a circle in the sky representing the sun and moon. 
 */
function createSun(gw) {
    let sunX = GWINDOW_WIDTH / 2 - SUN_RAD;
    let sunY = 40;
    sun = createFilledCircle(sunX, sunY, SUN_RAD * 2, "Yellow");
    return sun;
}

/**
 * Function: createFilledCircle
 * --------------------------------
 * Given an x-position, y-position, radius, and color, this helper function 
 * creates a circle filled with the color parameter. 
 */
   function createFilledCircle(x, y, size, color) {
    let circle = GOval(x, y, size, size);
    circle.setFilled(true);
    circle.setColor(color);
    return circle;
  }

/**
 * Function: createFilledRect
 * --------------------------------
 * Given an x-position, y-position, width, height, and color, this helper function 
 * creates a rectangle filled with the color parameter. 
 */
function createFilledRect(x, y, width, height, color) {
    let rect = GRect(x, y, width, height);
    rect.setColor(color);
    rect.setFilled(true);
    return rect;
 }