代写WebGL程序、代写Python、Java

日期：2021-10-01 10:59

2021/9/27 An Interactive 2D Drawing Application

An Interactive 2D Drawing Application

Due Sunday by 11:55pm Points 100 Submitting a text entry box

Available Sep 23 at 10am - Oct 13 at 11:55pm 21 days

Start Assignment

Overview

The purpose of this first assignment is to set you up for the programming environment. You are asked to implement a web-based

interactive 2D drawing application, which requires you to start learning and using WebGL.

This homework will use Github Classroom.

IMPORTANT: Click on this link (https://classroom.github.com/a/CJr-sPKC (https://classroom.github.com/a/CJr-sPKC) ) to join the

assignment on Github and get access to your personal repository.

After you join, you might be prompted with a message like this:

2021/9/27 An Interactive 2D Drawing Application

https://canvas.ucdavis.edu/courses/595787/assignments/718396 2/7

You can disregard that message and head directly to your repository (blurred-out section in the image).

You will use this repository to manage your submission. Please commit and push regularly to save your work.

Pushing will only be possible up until the deadline, so make sure everything you want to submit has been pushed by then.

2021/9/27 An Interactive 2D Drawing Application

https://canvas.ucdavis.edu/courses/595787/assignments/718396 3/7

We provide a template code that contains basic files to get you started. Feel free to do your own implementation from scratch, but if you

choose to do so, do not build on technologies that have to be set up for grading (i.e., no web servers or libraries that require the grader to

download and/or install them). The provided template is an HTML/JS webpage that you can display by hosting the index.html file locally

and viewing the local URL in your browser of choice. We strongly recommend developing in Google Chrome as it will be the platform used

for grading, but feel free to develop using any other browser, provided the code runs in Chrome. We'll show you how to simply host a page

locally in one of the lectures.

Requirements

Your drawing application should allow the user to place lines and simple shapes in the display area by using keyboard-mouse

combinations. The user will press a key to select a color or a shape, and make a mouse click to place the current shape filled with the

current color at the location of the cursor. Note that the outline of the shape needs to be shown in a distinctive color. Please provide at

least the following key-color and key-shape mappings:

p - point: a point of size canvas.height/100

h - horizontal line: a horizontal line with length canvas.height/4

v - vertical line: a vertical line with length canvas.height/4

t - triangle: an equilateral triangle with a side length canvas.height/8

q - square: a square with side length canvas.height/10

g - color: Aggie Gold #FFBF00

b - color: Aggie Blue #022851

f - fill mode: fill triangle / square

o - outline mode: only draw the outlines of a triangle / square (i.e., no fill color)

c - clear: clear the canvas (remove all objects)

Each shape’s center is the mouse click’s location. However, for lines, the click location is where the line begins. If shapes would overlap,

the newly added one should be drawn over the previously added ones.

2021/9/27 An Interactive 2D Drawing Application

https://canvas.ucdavis.edu/courses/595787/assignments/718396 4/7

Your application should also allow the user to resize the window such that as the canvas size changes accordingly the sizes of all the

current shapes also change correspondingly in a refresh. There is a function in app.js called resizeToDisplay( ) to handle scaling. It's

bound to the window.onresize event, so it's called whenever a user changes the window size. Keep in mind, that most devices these days

support high dpi scaling. That means that 1px read from the DOM doesn't necessarily equate 1px on a browsers screen. You'll need to use

window.devicePixelRatio to get the correct ratio.

Here is an example of what a drawing might look like:

2021/9/27 An Interactive 2D Drawing Application

https://canvas.ucdavis.edu/courses/595787/assignments/718396 5/7

If have all the requirements, feel free to implement and play around with the application in any way you want. Add more shapes, colors,

etc. however you see fit. A useful bonus interaction would be to show the outline of the shape (e.g. in red) to be drawn when hovering

(before adding it to you internal data structure). That way you get finer controls to create nicer drawings.

2021/9/27 An Interactive 2D Drawing Application

https://canvas.ucdavis.edu/courses/595787/assignments/718396 6/7

Template

The file structure of the template code is as follows:

.

├── css

│ └── style.css style sheet for the application; no need to modify

├── index.html single html file with a ui that helps you track what mode you're in; no need to modify

├── js

│ ├── app.js sets up the application and contains the main render loop

│ ├── appstate.js changes the state of the application; handlers for input should be implemented here

│ ├── drawables.js contains an abstract drawable class and child classes that implement the objects to draw

│ ├── input.js monitors and stores all necessary input to complete the assignment; no need to modify

│ ├── main.js main entry point to the application; no need to modify

│ ├── shader.js class to encapsulate shader program usage; no need to modify

│ └── utils.js contains few useful utility functions; no need to modify

└── shaders

├── fragment.glsl fragment shader of the program; no need to modify

└── vertex.glsl vertex shader of the program; no need to modify

Each file contains extensive comments on what each method does or is supposed to be doing. Wherever you find a TODO, you are

expected to implement your solution. Note that you're certainly allowed to add functions as you see fit. We will go over the template code

in a lecture / discussion session.

Grading Criteria:

20% Shapes

20% Coloring and Outline Rendering

10% Locations

10% Drawing Order

2021/9/27 An Interactive 2D Drawing Application

https://canvas.ucdavis.edu/courses/595787/assignments/718396 7/7

20% Resize / refresh

20% Overall (robustness, programing style, documentation, etc.)

How to submit your work:

Submit this homework by submitting the URL to your Github repository along with your Github username here on Canvas.

Structure your Canvas submission like this:

Github User: [your Github username here]

Repository: [your repository URL here]

Your work has to be submitted to Canvas and pushed to Github before the due date (11:55pm, 10/03/2021). We will consider the latest

commit for grading, so consider if your improvements are worth a late penalty.

Nota Bene

We do not grade a program that does not run. Late submissions will lose 10% per day.

You are encouraged to help one another, but you must write your own code. If you use somebody else's code, document it. You

must abide by the UC Davis Code of Academic Conduct.