辅导WebGL程序、辅导Python、Java
- 首页 >> Matlab编程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
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
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
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
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
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
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.