Skip to content

Commit 0d3c84f

Browse files
garciadelcastillogarciadelcastillo
committed
Added splines project
1 parent b0a2e33 commit 0d3c84f

3 files changed

Lines changed: 313 additions & 0 deletions

File tree

‎Web-Based_Drawing/4-3_drawing-vector-splines/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-3_drawing-vector-splines/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>Vector Drawing App</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-3_drawing-vector-splines/js/sketch.js‎

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
const SNAP_DISTANCE = 20;
2+
3+
let alpha = 127;
4+
let fillColor = [0, 0, 0, alpha];
5+
let strokeColor = [0, 0, 0, 255];
6+
let strokeW = 2;
7+
let shapeMode = 'ellipse';
8+
let lastClicked = {x: 0, y: 0};
9+
let shapePoints = [];
10+
11+
let doc = {
12+
backgroundColor: [255, 255, 255],
13+
shapes: [],
14+
};
15+
16+
17+
function setup() {
18+
const canvas = createCanvas(windowWidth, windowHeight);
19+
canvas.drop(parseFile);
20+
}
21+
22+
23+
function draw() {
24+
background(doc.backgroundColor);
25+
26+
// Draw shapes from the doc
27+
for (let i = 0; i < doc.shapes.length; i++) {
28+
const shape = doc.shapes[i];
29+
switch(shape.type) {
30+
case 'ellipse':
31+
stroke(shape.strokeColor);
32+
strokeWeight(shape.strokeW);
33+
fill(shape.fillColor);
34+
ellipse(shape.x, shape.y, shape.w, shape.h);
35+
break;
36+
case 'rectangle':
37+
stroke(shape.strokeColor);
38+
strokeWeight(shape.strokeW);
39+
fill(shape.fillColor);
40+
rect(shape.x, shape.y, shape.w, shape.h);
41+
break;
42+
case 'line':
43+
noFill();
44+
stroke(shape.strokeColor);
45+
strokeWeight(shape.strokeW);
46+
line(shape.x1, shape.y1, shape.x2, shape.y2);
47+
break;
48+
case 'polyline':
49+
stroke(shape.strokeColor);
50+
strokeWeight(shape.strokeW);
51+
fill(shape.fillColor);
52+
beginShape();
53+
for (let i = 0; i < shape.vertices.length; i++) {
54+
vertex(shape.vertices[i].x, shape.vertices[i].y);
55+
}
56+
endShape();
57+
break;
58+
}
59+
}
60+
61+
// Draw shapes that we are currently manipulating/creating
62+
if (mouseIsPressed) {
63+
switch (shapeMode) {
64+
case 'ellipse':
65+
stroke(strokeColor);
66+
strokeWeight(strokeW);
67+
fill(fillColor);
68+
ellipse(lastClicked.x, lastClicked.y, 2 * Math.abs(mouseX - lastClicked.x), 2 * Math.abs(mouseY - lastClicked.y));
69+
break;
70+
71+
case 'rectangle':
72+
stroke(strokeColor);
73+
strokeWeight(strokeW);
74+
fill(fillColor);
75+
rect(lastClicked.x, lastClicked.y, mouseX - lastClicked.x, mouseY - lastClicked.y);
76+
break;
77+
78+
case 'line':
79+
noFill();
80+
stroke(strokeColor);
81+
strokeWeight(strokeW);
82+
line(lastClicked.x, lastClicked.y, mouseX, mouseY);
83+
break;
84+
}
85+
}
86+
87+
// Draw polyline?
88+
if (shapeMode === 'polyline') {
89+
stroke(strokeColor);
90+
strokeWeight(strokeW);
91+
fill(fillColor);
92+
beginShape();
93+
for (let i = 0; i < shapePoints.length; i++) {
94+
vertex(shapePoints[i].x, shapePoints[i].y);
95+
}
96+
vertex(mouseX, mouseY);
97+
endShape();
98+
}
99+
}
100+
101+
function mousePressed() {
102+
// console.log("Mouse pressed at " + mouseX + ", " + mouseY);
103+
lastClicked.x = mouseX;
104+
lastClicked.y = mouseY;
105+
106+
if (shapeMode === 'polyline') {
107+
let shouldSnap = false;
108+
if (shapePoints.length > 0 &&
109+
dist(mouseX, mouseY, shapePoints[0].x, shapePoints[0].y) < SNAP_DISTANCE) {
110+
shouldSnap = true;
111+
}
112+
113+
if (shouldSnap) {
114+
shapePoints.push({x: shapePoints[0].x, y: shapePoints[0].y});
115+
addPolyToDocument();
116+
} else {
117+
shapePoints.push({x: mouseX, y: mouseY});
118+
}
119+
}
120+
}
121+
122+
function mouseReleased() {
123+
let shape;
124+
switch(shapeMode) {
125+
case 'ellipse':
126+
shape = {
127+
type: 'ellipse',
128+
x: lastClicked.x,
129+
y: lastClicked.y,
130+
w: 2 * (mouseX - lastClicked.x),
131+
h: 2 * (mouseY - lastClicked.y),
132+
fillColor: fillColor,
133+
strokeColor: strokeColor,
134+
strokeW: strokeW
135+
};
136+
break;
137+
case 'rectangle':
138+
shape = {
139+
type: 'rectangle',
140+
x: lastClicked.x,
141+
y: lastClicked.y,
142+
w: mouseX - lastClicked.x,
143+
h: mouseY - lastClicked.y,
144+
fillColor: fillColor,
145+
strokeColor: strokeColor,
146+
strokeW: strokeW
147+
};
148+
break;
149+
case 'line':
150+
shape = {
151+
type: 'line',
152+
x1: lastClicked.x,
153+
y1: lastClicked.y,
154+
x2: mouseX,
155+
y2: mouseY,
156+
strokeColor: strokeColor,
157+
strokeW: strokeW
158+
};
159+
break;
160+
}
161+
162+
if (shape !== undefined) {
163+
doc.shapes.push(shape);
164+
}
165+
}
166+
167+
168+
function keyTyped() {
169+
// SHAPES
170+
if (key === 'e') {
171+
shapeMode = 'ellipse';
172+
} else if (key === 'r') {
173+
shapeMode = 'rectangle';
174+
} else if (key === 'l') {
175+
shapeMode = 'line';
176+
} else if (key === 'p') {
177+
shapeMode = 'polyline';
178+
shapePoints = [];
179+
}
180+
181+
// SHAPE INTERACTIONS
182+
if (keyCode === ENTER) {
183+
if (shapeMode === 'polyline') {
184+
addPolyToDocument();
185+
}
186+
}
187+
188+
// SIZE
189+
if (key === '+') {
190+
strokeW += 2;
191+
console.log("Shape size is now " + strokeW);
192+
} else if (key === '-') {
193+
strokeW -= 2;
194+
console.log("Shape size is now " + strokeW);
195+
}
196+
197+
// COLORS
198+
if (key === 'R') {
199+
fillColor = [255, 0, 0, alpha];
200+
} else if (key === 'G') {
201+
fillColor = [0, 255, 0, alpha];
202+
} else if (key === 'B') {
203+
fillColor = [0, 0, 255, alpha];
204+
} else if (key === 'W') {
205+
fillColor = [255, 255, 255, alpha];
206+
} else if (key === 'K') {
207+
fillColor = [0, 0, 0, alpha];
208+
} else if (key === 'C') {
209+
fillColor = [0, 255, 255, alpha];
210+
} else if (key === 'Y') {
211+
fillColor = [255, 255, 0, alpha];
212+
} else if (key === 'M') {
213+
fillColor = [255, 0, 255, alpha];
214+
} else if (key === 'O') {
215+
fillColor = [255, 165, 0, alpha];
216+
} else if (key === 'P') {
217+
fillColor = [255, 192, 203, alpha];
218+
} else if (key === 'L') {
219+
fillColor = [123, 104, 238, alpha];
220+
}
221+
222+
223+
// SAVING
224+
if (key === 'f') {
225+
saveCanvas('drawing_' + getDateTime(), 'png');
226+
} else if (key === 'j') {
227+
saveJSON(doc, 'drawing_' + getDateTime() + '.json');
228+
}
229+
}
230+
231+
function addPolyToDocument() {
232+
let shape = {
233+
type: 'polyline',
234+
vertices: shapePoints,
235+
fillColor: fillColor,
236+
strokeColor: strokeColor,
237+
strokeW: strokeW
238+
};
239+
doc.shapes.push(shape);
240+
shapePoints = [];
241+
}
242+
243+
function parseFile(file) {
244+
// console.log(file);
245+
246+
if (file.subtype === 'json') {
247+
doc = file.data;
248+
}
249+
}
250+
251+
252+
253+
254+
// A function that returns the date and time in YYYYMMDD_HHMMSS format, with leading zeros if necessary.
255+
function getDateTime() {
256+
let date = new Date();
257+
let year = date.getFullYear();
258+
let month = (date.getMonth() + 1).toString().padStart(2, '0');
259+
let day = date.getDate().toString().padStart(2, '0');
260+
let hours = date.getHours().toString().padStart(2, '0');
261+
let minutes = date.getMinutes().toString().padStart(2, '0');
262+
let seconds = date.getSeconds().toString().padStart(2, '0');
263+
return year + month + day + '_' + hours + minutes + seconds;
264+
}

0 commit comments

Comments
 (0)