Deliverable 2: Custom A-Frame Component Generation

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 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:

  
  
  

  Alternate Test 2:

  
  
  

  Test 4:

  
  
  

  Test 6:

  
  
  

  Test 7:

  
  
  

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

  
  
  

  Test 9:

  
  
  

  Test 10:

  
  
  

  Test 11:

  
  
  

  Test 12:

  
  
  

Edge Case Testing Results:

Test 3:

Test 4:

Test 5: