[SOLVED] html graph Skills for this task: objects, arrays, FSMs, iteration, and coding interactive motion.

Skills for this task: objects, arrays, FSMs, iteration, and coding interactive motion.
Project folder naming: LastnamePickup
Functionality Requirements

There is at least 1 class describing an entity that can be picked up or be dropped, i.e. a target.
It should be able to display.
It should know who picked it up and owns it.
Instances of this class should be distinguishable from each other in visible appearance and canvas location.

There is at least 1 class describing an entity that can pick up or drop a target entity, i.e. a collector.
It should be able to display.
It should also be able to move.
It should have at least 2 states of being, managed in an updateState method.
The states of this entity moving, still, etc. should be visibly distinguishable from each other.
Instances of this class should be distinguishable from each other in visible appearance and canvas location.

The main sketch should manage an array of at least 10 targets and at least 2 collectors.
Every target and collector should be displayed every frame.
At least 1 collector should be able to move at any given time either autonomouslycontinuously or in response to interaction. Moving means animating location over time, not teleporting to static positions. A collector should be able to pick up targets as it moves if it does not currently own one.
Some interaction tells the collector to drop any target it currently owns nearby.
Collectors should only pick up targets that are not owned by other collectors.
If only one collector is activemoving at a time, some interaction should be able to designate which is the active one.

Important rendering details:
Size your canvas at least 600600 but not bigger than laptop resolution about 12001000.
Style counts.
Design a visually and medically noninjurious world.
The index.html file should be edited to display the Title of your world and your name. The body should introduce your world and provide complete instructions on how to navigate and control it.

Code Structure Details

Never forget:
A header comment at the top of the main sketch IDs you, the date, the assignment. Cite any code references used that arent directly from me.
A header comment at the top each class file IDs you, the date, and describes the class, properties, and what it can do.
Declare global variables above the setup function definition. Use descriptive names.
The order of appearance for functions should be: setup, draw, then event handlers, followed by any custom functions.
Each method or custom function definition should be prefaced with a header comment explaining its purpose, its parameters if any, and any return value.
Declare nontrivial local variables at the top of their code block. Use descriptive names.
Comment nontrivial variables with their purpose as you declare them.
Comment major sections of code, and also any tricky individual statements.
Format code with indentation Format Document early and often and blank lines between major sections and functions.

Project Milestones

Worth one exercise grade together:

Wednesday, Nov. 6: Project Pitch. Post a description of your initial project idea in a MyCourses Discussion post no penalty for changing your mind.
Monday, Nov. 11: Code Structure Plan. Post a diagramsketch of your code structure in a MyCourses Discussion post as a reply to your Project Pitch post.
Monday, Nov 18 during class: Working prototype brought to class for peer and instructor feedback.
Monday, Nov 25 during class: Replacement exercise credit if project is ready during class for show and tell.

Your completed project should be posed to appropriate dropbox by Monday, Nov 25 at 11:59pm.

Grading

First impressions:

index.html edited to introduce and provide complete instructions
3
Coherently designed interaction and graphics that arent painful
10
Setup function:

Canvas sized 600600 or bigger not too big
2
Array of at least 10 targets objects created
5
At least 2 collector objects created
5
Draw function:

All entities display properly
5
All entities move location animated when appropriate
5
A target can have only one collector at a time
5
Any of the collectors can pick up targets
5
Target classes:

Constructor initializes properties cleanly
5
Instances distinguishable from each other in appearance and location
5
A method displays the target
5
Propertys and methods manage getting and losing a collector
5
Collector classes:

Constructor initializes properties cleanly
5
Instances distinguishable from each other in appearance and location
5
A method displays the collector
5
A method moves the collector
5
Propertys and methods manage picking and dropping a target
5
Interactive control of dropping targets
5
Runs with no syntax errors
5
Coding style deductions?

Comments: header, variables, code sections up to 5 pts
0
Variable naming and declaration placement up to 5 pts
0
Code formatting: clean alignment, and vspacing up to 5 pts
0
TOTAL
100