Architectural Sketch
This project is a web-based tool designed to allow users to create architectural sketches by selecting and placing elements such as trees, houses, people, and shrubs on a canvas. The goal is to enable users to build realistic and creative architectural scenes, emulating the feel of pen sketching and watercolor on paper. This interactive tool combines the aesthetics of traditional art with the flexibility of digital design, encouraging users to explore their creativity in architectural and landscape design.
Interaction Flow
Element Selection: Users select an element (architecture, human, tree, shrub) by clicking the corresponding button in the header.
Element Placement: A randomly selected image of the chosen element type is added to the target area at a random position.
Drag and Drop: Users can drag elements around the target area. The draggable functionality is handled by the
draggable.jsmodule.Resize and Rotate: Users can resize and rotate elements by interacting with the resize handle.
Remove Elements: If an element is dragged near the bottom of the screen, it is removed from the scene.
Code : JavaScript (main.js)
The main JavaScript file handles the interaction logic. It imports necessary CSS and modules, sets up drag-and-drop functionality, and handles the addition of new elements to the target area.
Import Statements: Import CSS and JavaScript modules.
Drag Callbacks: Set up callbacks for drag start, move, and end events.
Button Event Listeners: Add event listeners to buttons to randomly select and place images of architectural elements, trees, shrubs, and humans onto the target area.
Image Arrays: Arrays of image file names for different types of elements.
Add Element to Target Area: When a button is clicked, a new image is randomly selected from the corresponding array and added to the target area.
Code : draggable.js
This file manages the drag-and-drop interactions. It includes functions for setting drag callbacks, handling drag actions, and managing transformations (scale and rotation) of the draggable elements.
Callbacks: Default drag callbacks for starting, moving, and ending drag actions.
Event Listeners: Handle touch and mouse events to manage dragging and resizing.
Utility Functions: Helpers for transformations, such as getting current scale and rotation, calculating distances and angles, and checking if an image coordinate is opaque.
CSS (draggable.css)
The CSS styles for draggable elements and resize handles ensure the visual consistency and usability of the interactive components.
Next Step
For the next step, I would like to enhance the architectural sketching tool by combining it with drawing tools that allow users to freely draw and sketch their ideas. I believe this addition will provide users with greater flexibility and creativity in their designs.