PROTOTYPE-TAMR Interactive 3D Logo
- This is a prototype of the TAMR logo in 3D to be used for development.
- The camera is currently set to the mouse which makes the environment interactive.
- There are still a number of things being worked out.
- Some context and possibilities for animations are below this prototype.
<iframe height='714' scrolling='no' title='3d ORTH-CAMERA TAMR-LOGO' src='//codepen.io/Daniel_Silber-Baker/embed/PdeyBw/?height=714&theme-id=26830&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Daniel_Silber-Baker/pen/PdeyBw/'>3d ORTH-CAMERA TAMR-LOGO</a> by Daniel Silber-Baker (<a href='https://codepen.io/Daniel_Silber-Baker'>@Daniel_Silber-Baker</a>) on <a href='https://codepen.io'>CodePen</a>.<!-- [et_pb_line_break_holder] --></iframe>
Non-Ortho Environment With Animation and Orbit Control
- This environment has 3D cylinders set up without using orthographic projection.
- This environment also leverages `
orbitControl ()`, which is a p5 allowance (based on WebGL) that allows users to move the entire scene by clicking and dragging anywhere on the canvas (you can try it!).- There are some conflicts this would cause with the animation, but I thought it would be a good possibility to surface in general.
<iframe height='668' scrolling='no' title='p5.js 3d NON-ORTHO Environment TAMR' src='//codepen.io/Daniel_Silber-Baker/embed/BOJVWR/?height=668&theme-id=26830&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Daniel_Silber-Baker/pen/BOJVWR/'>p5.js 3d NON-ORTHO Environment TAMR</a> by Daniel Silber-Baker (<a href='https://codepen.io/Daniel_Silber-Baker'>@Daniel_Silber-Baker</a>) on <a href='https://codepen.io'>CodePen</a>.<!-- [et_pb_line_break_holder] --></iframe>
Animating Object Rotation in Ortho
- This environment has 3D cylinders set up using orthographic projection.
- The animation leverages the frames of the`draw()` function to rotate the objects on the x-axes.
- We can customize the speed and number of frames for an objects rotations.
<iframe height='637' scrolling='no' title='3d ORTH-CAMERA TAMR-Cyllinder => Circle' src='//codepen.io/Daniel_Silber-Baker/embed/eLMeWo/?height=637&theme-id=26830&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Daniel_Silber-Baker/pen/eLMeWo/'>3d ORTH-CAMERA TAMR-Cyllinder =&rt; Circle</a> by Daniel Silber-Baker (<a href='https://codepen.io/Daniel_Silber-Baker'>@Daniel_Silber-Baker</a>) on <a href='https://codepen.io'>CodePen</a>.<!-- [et_pb_line_break_holder] --></iframe>
Ortho-With Camera Attached To Mouse
- This environment has a camera attached to the mouse– so that you can explore some of the camera options within an `ortho()` environment.
- This is just an exploration of what is possible. Try moving your mouse around the canvas.
<iframe height='637' scrolling='no' title='3d ORTH-CAMERA TAMR-Environment Setup' src='//codepen.io/Daniel_Silber-Baker/embed/VGxQGO/?height=637&theme-id=26830&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Daniel_Silber-Baker/pen/VGxQGO/'>3d ORTH-CAMERA TAMR-Environment Setup</a> by Daniel Silber-Baker (<a href='https://codepen.io/Daniel_Silber-Baker'>@Daniel_Silber-Baker</a>) on <a href='https://codepen.io'>CodePen</a>.<!-- [et_pb_line_break_holder] --></iframe>