-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpage_3.html
96 lines (88 loc) · 3.91 KB
/
page_3.html
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="description" content="Evaluación diagnóstica de Introducción al Desarrollo Front End con HTML, CSS y JavaScript" />
<meta name="keywords" content="HTML, CSS, JavaScript" />
<meta name="author" content="Joaquin Perez" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<title>Ejemplo 3 - Geometría de líneas</title>
</head>
<body>
<div id="uno"><a href="index.html">PORTADA</a></div>
<div id="otro"><a href="page_1.html">01</a> / <a href="page_2.html">02</a> / <strong><a href="page_3.html">03</a></strong></div>
<script>
// function setup() {
// createCanvas(windowWidth - 50, windowHeight - 50).position(25, 30).style("z-index", -1);
// }
// function draw() {
// background(225);
// }
// function windowResized() {
// resizeCanvas(windowWidth - 50, windowHeight - 50);
// }
let r1, r2, r3, r4;
function setup() {
createCanvas(windowWidth - 50, windowHeight - 50).position(25, 30).style("z-index", -1);
btn = createButton ('Guardar imagen');
btn.position(windowWidth - 120,windowHeight - 30);
btn.mousePressed(atacazoartistico);
fill(255, 204);
noStroke();
r1 = new MRect(1, 134.0, 0.532, 0.1 * height, 10.0, 60.0);
r2 = new MRect(2, 44.0, 0.166, 0.3 * height, 5.0, 50.0);
r3 = new MRect(2, 58.0, 0.332, 0.4 * height, 10.0, 35.0);
r4 = new MRect(1, 120.0, 0.0498, 0.9 * height, 15.0, 60.0);
}
function draw() {
background(0);
r1.display();
r2.display();
r3.display();
r4.display();
r1.move(mouseX - width / 2, mouseY + height * 0.1, 30);
r2.move((mouseX + width * 0.05) % width, mouseY + height * 0.025, 20);
r3.move(mouseX / 4, mouseY - height * 0.025, 40);
r4.move(mouseX - width / 2, height - mouseY, 50);
}
class MRect {
constructor(iw, ixp, ih, iyp, id, it) {
this.w = iw; // ancho de una barra
this.xpos = ixp; // posición x del rectángulo
this.h = ih; // altura del rectángulo
this.ypos = iyp; // posición y del rectángulo
this.d = id; // distancia de una barra
this.t = it; // número de barras
}
move(posX, posY, damping) {
let dif = this.ypos - posY;
if (abs(dif) > 1) {
this.ypos -= dif / damping;
}
dif = this.xpos - posX;
if (abs(dif) > 1) {
this.xpos -= dif / damping;
}
}
display() {
for (let i = 0; i < this.t; i++) {
rect(
this.xpos + i * (this.d + this.w),
this.ypos,
this.w,
height * this.h
);
}
}
}
function windowResized() {
resizeCanvas(windowWidth - 50, windowHeight - 50);
}
function atacazoartistico() {
saveCanvas("imagen", "png")
}
</script>
</body>
</html>