You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
2.8 KiB
HTML
111 lines
2.8 KiB
HTML
2 years ago
|
<!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>
|