SlideShare a Scribd company logo
Digital Cube
Oscar, Leigh, Tylen, Bambi, Rebecca
Interactive Digital Cube

                  First design concepts: The
                  ideas of producing a cube
                  with a rope or pulling
                  device to enable
                  interaction.
                  Also enabling rotation by
                  adding arrows to prompt
                  the user to turn the cube.

                  This would be created
                  using HTML5 & CSS3.
Other ideas included the concept of a
4D maze of which you had to rotate
the cube in order to reach the ending.
Adding ‘Interactions with JavaScript
JavaScript is a great utility (as a programming language, of course) on the web
for creating dynamic content as well as animating content. During the
development, I decided to take a CSS3-made cube made by Rich
Bradshaw, recoded the parts and added interactivity to the faces of the cube
which will act as interactive panels.
The HTML5 Canvas Element

One of the main criteria for creating the Digital Cube
was being able to rub it, I had the idea of using the
<canvas> element in HTML5.
The <canvas> element is like a drawing whiteboard, you
get to draw on it, but we wanted to simulate rubbing so
we used the <canvas> element to create rub marks on
the cube.

As soon as you stop rubbing, those marks disappear.
Presentation week 2

More Related Content

Similar to Presentation week 2

Design doc
Design docDesign doc
Design doc
BeccaEelbeck93
 
Scribbit Virtual Pen Presentation
Scribbit Virtual Pen PresentationScribbit Virtual Pen Presentation
Scribbit Virtual Pen Presentation
vr1988
 
What we learned from our first blockchain software project
What we learned from our first blockchain software projectWhat we learned from our first blockchain software project
What we learned from our first blockchain software project
Iang Yim
 
Fabricjs ppt
Fabricjs pptFabricjs ppt
Fabricjs ppt
Cubet Techno Labs
 
Design in motion. The new frontier of interaction design
Design in motion. The new frontier of interaction designDesign in motion. The new frontier of interaction design
Design in motion. The new frontier of interaction design
Antonio De Pasquale
 
JESS3 Featured in Computer Arts for foursquare I Voted
JESS3 Featured in Computer Arts for foursquare I VotedJESS3 Featured in Computer Arts for foursquare I Voted
JESS3 Featured in Computer Arts for foursquare I Voted
JESS3
 
Remembering Carrawburgh: Using VR to (Re)Create the Past
Remembering Carrawburgh: Using VR to (Re)Create the PastRemembering Carrawburgh: Using VR to (Re)Create the Past
Remembering Carrawburgh: Using VR to (Re)Create the Past
Deborah Mayers
 
Insckape SVG Workshop
Insckape SVG WorkshopInsckape SVG Workshop
Insckape SVG Workshop
Brianna Laugher
 
Sketch: Rapid Prototyping & Theme Design
Sketch: Rapid Prototyping & Theme DesignSketch: Rapid Prototyping & Theme Design
Sketch: Rapid Prototyping & Theme Design
Ryan King
 

Similar to Presentation week 2 (9)

Design doc
Design docDesign doc
Design doc
 
Scribbit Virtual Pen Presentation
Scribbit Virtual Pen PresentationScribbit Virtual Pen Presentation
Scribbit Virtual Pen Presentation
 
What we learned from our first blockchain software project
What we learned from our first blockchain software projectWhat we learned from our first blockchain software project
What we learned from our first blockchain software project
 
Fabricjs ppt
Fabricjs pptFabricjs ppt
Fabricjs ppt
 
Design in motion. The new frontier of interaction design
Design in motion. The new frontier of interaction designDesign in motion. The new frontier of interaction design
Design in motion. The new frontier of interaction design
 
JESS3 Featured in Computer Arts for foursquare I Voted
JESS3 Featured in Computer Arts for foursquare I VotedJESS3 Featured in Computer Arts for foursquare I Voted
JESS3 Featured in Computer Arts for foursquare I Voted
 
Remembering Carrawburgh: Using VR to (Re)Create the Past
Remembering Carrawburgh: Using VR to (Re)Create the PastRemembering Carrawburgh: Using VR to (Re)Create the Past
Remembering Carrawburgh: Using VR to (Re)Create the Past
 
Insckape SVG Workshop
Insckape SVG WorkshopInsckape SVG Workshop
Insckape SVG Workshop
 
Sketch: Rapid Prototyping & Theme Design
Sketch: Rapid Prototyping & Theme DesignSketch: Rapid Prototyping & Theme Design
Sketch: Rapid Prototyping & Theme Design
 

More from BeccaEelbeck93

Final presentation for Principles of Interaction Design
Final presentation for Principles of Interaction Design Final presentation for Principles of Interaction Design
Final presentation for Principles of Interaction Design
BeccaEelbeck93
 
Design doc
Design docDesign doc
Design doc
BeccaEelbeck93
 
Emotion & Immersive Media Final Presentation
Emotion & Immersive Media Final Presentation Emotion & Immersive Media Final Presentation
Emotion & Immersive Media Final Presentation
BeccaEelbeck93
 
Commpunication device presentation
Commpunication device presentationCommpunication device presentation
Commpunication device presentation
BeccaEelbeck93
 
Mid point presentation - The Salvation Army
Mid point presentation - The Salvation ArmyMid point presentation - The Salvation Army
Mid point presentation - The Salvation Army
BeccaEelbeck93
 
Ambient Device
Ambient DeviceAmbient Device
Ambient Device
BeccaEelbeck93
 
Taxi driver and elephant
Taxi driver and elephantTaxi driver and elephant
Taxi driver and elephant
BeccaEelbeck93
 

More from BeccaEelbeck93 (7)

Final presentation for Principles of Interaction Design
Final presentation for Principles of Interaction Design Final presentation for Principles of Interaction Design
Final presentation for Principles of Interaction Design
 
Design doc
Design docDesign doc
Design doc
 
Emotion & Immersive Media Final Presentation
Emotion & Immersive Media Final Presentation Emotion & Immersive Media Final Presentation
Emotion & Immersive Media Final Presentation
 
Commpunication device presentation
Commpunication device presentationCommpunication device presentation
Commpunication device presentation
 
Mid point presentation - The Salvation Army
Mid point presentation - The Salvation ArmyMid point presentation - The Salvation Army
Mid point presentation - The Salvation Army
 
Ambient Device
Ambient DeviceAmbient Device
Ambient Device
 
Taxi driver and elephant
Taxi driver and elephantTaxi driver and elephant
Taxi driver and elephant
 

Recently uploaded

一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
lhtvqoag
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
DakshGudwani
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Designforuminternational
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
ijk38lw
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
modular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdfmodular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdf
RashmitaSwain3
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
kuapy
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
k4krdgxx
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
lunaemel03
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 

Recently uploaded (20)

一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
modular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdfmodular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdf
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 

Presentation week 2

  • 1. Digital Cube Oscar, Leigh, Tylen, Bambi, Rebecca
  • 2. Interactive Digital Cube First design concepts: The ideas of producing a cube with a rope or pulling device to enable interaction. Also enabling rotation by adding arrows to prompt the user to turn the cube. This would be created using HTML5 & CSS3.
  • 3. Other ideas included the concept of a 4D maze of which you had to rotate the cube in order to reach the ending.
  • 4. Adding ‘Interactions with JavaScript JavaScript is a great utility (as a programming language, of course) on the web for creating dynamic content as well as animating content. During the development, I decided to take a CSS3-made cube made by Rich Bradshaw, recoded the parts and added interactivity to the faces of the cube which will act as interactive panels.
  • 5. The HTML5 Canvas Element One of the main criteria for creating the Digital Cube was being able to rub it, I had the idea of using the <canvas> element in HTML5. The <canvas> element is like a drawing whiteboard, you get to draw on it, but we wanted to simulate rubbing so we used the <canvas> element to create rub marks on the cube. As soon as you stop rubbing, those marks disappear.