Skip to content

Commit d0f34c6

Browse files
TiagoCavalcanteTiagoCavalcante
committed
Add color picker to the documentation
1 parent 56bdbb8 commit d0f34c6

File tree

5 files changed

+160
-6
lines changed

5 files changed

+160
-6
lines changed

‎docs/_includes/Sidebar.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
<ul>
2727
<li><a href="/mathics-threejs-backend/lights/ambient">ambient</a></li>
2828
<li><a href="/mathics-threejs-backend/lights/directional">directional</a></li>
29-
<li><a href="/mathics-threejs-backend/lights/spot">spot</a></li>
3029
<li><a href="/mathics-threejs-backend/lights/point">point</a></li>
30+
<li><a href="/mathics-threejs-backend/lights/spot">spot</a></li>
3131
</ul>
3232
</li>
3333
<li>

‎docs/_includes/color_picker.html

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<div style='display: flex; justify-content: center; flex-direction: row; align-items: center;'>
2+
<canvas width='300px' height='300px' id='color-canvas'></canvas>
3+
<canvas style='margin-left: 10px;' width='35px' height='300px' id='color-strip-canvas'></canvas>
4+
</div>
5+
6+
<div style='height: 5px; width: 5px; border-radius: 50%; border: 1px solid black; position: absolute; z-index: 1; display: none;' id='marker-1'></div>
7+
<div style='height: 5px; width: 5px; border-radius: 50%; border: 1px solid black; position: absolute; z-index: 1; display: none;' id='marker-2'></div>
8+
9+
<p style='text-align: center;'>
10+
Red:
11+
<span id='red'>0.50</span>
12+
Green:
13+
<span id='green'>0.50</span>
14+
Blue:
15+
<span id='blue'>0.50</span>
16+
</p>
17+
18+
<script>
19+
const marker1 = document.getElementById('marker-1');
20+
const marker2 = document.getElementById('marker-2');
21+
22+
function updateMarker1Position(event) {
23+
marker1.style.display = 'block';
24+
25+
const { left, top } = colorCanvas.getBoundingClientRect();
26+
marker1.style.left = `${event.clientX - left + colorCanvas.offsetLeft}px`;
27+
marker1.style.top = `${event.clientY - top + colorCanvas.offsetTop}px`;
28+
29+
const pixel = colorContext.getImageData(
30+
event.clientX - left,
31+
event.clientY - top,
32+
1,
33+
1
34+
).data;
35+
36+
document.getElementById('red').innerText = (pixel[0] / 255).toFixed(2);
37+
document.getElementById('green').innerText = (pixel[1] / 255).toFixed(2);
38+
document.getElementById('blue').innerText = (pixel[2] / 255).toFixed(2);
39+
}
40+
41+
function updateMarker2Position(event) {
42+
marker2.style.display = 'block';
43+
44+
const { left, top } = colorStripCanvas.getBoundingClientRect();
45+
marker2.style.top = `${event.clientY - top + colorStripCanvas.offsetTop}px`;
46+
47+
const colorStripPixel = colorStripContext.getImageData(
48+
event.clientX - left,
49+
event.clientY - top,
50+
1,
51+
1
52+
).data;
53+
54+
color = `rgba(${colorStripPixel[0]}, ${colorStripPixel[1]}, ${colorStripPixel[2]}, 1)`;
55+
56+
fillGradient();
57+
58+
const pixel = colorStripContext.getImageData(
59+
marker1.offsetTop - colorCanvas.offsetTop,
60+
marker1.offsetLeft - colorCanvas.offsetLeft,
61+
1,
62+
1
63+
).data;
64+
65+
document.getElementById('red').innerText = (pixel[0] / 255).toFixed(2);
66+
document.getElementById('green').innerText = (pixel[1] / 255).toFixed(2);
67+
document.getElementById('blue').innerText = (pixel[2] / 255).toFixed(2);
68+
}
69+
70+
function fillGradient() {
71+
colorContext.fillStyle = color;
72+
colorContext.fillRect(
73+
0,
74+
0,
75+
colorCanvas.width,
76+
colorCanvas.height
77+
);
78+
79+
const gradientWhite = colorContext.createLinearGradient(
80+
0,
81+
0,
82+
colorCanvas.width,
83+
0
84+
);
85+
gradientWhite.addColorStop(0, 'rgba(255, 255, 255, 1)');
86+
gradientWhite.addColorStop(1, 'rgba(255, 255, 255, 0)');
87+
88+
colorContext.fillStyle = gradientWhite;
89+
colorContext.fillRect(
90+
0,
91+
0,
92+
colorCanvas.width,
93+
colorCanvas.height
94+
);
95+
96+
const gradientBlack = colorContext.createLinearGradient(
97+
0,
98+
0,
99+
0,
100+
colorCanvas.height
101+
);
102+
gradientBlack.addColorStop(0, 'rgba(0,0,0,0)');
103+
gradientBlack.addColorStop(1, 'rgba(0,0,0,1)');
104+
105+
colorContext.fillStyle = gradientBlack;
106+
colorContext.fillRect(
107+
0,
108+
0,
109+
colorCanvas.width,
110+
colorCanvas.height
111+
);
112+
}
113+
114+
const colorCanvas = document.getElementById('color-canvas');
115+
const colorContext = colorCanvas.getContext('2d');
116+
117+
const colorStripCanvas = document.getElementById('color-strip-canvas');
118+
const colorStripContext = colorStripCanvas.getContext('2d');
119+
120+
marker2.style.left = `${colorStripCanvas.offsetLeft + 15}px`;
121+
122+
colorStripContext.rect(
123+
0,
124+
0,
125+
colorStripCanvas.width,
126+
colorStripCanvas.height
127+
);
128+
129+
const colorStripGradient = colorStripContext.createLinearGradient(
130+
0,
131+
0,
132+
0,
133+
colorStripCanvas.height
134+
);
135+
colorStripGradient.addColorStop(0, 'rgba(255, 0, 0, 1)');
136+
colorStripGradient.addColorStop(0.17, 'rgba(255, 255, 0, 1)');
137+
colorStripGradient.addColorStop(0.34, 'rgba(0, 255, 0, 1)');
138+
colorStripGradient.addColorStop(0.51, 'rgba(0, 255, 255, 1)');
139+
colorStripGradient.addColorStop(0.68, 'rgba(0, 0, 255, 1)');
140+
colorStripGradient.addColorStop(0.85, 'rgba(255, 0, 255, 1)');
141+
colorStripGradient.addColorStop(1, 'rgba(255, 0, 0, 1)');
142+
143+
colorStripContext.fillStyle = colorStripGradient;
144+
colorStripContext.fill();
145+
146+
let color = 'rgba(255, 255, 255, 1)';
147+
148+
fillGradient();
149+
150+
colorCanvas.addEventListener('click', updateMarker1Position);
151+
colorStripCanvas.addEventListener('click', updateMarker2Position);
152+
</script>

‎docs/lights/point.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ Add a light that gets emitted from `coords` in all directions to the scene.
5454
}
5555
);
5656
</script>
57-
- ```json
57+
- ```jsonc
5858
{
5959
"type": "point",
6060
"color": [1, 1, 0], // yellow
@@ -70,7 +70,7 @@ Add a light that gets emitted from `coords` in all directions to the scene.
7070
{
7171
type: 'sphere',
7272
color: [1, 1, 1],
73-
coords: [[null, [0.5, 0.5, 0.5]]]
73+
coords: [[[0, 0, 0]]]
7474
}
7575
],
7676
lighting: [

‎docs/lights/spot.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ Add a spotlight to the scene.
6666
lighting: [
6767
{
6868
type: 'spot',
69-
color: [1, 1, 1],,
69+
color: [1, 1, 1],
7070
coords: [null, [1, 1, 1]],
7171
target: [[0, 0, 0]]
7272
}

‎docs/types/color.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
A color is an array of 3 floats, for the red, green and blue value. A value should be in the range 0 to 1.
1+
A color is an array of 3 floats (red, green and blue) in the range 0-1.
22

33
To convert a 0-255 number to 0-1 you just need to divide the number by 255.
44

@@ -10,4 +10,6 @@ To convert a 0-255 number to 0-1 you just need to divide the number by 255.
1010
0, // blue
1111
]
1212
```
13-
![yellow](https://user-images.githubusercontent.com/62714153/124355174-3c908f80-dbe6-11eb-9af8-1b65150454b6.png)
13+
<img class='center' style='display: block;' alt='yellow' src='https://user-images.githubusercontent.com/62714153/124355174-3c908f80-dbe6-11eb-9af8-1b65150454b6.png' />
14+
- <p style='text-align: center;'>Color picker</p>
15+
{% include color_picker.html %}

0 commit comments

Comments
 (0)