project.xpub.nl/how-to-make-your-server-run.../readme.md

# @ @ 3d spin @ @ !

![cover eheh](img/cover.jpg)

An impostor 3d spin that uses pictures of a rotating object (in this case: the Soupboat server) 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 to put in place the script.

## How does it work

An `mousemove` event listener is attached to an HTMl element. The x coordinate of the mouse position is mapped onto the total width of the browser window, in order to get a float value between 0 and 1. This is then multiplied by the total number of available images, and rounded in order to get an integer.

Imagine you have 36 images such as this example, at the far left of the screen the obtained index will be 0, in the middle will be 18 and at the far right 35. It's just a simple proportion.

Bonus: in our case 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 halving them, and have only 18 angles, even just 9. We will see when I need to cutout the pictures aha.

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? Although websites today have millions of images and media contents (imagine being _instagram.com_ ?), it's not really healthy and ecologic to validate this bulimic approach to web resources. Take into account also the question of image 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. And a server burning in the background.

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: total weight 40mb](img/pngs.png)

List of 36 png files, for 40mb

![list of 36 webp files: total weight 600kb](img/webps.png)

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. A small detail such as a file extension can transform the perception on a script from a _totally not, unaccettaple, cancelled_ to _uhm worth trying it, it works and doesn't burn the entire planet cool_.

## 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.

![messages in a chat from the same person writing here: "bc it was the moment of thinking ok so what surface? a website? again a website?", "and we spent a bit of time insisting on this sense of discomfort", "because for me it's really natural like ok there is something to code let's make a website for it", "or let's make it browser based", "bc eventually these are the tools im most familiar with for interaction design etc", "but at the same time they carry along all this problems that i cannot really just ignore", "so one tendency is ok well we can make a website out of it and the other is ew but what about consumption? what about carbon footprint? what about best practices and accessibility"](img/dis1.png)

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.

![a reply in the chat: "Lol I like the 30% sorry" - and I continue "yea she said the same aha", "and this is causing a lot of friction in my head and heart and that's why for example at some point before graduation proposal tried to experiment with bash and other forms of coding not related with the browser", "but then today had this moment with the png and webp etc", "and this is something i arrived just bc it's a surface i know and that i can explore really in depth", "bc im familiar with it and know how to navigate and how to make choices", "and here a bit this friction loosen up", "and i feel that for me it makes way more sense to stay with a tool im familiar with in order to make it work the way i want", "to be less harmful or more accessible or whatever", "than to hop to something new as soon as there is a problem", "idk it was a moment of realization"](img/dis2.png)

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 )

![replies: "It makes sense", "Sounds like an important moment", "So what does this mean" - and I continue "it means that this discomfort probably should play a role in what i make", "maybe not the main role", "but neither a hidden one", "like instead of hiding it or hiding from it to confront", "ok let's rewrite this sentence", "like instead of hiding or hiding from it, to confront it" ](img/dis3.png)

( possibly continuing here )