first test and frightening sparse checkout
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 141 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 16 KiB |
@ -0,0 +1,111 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>spin3d</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: dodgerblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 4rem;
|
||||||
|
font-family: sans-serif;
|
||||||
|
position: relative;
|
||||||
|
z-index: 50;
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: sans-serif;
|
||||||
|
color: white;
|
||||||
|
z-index: 50;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
hegiht: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
#front {
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<img id="back" src="backp/0001.webp" alt="">
|
||||||
|
<h1>How to make your server run 4x faster</h1>
|
||||||
|
<div class="subtitle">And other <span id="first">situated</span> code documentation <span id="second">practices</span> </div>
|
||||||
|
<img id="front" src="frontp/0001.webp" alt="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
let terms;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const front = document.querySelector('#front')
|
||||||
|
const back = document.querySelector('#back')
|
||||||
|
const container = document.querySelector('.container')
|
||||||
|
|
||||||
|
const first = document.querySelector('#first')
|
||||||
|
const second = document.querySelector('#second')
|
||||||
|
|
||||||
|
const totalImages = 36
|
||||||
|
let index = 0;
|
||||||
|
const filename = (index) => index.toString().padStart(4, '0') + '.webp'
|
||||||
|
|
||||||
|
|
||||||
|
const change = (e) => {
|
||||||
|
let newIndex = Math.floor(e.clientX / container.clientWidth * totalImages)
|
||||||
|
if (newIndex != index) {
|
||||||
|
index = newIndex
|
||||||
|
let image = filename(index+1)
|
||||||
|
front.src = `frontp/${image}`
|
||||||
|
back.src = `backp/${image}`
|
||||||
|
first.innerText = terms[index][0]
|
||||||
|
second.innerText = terms[index][1]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('load', async ()=> {
|
||||||
|
terms = await fetch('terms.json').then(res=>res.json()).then(res=>res.terms)
|
||||||
|
container.addEventListener('mousemove', (e)=> change(e))
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 6.9 KiB |
@ -1 +1,51 @@
|
|||||||
# WORK IN PROGRESS
|
# 3d spin !!!
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
An impostor 3d spin that uses pictures of a rotating object (in this case: soupboat) to fake 3d rotation.
|
||||||
|
|
||||||
|
This is a prototype for the grad project website! Actually the plan is to use real pictures of the soupboat and its 3d printed legs. But need to take pictures first, so here a tryout with a render.
|
||||||
|
|
||||||
|
Bonus: this happen twice: one for the background and one for the foreground. In this way we can fake depth having something passing in front and something in the background. Checkmate depth buffer.
|
||||||
|
|
||||||
|
## Some problems concerning images
|
||||||
|
|
||||||
|
This technique uses a lot of images. The script can be easily adjusted to regulate how many of them, for this first tryout i tried with 36 images for a round. (360 degrees/10). Probably could work fine just halving them, and have only 18 angles.
|
||||||
|
|
||||||
|
The point is:
|
||||||
|
|
||||||
|
- 36 images for the front +
|
||||||
|
- 36 images for the back
|
||||||
|
- = 72 pictures in total
|
||||||
|
|
||||||
|
Not really the most exciting thing to do in a website right? Take into account also the question of transparency, and suddenly the idea to have seventy png files to swap and change and download on the fly makes your cursor wandering around the browser feeling dizzy.
|
||||||
|
|
||||||
|
Then I remember that `webp` image format exists, and [I can apparently use it](https://caniuse.com/webp). It's an image format developed by Google so my inner cop was copmlaining, but look at these:
|
||||||
|
|
||||||
|
|
||||||
|
List of 36 png files, for 40mb
|
||||||
|
|
||||||
|
|
||||||
|
List of 36 webp files, for 600kb
|
||||||
|
|
||||||
|
So i would say `webp` is definitely a way to go here: you get lossy compression same as `jpeg`, but with the bonus of transparency like `png`. I would say that this is a nice deal.
|
||||||
|
|
||||||
|
## Confront discomfort
|
||||||
|
|
||||||
|
While figuring out what to do for my graduation project, the moment to decide where to make this thing public arrived. A collection of readme files is something quite digital, hence I thought ok so then it's a website? So then it's a website! So then it's a website... The instant reflex to associate digital contents with websites caused some discomfort: why do I end up always here? I feel so bored of my patterns.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
During a tutorial, Manetta suggested to stay with this discomfort for a while. To scratch a bit under its surface to see what's there. Some months ago I wrote this 30% exhausted vent in the readme of [wlist](https://git.xpub.nl/kamo/writing-list):
|
||||||
|
|
||||||
|
> A small writing machine to experiment the list format. It's again web-to-print, it's again flask, it's again markdown, it's again it's again it's again. I'm 30% sorry.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Here a bit of context: my relation with the browser started to get complicated following a growing interest in [permacomputing](https://permacomputing.net/) practices, that caused an initial allergic reaction to all kinds of javascript based applications included the one i most work with on a daily bases.
|
||||||
|
|
||||||
|
( need to elaborate this a bit more )
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
( possibly continuing here )
|
||||||
|
|||||||
@ -0,0 +1,40 @@
|
|||||||
|
{
|
||||||
|
"terms": [
|
||||||
|
["situated", "practices"],
|
||||||
|
["bizzarre", "attempts"],
|
||||||
|
["successful", "frameworks"],
|
||||||
|
["catastrophic","mistakes"],
|
||||||
|
["collaborative","sessions"],
|
||||||
|
["problematic","authors"],
|
||||||
|
["uncomprehensible","terms"],
|
||||||
|
["missing","entries"],
|
||||||
|
["violent","reports"],
|
||||||
|
["exciting","writings"],
|
||||||
|
["hand-drawn","schemes"],
|
||||||
|
["misleading","solutions"],
|
||||||
|
["dramatic","outcomes"],
|
||||||
|
["desperate", "horrors"],
|
||||||
|
["unpayable","debts"],
|
||||||
|
["idiotic","nonsense"],
|
||||||
|
["careful","work"],
|
||||||
|
["concerted","efforts"],
|
||||||
|
["unpaid","labour"],
|
||||||
|
["outdated","fossils"],
|
||||||
|
["unread","files"],
|
||||||
|
["technical","jargon"],
|
||||||
|
["complex","approaches"],
|
||||||
|
["complicated","situations"],
|
||||||
|
["lush","ecosystems"],
|
||||||
|
["gendered","manuals"],
|
||||||
|
["horizontal","organizations"],
|
||||||
|
["particular","cases"],
|
||||||
|
["incomplete","drafts"],
|
||||||
|
["auto-generated","references"],
|
||||||
|
["unfinished","projects"],
|
||||||
|
["political","fights"],
|
||||||
|
["social","drama"],
|
||||||
|
["forbidden","techniques"],
|
||||||
|
["boring","pages"],
|
||||||
|
["useful","advices"]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 8.7 KiB |