Deliverable 2: Custom A-Frame Component Generation


Description:

The goal of this deliverable is to create a system that constructs A-Frame components based on user input. Components provide the appearance, behavior, and functionality of entities in A-Frame. Thus, generating custom A-Frame components that are interpreted from user commands will enhance the capabilities of the current system. This deliverable also includes a parser that validates the generated A-Frame components to make sure that the components are functional and appropriately integrated with the A-Frame environment. Afterwards, the serialization module will be updated to support Javascript components. Finally, we'll test different scenarios and components to evaluate their quality and accuracy.

Project: A-Frame Project

Implementation Steps:

  1. Create component generation system
  2. Parse Javascript components
  3. Integrate components with A-Frame entities
  4. Update Serialization to include Javascript components
  5. Test custom component functionality

System Design Update:

  • System Instructions Added:
    • If a user requests an entity with behavior or appearance that requires functionality beyond standard A-Frame components, interpret this as a cue to generate a custom A-Frame component designed to implement the requested behavior or appearance. This custom component should then be directly included within the entity's <a-entity> HTML tag by specifying the component's name as an attribute, avoid using setAttribute() in javascript for this purpose.
    • Each individual custom component should be within its own <js> tags. If there are multiple components, put each in its own <js> tags, i.e <js> ... </js> <js> ... </js> . Also, these tags should be outside <a-scene> and <a-entity> tags.
    • For entities that require button event listeners, use a custom component instead of the event-set component. Also, use mostly the trigger button to handle the events in the event listener.
    • Whenever there's a request to modify an existing custom component's behavior or functionality, don't alter the original component. Instead, create a completely new component with a different unique name(i.e change name from 'orbit' to 'orbit-2'), and update entities in the scene to use the new version of the component.
    • Follow this structure for generating all custom A-Frame components with a simple unique name, ensuring consistency and quality: AFRAME.registerComponent('unique-name', {schema:{...}, init: function(){...}, update: function(oldData){...}, tick: function(time, deltaTime){...}, remove: function(){...}, pause: function(){...}, play: function(){...}});

Testing Results:

  • Functional Testing

    Test Command Description Pass/Fail
    1 Create an entity with a custom cube primitive component Test simple custom component generation 1
    2 Add another component to the cube that makes it spin diagonally Test adding multiple components to an entity 1
    3 Speed up the spin of the cube a little bit Test component modification 1
    4 Save the scene to Disk as rotation scene Test serialization to disk with custom component 1
    5 Save the scene to the browser as rotation scene Test serialization to browser with custom component 1
    6 Load scene from Disk Test deserialization from disk with custom component 1
    7 Load rotation scene from the Browser Test deserialization from browser with custom component 1
    8 Remove the spin component from the cube Test removing component from entity 1
    9 Make the cube wider and shorter Test modification of existing component 1
    10 Add the spin component back to the cube and change the color of the cube to light-blue Test adding existing component back onto entity 1

    Test 3:

    Test 3

    Test 10:

    Test 10

  • Extended Testing

    Test Command Description Pass/Fail
    1 Add a small sphere that orbits around a sphere Test more complex entity animation and movement 1
    2 Add more small spheres that orbit at different speeds and angles all around the main sphere Test adding multiple entities, each with different components/variables 1
    3 Create a cube that changes color when selected Test component with event listener 1
    4 Create a cube that gradually changes color over time Test component with time-based properties 1
    5 Create an entity that changes geometric shape when selected Test component that alters geometric shape of an entity 1
    6 Create a cube with a blink effect that appears and disappears Test component that makes an entity blink in-and-out of the scene 1
    7 Create an entity of 50 small spheres that exhibit flocking behavior Test component that moves multiple entities as a group 0
    8 Create a cube that floats and rotates like it's in space Test component that has applies low gravity movement 1
    9 (Using an existing ping pong table scene) Add a small red ball that bounces on top of the ping pong table Test bouncing component on an existing scene 1
    10 Add another bouncing ball like the current one, but with a much higher bounce height Test bounce component with different bouncing heights on existing scene 1
    11 Create a door that opens up smoothly when selected Test an entity that behaves like a door 0
    12 Create a cube that expands and contracts each time at a different axis Test component that modifies the shape and scale of an object 1

    Test 2:

    Test 2

    Alternate Test 2:

    Alt Test 2

    Test 4:

    Test 4

    Test 6:

    Test 6

    Test 7:

    Test 7

    Alternate Test 7: (Create an entity of 50 small spheres that all move like a cohesive group, like a flock of birds)

    Alt Test 7

    Test 9:

    Test 9

    Test 10:

    Test 10

    Test 11:

    Test 11

    Test 12:

    Test 12

Edge Case Testing Results:

Test Command Description Handled
1 Create a sphere with an orbit component, Add an orbit component to the same sphere Test component registration with a name already in use 1
2 Create an cube with an empty component Test a blank or empty component 1
3 Create an entity that can travel at the speed of light Test component with extreme/impossible physics 1
4 Create an entity with a rotate component that is inside a semi-transparent entity with a rotate component Test nested entities with the same component 1
5 Create a cube that tastes like a pizza Test ambiguous or nonsensical prompts 1

Test 3:

Test 3

Test 4:

Test 4

Test 5:

Test 5