desc test
parent
9de3e94d01
commit
274a7bd7ac
@ -0,0 +1,110 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<pre>
|
||||||
|
mh trying to sort out a gradient way to filter the writing machines
|
||||||
|
using yet another writing machine such as a gradient
|
||||||
|
that seems more expressive than a percentage system,
|
||||||
|
|
||||||
|
the very same amount
|
||||||
|
(
|
||||||
|
tool: 60%
|
||||||
|
practice: 40%
|
||||||
|
)
|
||||||
|
|
||||||
|
it can be written in a gradient form as
|
||||||
|
(
|
||||||
|
tool tool tool practice practice
|
||||||
|
)
|
||||||
|
|
||||||
|
but also
|
||||||
|
(
|
||||||
|
tool practice tool practice tool
|
||||||
|
)
|
||||||
|
|
||||||
|
in a way that adds more qualities to the quantity
|
||||||
|
in a similar way, just adding another feature
|
||||||
|
is as easy as adding it to the gradient
|
||||||
|
(
|
||||||
|
tool tool tool practice practice platform
|
||||||
|
)
|
||||||
|
while in a percentage system adding hooowwww where are yanother dimension
|
||||||
|
would mean to revisit all the previous property to sum up to 100
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<pre>
|
||||||
|
but maybe the point is not to filter things ?
|
||||||
|
could anyway be something interesting to develop:
|
||||||
|
1 find components
|
||||||
|
2 place them spatially
|
||||||
|
2pi / components.lenght = angle for each component
|
||||||
|
how to place components?
|
||||||
|
could it be a mix between
|
||||||
|
|
||||||
|
a. chronologic order
|
||||||
|
cycle through components
|
||||||
|
insert every new component in a new angle position
|
||||||
|
|
||||||
|
b. positional order
|
||||||
|
???
|
||||||
|
cycle again through components
|
||||||
|
get first and last distincts of list
|
||||||
|
grade them
|
||||||
|
aaa ok too difficult for now
|
||||||
|
actually maybe this is multi d vector math
|
||||||
|
and i dont have the minimal clue about it
|
||||||
|
ahah
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="gradient"></div>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
// MMMmm no ok no
|
||||||
|
const handleRadiant = (entries) => {
|
||||||
|
const gradient = document.querySelector('#gradient')
|
||||||
|
|
||||||
|
|
||||||
|
const width = 300
|
||||||
|
const height = 300
|
||||||
|
|
||||||
|
gradient.style.width = width + 'px'
|
||||||
|
gradient.style.height = height + 'px'
|
||||||
|
|
||||||
|
let properties = new Set()
|
||||||
|
|
||||||
|
for (const entry of entries) {
|
||||||
|
entry.gradient.split(' ').forEach(p => {
|
||||||
|
properties.add(p)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
let radius = 100
|
||||||
|
Array.from(properties).forEach((property, index) => {
|
||||||
|
// Calculate polar coordinates
|
||||||
|
let t = 2 * Math.PI / properties.size * index
|
||||||
|
let x = radius * Math.cos(t)
|
||||||
|
let y = radius * Math.sin(t)
|
||||||
|
|
||||||
|
|
||||||
|
let component = document.createElement('span')
|
||||||
|
component.classList.add('component')
|
||||||
|
component.innerHTML = property
|
||||||
|
component.style.transform = `translate(${x+width/2}px, ${y+height/2}px) translate(-50%, -50%)`
|
||||||
|
gradient.appendChild(component)
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
Loading…
Reference in New Issue