processingPaint/index.html at main · EvaristoCARibeiro/processingPaint · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Paint App</title>
    <!-- Include p5.js library from a CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: center;     /* Center vertically */
            min-height: 100vh;       /* Ensure body takes full viewport height */
            margin: 0;               /* Remove default body margin */
            background-color: #f0f0f0; /* Light gray background */
            font-family: Arial, sans-serif; /* Fallback font */
            flex-direction: column; /* Stack elements vertically */
            padding: 20px; /* Add some padding around the content */
            box-sizing: border-box; /* Include padding in element's total width and height */
        }
        h1 {
            color: #333;
            margin-bottom: 10px;
            font-size: 2em;
            text-align: center;
        }
        p {
            color: #555;
            margin-bottom: 20px;
            text-align: center;
            line-height: 1.5;
            max-width: 600px;
        }
        canvas {
            border: 1px solid #ccc; /* Add a border to the canvas */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Add a subtle shadow */
            border-radius: 8px; /* Rounded corners for the canvas */
            display: block; /* Ensure canvas behaves as a block element for centering */
            margin: 0 auto; /* Center canvas itself if not within a flex container */
            max-width: 100%; /* Ensure canvas is responsive */
            height: auto; /* Maintain aspect ratio */
        }
        .instructions {
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            max-width: 600px;
            text-align: left; /* Align text left within instructions box */
        }
        .instructions span {
            font-weight: bold;
            color: #007bff; /* A nice blue for key indicators */
        }
    </style>
</head>
<body>
    <h1>Web Paint App</h1>
    <p>Draw on the canvas with your mouse! Use the following keys to control the drawing:</p>

    <div id="sketch-container">
        <!-- The p5.js canvas will be inserted here -->
    </div>

    <div class="instructions">
        <h3>Controls:</h3>
        <ul>
            <li><span class="font-bold">R</span> - Set color to Red</li>
            <li><span class="font-bold">G</span> - Set color to Green</li>
            <li><span class="font-bold">B</span> - Set color to Blue</li>
            <li><span class="font-bold">D</span> - Set drawing mode to Dotted</li>
            <li><span class="font-bold">S</span> - Set drawing mode to Solid</li>
            <li><span class="font-bold">1-5</span> - Change stroke weight/dot size</li>
            <li><span class="font-bold">C</span> - Clear canvas (set background to white)</li>
            <li><span class="font-bold">V</span> - Save current canvas as 'Screenshot.jpg'</li>
        </ul>
    </div>

    <script>
        // --- p5.js Sketch Code ---
        // This is your translated Processing sketch
        let currentColor; // Current drawing color (p5.Color object)
        let currentSize;  // Current stroke weight or dot size
        let currentMode;  // 0: dotted, 1: solid

        // Setup function, runs once when the sketch starts
        function setup() {
            // Create a canvas with a fixed size, but responsive to smaller screens.
            // It will be placed inside the 'sketch-container' div.
            let canvas = createCanvas(500, 500);
            canvas.parent('sketch-container'); // Attach canvas to the specific div
            background(255); // Set initial background to white

            // Initialize drawing variables
            currentColor = color(0); // Default color: Black
            currentSize = 1;         // Default size for dots/lines
            currentMode = 0;         // Default mode: dotted

            noSmooth(); // Optional: Makes lines/shapes sharper, can be removed for smoother rendering
        }

        // Draw function, runs repeatedly (by default 60 times per second)
        function draw() {
            // Use push() and pop() to isolate drawing settings for the info panel
            push();
            stroke(0);        // Set stroke to black for the info box border
            strokeWeight(1);  // Set stroke weight to 1 for the info box border
            fill(150);        // Set fill to gray for the info box background
            // Draw the info box rectangle with a slight border radius
            rect(width - 120, 20, 100, 70, 8);

            textSize(14); // Set text size for info display
            fill(0);      // Set text color to black

            // Determine and display the current color name
            let colorName = "Unknown";
            // Compare p5.Color objects by converting them to string representations
            if (currentColor.toString() === color(0).toString()) {
                colorName = "Black";
            } else if (currentColor.toString() === color(255, 0, 0).toString()) {
                colorName = "Red";
            } else if (currentColor.toString() === color(0, 255, 0).toString()) {
                colorName = "Green";
            } else if (currentColor.toString() === color(0, 0, 255).toString()) {
                colorName = "Blue";
            }
            text(`Color: ${colorName}`, width - 110, 40);

            // Display the current stroke weight/dot size
            text(`Weight: ${currentSize}`, width - 110, 60);

            // Display the current drawing mode
            if (currentMode === 0) {
                text("Mode: Dotted", width - 110, 80);
            } else if (currentMode === 1) {
                text("Mode: Solid", width - 110, 80);
            }
            pop(); // Restore previous drawing settings
        }

        // KeyPressed function, called once every time a key is pressed
        function keyPressed() {
            if (key === 'r') {
                currentColor = color(255, 0, 0); // Set color to Red
            } else if (key === 'g') {
                currentColor = color(0, 255, 0); // Set color to Green
            } else if (key === 'b') {
                currentColor = color(0, 0, 255); // Set color to Blue
            } else if (key === 'd') {
                currentMode = 0; // Set mode to Dotted
            } else if (key === 's') {
                currentMode = 1; // Set mode to Solid
            } else if (keyCode >= 49 && keyCode <= 53) { // Check for number keys '1' through '5'
                currentSize = keyCode - 48; // Convert ASCII keyCode to integer (e.g., 49 -> 1)
            } else if (key === 'c') {
                background(255); // Clear the canvas to white
            } else if (key === 'v') {
                saveCanvas('Screenshot', 'jpg'); // Save the current canvas as a JPG image
            } else {
                console.log("Error: invalid key"); // Log invalid key presses to console
            }
        }

        // MouseDragged function, called when the mouse is dragged
        function mouseDragged() {
            // Ensure drawing only happens if the mouse is within the canvas boundaries
            if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
                if (currentMode === 0) { // Dotted mode: draw individual circles (dots)
                    noStroke(); // Dots should not have an outline
                    fill(currentColor); // Fill dots with the current drawing color
                    circle(mouseX, mouseY, currentSize * 4); // Scale up size for better dot visibility
                } else if (currentMode === 1) { // Solid mode: draw continuous lines
                    stroke(currentColor); // Set line color
                    strokeWeight(currentSize); // Set line thickness
                    line(pmouseX, pmouseY, mouseX, mouseY); // Draw line from previous to current mouse position
                    noFill(); // Lines generally don't have fill
                }
            }
        }

        // WindowResized function, called whenever the browser window is resized
        function windowResized() {
            // Maintain the 500x500 dimension, but allow shrinking on smaller screens
            let newWidth = min(500, windowWidth - 40); // 40px for padding
            resizeCanvas(newWidth, 500); // Height remains fixed as per original sketch
            // Reposition canvas if needed, though flexbox should handle centering.
        }
    </script>
</body>
</html>