Skip to content

Commit 5f84fac

Browse files
author
Valentina Lafchieva
committed
2 parents 02c0bb4 + 6d0828a commit 5f84fac

File tree

15 files changed

+723
-122
lines changed

15 files changed

+723
-122
lines changed

‎examples/graphics/canvas_animated.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
// click to add circle
2626
canvas.addEventListener('click', (event) => {
27-
addCircle(event.clientX, event.clientY);
27+
addCircle(event.clientX, event.clientY);
2828
});
2929

3030
// set initial properties of new circle

‎experiments/benedikt/6_graphics.html

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Drawing Instrument</title>
7+
<style>
8+
:root {
9+
--background: #f5f5f5;
10+
--background-dark-mode: #2b2b2b;
11+
--background-darker: #dddddd;
12+
--background-dark-mode-darker: #1f1f1f;
13+
--color-1: #7baaf7;
14+
--color-2: #7cd3a1;
15+
--color-3:#fceb80;
16+
--color-4: #e58a7f;
17+
}
18+
19+
body {
20+
margin: 0;
21+
overflow: hidden;
22+
background-color: var(--background);
23+
-webkit-user-select: none; /* Safari */
24+
-ms-user-select: none; /* IE 10 and IE 11 */
25+
user-select: none; /* Standard syntax */
26+
}
27+
28+
@media (prefers-color-scheme: dark) {
29+
body {
30+
background-color: var(--background-dark-mode);
31+
}
32+
}
33+
34+
h1 {
35+
font-family: Helvetica, sans-serif;
36+
position: absolute;
37+
top: 3vh;
38+
left: 50%;
39+
transform: translateX(-50%);
40+
}
41+
42+
@media (prefers-color-scheme: dark) {
43+
h1 {
44+
color: white;
45+
}
46+
}
47+
48+
svg {
49+
width: 100vw;
50+
height: 100vh;
51+
}
52+
53+
.color-selector {
54+
position: absolute;
55+
top: 90%;
56+
left: 50%;
57+
transform: translate(-50%, -50%);
58+
display: flex;
59+
flex-direction: row;
60+
gap: 1vw;
61+
border-radius: 2vw;
62+
padding: 1.3vw;
63+
background-color: rgba(224, 224, 224, 0.4);
64+
backdrop-filter: blur(10px);
65+
66+
}
67+
68+
.color {
69+
width: 3.5vw;
70+
height: 3.5vw;
71+
cursor: pointer;
72+
border-radius: 0.5vw;
73+
}
74+
75+
.color-1 {
76+
background-color: var(--color-1);
77+
}
78+
79+
.color-2 {
80+
background-color: var(--color-2);
81+
}
82+
83+
.color-3 {
84+
background-color: var(--color-3);
85+
}
86+
87+
.color-4 {
88+
background-color: var(--color-4);
89+
}
90+
91+
.reset {
92+
position: absolute;
93+
top: 90%;
94+
left: 93%;
95+
transform: translate(-50%, -50%);
96+
font-size: 1.5vw;
97+
font-family: Helvetica, sans-serif;
98+
background-color: var(--background-darker);
99+
padding: 1vw;
100+
border-radius: 0.5vw;
101+
cursor: pointer;
102+
}
103+
104+
105+
106+
</style>
107+
</head>
108+
<body>
109+
<h1>Pick a Color and start Drawing</h1>
110+
<svg xmlns="http://www.w3.org/2000/svg"></svg>
111+
<div class="color-selector">
112+
<div id="1" class="color color-1"></div>
113+
<div id="2" class="color color-2"></div>
114+
<div id="3" class="color color-3"></div>
115+
<div id="4" class="color color-4"></div>
116+
</div>
117+
118+
<div class="reset">Reset</div>
119+
120+
<script>
121+
const svg = document.querySelector('svg');
122+
const resetButton = document.querySelector('.reset');
123+
const colorButtons = document.querySelectorAll('.color');
124+
let isDrawing = false;
125+
let currentColor = 'black';
126+
127+
colorButtons.forEach(button => {
128+
button.addEventListener('click', () =>{
129+
currentColor = currentColor = getComputedStyle(button).backgroundColor;
130+
});
131+
});
132+
133+
svg.addEventListener('mousedown', () => (isDrawing = true));
134+
svg.addEventListener('mouseup', () => (isDrawing = false));
135+
svg.addEventListener('mousemove', (event) => {
136+
if (isDrawing) createCircle(event.clientX, event.clientY);
137+
})
138+
139+
function createCircle(x, y) {
140+
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
141+
circle.setAttribute('cx', x);
142+
circle.setAttribute('cy', y);
143+
circle.setAttribute('r', 5+Math.random()*25, 0, 2 * Math.PI);
144+
circle.setAttribute('fill', currentColor);
145+
circle.setAttribute('cursor', 'pointer');
146+
svg.appendChild(circle);
147+
}
148+
149+
resetButton.addEventListener('click', () => {
150+
svg.innerHTML = '';
151+
});
152+
</script>
153+
154+
</body>
155+
</html>

‎experiments/benedikt/canvas_animated.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Animated Canvas - Graphics - Interactive Information</title>
6+
<style>
7+
body {
8+
margin: 0; padding: 0;
9+
}
10+
</style>
11+
</head>
12+
<body>
13+
14+
<canvas></canvas>
15+
16+
<script>
17+
const canvas = document.querySelector('canvas');
18+
const context = canvas.getContext('2d');
19+
20+
canvas.width = window.innerWidth;
21+
canvas.height = window.innerHeight;
22+
23+
const circles = []; // store circles for animation
24+
25+
// click to add circle
26+
canvas.addEventListener('click', (event) => {
27+
addCircle(event.clientX, event.clientY);
28+
});
29+
30+
// set initial properties of new circle
31+
function addCircle(x, y) {
32+
const circle = {
33+
x: x,
34+
y: y,
35+
radius: 20 + Math.random() * 30,
36+
color: "black",
37+
dx: Math.random() * 5, // random horizontal speed
38+
dy: Math.random() * 5, // random vertical speed
39+
};
40+
circles.push(circle);
41+
}
42+
43+
// animate the circles
44+
function animate() {
45+
context.clearRect(0, 0, canvas.width, canvas.height);
46+
47+
circles.forEach((circle) => {
48+
// update position
49+
circle.x += circle.dx;
50+
circle.y += circle.dy;
51+
52+
// bounce off walls
53+
if (circle.x - circle.radius < 0 || circle.x + circle.radius > canvas.width) {
54+
circle.dx *= -1;
55+
}
56+
if (circle.y - circle.radius < 0 || circle.y + circle.radius > canvas.height) {
57+
circle.dy *= -1;
58+
}
59+
60+
// draw the circle
61+
context.beginPath();
62+
context.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
63+
context.fillStyle = circle.color;
64+
context.fill();
65+
});
66+
// keep looping the animation
67+
requestAnimationFrame(animate); //
68+
}
69+
70+
animate(); // start animation loop
71+
</script>
72+
</body>
73+
</html>

‎experiments/benedikt/icons/moon.svg

Lines changed: 3 additions & 0 deletions
Loading

‎experiments/benedikt/icons/sun.svg

Lines changed: 11 additions & 0 deletions
Loading

‎experiments/benedikt/svg_editable.html

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Editable SVG - Graphics - Interactive Information</title>
6+
<style>
7+
body {
8+
margin: 0; padding: 0;
9+
}
10+
11+
svg {
12+
width: 100vw;
13+
height: 100vh;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
19+
<svg xmlns="http://www.w3.org/2000/svg"></svg>
20+
21+
<script>
22+
const svg = document.querySelector('svg');
23+
24+
let selectedCircle = null; // circle being dragged or resized
25+
let offsetX, offsetY; // offsets for dragging
26+
27+
// add circle at click location
28+
svg.addEventListener('click', (event) => {
29+
if (event.target.tagName === 'circle') return; // Avoid creating circles on existing ones
30+
createCircle(event.clientX, event.clientY);
31+
});
32+
33+
// areate a new circle
34+
function createCircle(x, y) {
35+
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
36+
circle.setAttribute('cx', x);
37+
circle.setAttribute('cy', y);
38+
circle.setAttribute('r', 10+Math.random()*100, 0, 2 * Math.PI);
39+
circle.setAttribute('fill', 'black');
40+
circle.setAttribute('cursor', 'pointer');
41+
svg.appendChild(circle);
42+
43+
// Add drag behavior
44+
circle.addEventListener('mousedown', (event) => {
45+
selectedCircle = circle;
46+
offsetX = event.clientX - parseFloat(circle.getAttribute('cx'));
47+
offsetY = event.clientY - parseFloat(circle.getAttribute('cy'));
48+
});
49+
}
50+
51+
// Adjust size or drag the circle
52+
svg.addEventListener('mousemove', (event) => {
53+
if (!selectedCircle) return;
54+
55+
if (event.shiftKey) {
56+
// adjust size of circle
57+
const cx = parseFloat(selectedCircle.getAttribute('cx'));
58+
const cy = parseFloat(selectedCircle.getAttribute('cy'));
59+
const dx = event.clientX - cx;
60+
const dy = event.clientY - cy;
61+
const newRadius = Math.sqrt(dx * dx + dy * dy); // Pythagoras
62+
selectedCircle.setAttribute('r', newRadius);
63+
} else {
64+
// drag circle
65+
const x = event.clientX - offsetX;
66+
const y = event.clientY - offsetY;
67+
selectedCircle.setAttribute('cx', x);
68+
selectedCircle.setAttribute('cy', y);
69+
}
70+
});
71+
72+
// Stop dragging or resizing the circle
73+
svg.addEventListener('mouseup', () => { selectedCircle = null; });
74+
svg.addEventListener('mouseleave', () => { selectedCircle = null; });
75+
76+
</script>
77+
</body>
78+
</html>

0 commit comments

Comments
 (0)