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