Mobile-Enabled Box Drawing
Demo
Link to project GitHub
About Concept
The core concept behind this project is to harness the potential of mobile devices to create interactive and dynamic box drawings on a computer screen. While the shape of the boxes remains constant, users can manipulate various attributes, including density, size, color, and borders, to craft an array of distinct box compositions.
References:
This project draws inspiration from the course material and class notes regarding mobile device integration for interactive experiences. Additionally, P5.js examples provide valuable insights into creative coding techniques.
Class note Link for mobile & the P5.js Example
Progress:
Phone Rotation Control: The initial step involved employing phone rotation as a means to steer the direction of the rectangles displayed on the computer screen.
Integration of WEBGL and Adjustment Buttons: WEBGL technology was integrated into the project to enhance the rendering of graphics. Moreover, buttons were introduced to enable users to fine-tune the characteristics of the boxes.
Screen Size Compatibility: Through the use of the 'map' function in P5.js, the project was further refined to ensure that the dimensions of the mobile device screen align seamlessly with the computer screen.
Link to sketch: https://editor.p5js.org/DerJuni/full/zIV0kImlj
Future Possibilities:
The project harbors exciting potential for expansion and refinement, including:
3D World and Camera Integration: Incorporating cameras within a 3D environment would grant users the ability to modify their perspective, offering a dynamic and immersive experience. Users could explore and interact with their box drawings from various angles, adding a new layer of creativity and interactivity.
Sketches:
Attached are initial sketches that provide a glimpse into the creative and visual direction of this mobile-enabled box drawing project.
