quadrichromie.sh
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
#!/bin/sh

vim -c "colorscheme morning" -c "set nowrap" -c TOhtml -c wqa $0
in=papillon.jpg
rm *-*
convert $in -colorspace CMYK -negate -separate %d-$in
N=0
for couleur in cyan magenta yellow black
do
    didder -i $N-$in -o ${in%.*}-$couleur.png --p "$couleur white" -c size --brightness 0% -x 600 "edm" "StevenPigeon"
    N=$(($N + 1))
done

cat <<- EOF > ${in%.*}.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="/style.css">
    </head>
    <body>

        <figure>
$(ls -1 ${in%.*}-* | awk '{printf "<img src=\"%s\">\n", $0}')
        </figure>
        <section>
$(ls -1 ${in%.*}-* | awk '{printf "<img src=\"%s\">\n", $0}')
        </section>
        <details>
            <summary>$(basename $0)</summary>
            <article>
    <code class="lignes">
        <pre>$(seq $(cat $0 | wc -l)| awk '{printf "<span>%s</span>\n", $0'})</pre>
    </code>
            <code>$(cat $0.html | htmlq "#vimCodeElement, style" --remove-nodes ".LineNr" | grep -vE "^body {" | grep -vE "background-color:.*}$")
            </code>
            </article>
        </details>
    </body>
</html>
<style>
figure img:nth-of-type(1){transform:rotate(0deg); opacity:.5}
figure img:nth-of-type(2){transform:rotate(-2deg)}
figure img:nth-of-type(3){transform:rotate(-4deg)}
figure img:nth-of-type(4){transform:rotate(-6deg)}
figure img {
    border:1px solid black;
    transition:all 5s;
    position:absolute;
    mix-blend-mode:multiply;
    image-rendering:
    pixelated;
    transform-origin:top right;
    height:600px;
}
figure{margin:0;display:block;position:relative;height:600px}
section{margin-top:var(--margin)}
section img {width:calc(100vw / 5)}
figure:hover img{transform:none}
</style>
EOF