Skip to content

Commit 4cdfb5e

Browse files
garciadelcastillogarciadelcastillo
committed
Refactor of folders
1 parent d0bccb2 commit 4cdfb5e

9 files changed

Lines changed: 238 additions & 0 deletions

File tree

Web-Based_Drawing/drawing-vector-full/css/styles.css renamed to Web-Based_Drawing/4-1_drawing-vector-full/css/styles.css

File renamed without changes.

Web-Based_Drawing/drawing-vector-full/index.html renamed to Web-Based_Drawing/4-1_drawing-vector-full/index.html

File renamed without changes.

Web-Based_Drawing/drawing-vector-full/js/sketch.js renamed to Web-Based_Drawing/4-1_drawing-vector-full/js/sketch.js

File renamed without changes.

Web-Based_Drawing/drawing-vector-start/css/styles.css renamed to Web-Based_Drawing/4-1_drawing-vector-start/css/styles.css

File renamed without changes.

Web-Based_Drawing/drawing-vector-start/index.html renamed to Web-Based_Drawing/4-1_drawing-vector-start/index.html

File renamed without changes.

Web-Based_Drawing/drawing-vector-start/js/sketch.js renamed to Web-Based_Drawing/4-1_drawing-vector-start/js/sketch.js

File renamed without changes.

‎Web-Based_Drawing/4-2_drawing-vector-polylines/css/styles.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/* Makes the canvas stick to (0, 0) */
2+
/* html, body {
3+
margin: 0;
4+
padding: 0;
5+
} */
6+
7+
8+
/* Makes the canvas centered on the page */
9+
canvas {
10+
padding: 0;
11+
margin: auto;
12+
display: block;
13+
position: absolute;
14+
top: 0;
15+
bottom: 0;
16+
left: 0;
17+
right: 0;
18+
}

‎Web-Based_Drawing/4-2_drawing-vector-polylines/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
7+
<title>Drawing App: Click & Drag</title>
8+
9+
<link rel="stylesheet" type="text/css" href="css/styles.css">
10+
</head>
11+
12+
<body>
13+
14+
<!-- Note how no canvas is needed here, p5.js will place one -->
15+
<!-- If you want finer control of where your canvas element goes, see: https://github.com/processing/p5.js/wiki/Positioning-your-canvas#relocating-the-canvas -->
16+
17+
18+
<!-- Use full p5.js library when developing locally -->
19+
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/p5.js"></script> -->
20+
21+
<!-- Switch to minified version when deploying for production/use -->
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/p5.min.js"></script>
23+
24+
<!-- Optional sound libraries -->
25+
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/addons/p5.sound.min.js"></script> -->
26+
27+
<script type="text/javascript" src="js/sketch.js"></script>
28+
29+
</body>
30+
31+
</html>

‎Web-Based_Drawing/4-2_drawing-vector-polylines/js/sketch.js‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
let alpha = 127;
2+
let shapeColor = [0, 0, 0, alpha];
3+
let shapeMode = 'ellipse';
4+
let shapeSize = 50;
5+
let lastClicked = {x: 0, y: 0};
6+
7+
let doc = {
8+
backgroundColor: [255, 255, 255],
9+
shapes: [],
10+
};
11+
12+
13+
function setup() {
14+
const canvas = createCanvas(windowWidth, windowHeight);
15+
canvas.drop(parseFile);
16+
}
17+
18+
19+
function draw() {
20+
background(doc.backgroundColor);
21+
22+
// Draw shapes from the doc
23+
for (let i = 0; i < doc.shapes.length; i++) {
24+
const shape = doc.shapes[i];
25+
switch(shape.type) {
26+
case 'ellipse':
27+
noStroke();
28+
fill(shape.fillColor);
29+
ellipse(shape.x, shape.y, shape.w, shape.h);
30+
break;
31+
case 'rectangle':
32+
noStroke();
33+
fill(shape.fillColor);
34+
rect(shape.x, shape.y, shape.w, shape.h);
35+
break;
36+
case 'line':
37+
noFill();
38+
stroke(shape.strokeColor);
39+
strokeWeight(shape.strokeWeight);
40+
line(shape.x1, shape.y1, shape.x2, shape.y2);
41+
break;
42+
}
43+
}
44+
45+
// Draw shapes continuously
46+
if (mouseIsPressed) {
47+
switch (shapeMode) {
48+
case 'ellipse':
49+
noStroke();
50+
fill(shapeColor);
51+
ellipse(lastClicked.x, lastClicked.y, 2 * Math.abs(mouseX - lastClicked.x), 2 * Math.abs(mouseY - lastClicked.y));
52+
break;
53+
54+
case 'rectangle':
55+
noStroke();
56+
fill(shapeColor);
57+
rect(lastClicked.x, lastClicked.y, mouseX - lastClicked.x, mouseY - lastClicked.y);
58+
break;
59+
60+
case 'line':
61+
stroke(shapeColor);
62+
strokeWeight(shapeSize);
63+
line(lastClicked.x, lastClicked.y, mouseX, mouseY);
64+
break;
65+
}
66+
}
67+
}
68+
69+
function mousePressed() {
70+
// console.log("Mouse pressed at " + mouseX + ", " + mouseY);
71+
lastClicked.x = mouseX;
72+
lastClicked.y = mouseY;
73+
}
74+
75+
function mouseReleased() {
76+
let shape;
77+
switch(shapeMode) {
78+
case 'ellipse':
79+
shape = {
80+
type: 'ellipse',
81+
x: lastClicked.x,
82+
y: lastClicked.y,
83+
w: 2 * (mouseX - lastClicked.x),
84+
h: 2 * (mouseY - lastClicked.y),
85+
fillColor: shapeColor
86+
};
87+
break;
88+
case 'rectangle':
89+
shape = {
90+
type: 'rectangle',
91+
x: lastClicked.x,
92+
y: lastClicked.y,
93+
w: mouseX - lastClicked.x,
94+
h: mouseY - lastClicked.y,
95+
fillColor: shapeColor
96+
};
97+
break;
98+
case 'line':
99+
shape = {
100+
type: 'line',
101+
x1: lastClicked.x,
102+
y1: lastClicked.y,
103+
x2: mouseX,
104+
y2: mouseY,
105+
strokeColor: shapeColor,
106+
strokeWeight: shapeSize
107+
};
108+
break;
109+
}
110+
111+
doc.shapes.push(shape);
112+
}
113+
114+
115+
function keyTyped() {
116+
// SHAPES
117+
if (key === 'e') {
118+
shapeMode = 'ellipse';
119+
} else if (key === 'r') {
120+
shapeMode = 'rectangle';
121+
} else if (key === 'l') {
122+
shapeMode = 'line';
123+
}
124+
125+
// SIZE
126+
if (key === '+') {
127+
shapeSize += 10;
128+
console.log("Shape size is now " + shapeSize);
129+
} else if (key === '-') {
130+
shapeSize -= 10;
131+
console.log("Shape size is now " + shapeSize);
132+
}
133+
134+
// COLORS
135+
if (key === 'R') {
136+
shapeColor = [255, 0, 0, alpha];
137+
} else if (key === 'G') {
138+
shapeColor = [0, 255, 0, alpha];
139+
} else if (key === 'B') {
140+
shapeColor = [0, 0, 255, alpha];
141+
} else if (key === 'W') {
142+
shapeColor = [255, 255, 255, alpha];
143+
} else if (key === 'K') {
144+
shapeColor = [0, 0, 0, alpha];
145+
} else if (key === 'C') {
146+
shapeColor = [0, 255, 255, alpha];
147+
} else if (key === 'Y') {
148+
shapeColor = [255, 255, 0, alpha];
149+
} else if (key === 'M') {
150+
shapeColor = [255, 0, 255, alpha];
151+
} else if (key === 'O') {
152+
shapeColor = [255, 165, 0, alpha];
153+
} else if (key === 'P') {
154+
shapeColor = [255, 192, 203, alpha];
155+
} else if (key === 'L') {
156+
shapeColor = [123, 104, 238, alpha];
157+
}
158+
159+
// SAVING
160+
if (key === 'f') {
161+
saveCanvas('drawing_' + getDateTime(), 'png');
162+
} else if (key === 'j') {
163+
saveJSON(doc, 'drawing_' + getDateTime() + '.json');
164+
}
165+
}
166+
167+
168+
function parseFile(file) {
169+
console.log(file);
170+
171+
if (file.subtype === 'json') {
172+
doc = file.data;
173+
}
174+
}
175+
176+
177+
178+
179+
// A function that returns the date and time in YYYYMMDD_HHMMSS format, with leading zeros if necessary.
180+
function getDateTime() {
181+
let date = new Date();
182+
let year = date.getFullYear();
183+
let month = (date.getMonth() + 1).toString().padStart(2, '0');
184+
let day = date.getDate().toString().padStart(2, '0');
185+
let hours = date.getHours().toString().padStart(2, '0');
186+
let minutes = date.getMinutes().toString().padStart(2, '0');
187+
let seconds = date.getSeconds().toString().padStart(2, '0');
188+
return year + month + day + '_' + hours + minutes + seconds;
189+
}

0 commit comments

Comments
 (0)