klank.school/calendar-image
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pass a date

Browse Source
This commit is contained in:
vitrinekast
2025-08-05 18:51:32 +02:00
parent f88c96cadf
commit 7fb74e29dd
17 changed files with 152 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@ -4,4 +4,18 @@ edit the text in `script.sh` and run `sh script.sh`
Imagemagick needs to be installed
Created by vitrinekast
Created by vitrinekast
# Klankschool livecoding 101
Always wanted to discover the world of livecoding, but never did it? Now is the opportunity!
This introduction workshop is a 100% (beginner) friendly. No prior knowledge of coding needed! Just a curiosity for code. We'll cover some of the basics of the syntax of live coding, figure out how to install it on your own machine, and of course, do some jamming!
Timetable
18:00 - 18:30 _walk in_
18:30 - 20:30 _worskhop_
20:30 - end jam _sesh_
Please bring a laptop, headphones, and a snack of choice.

BIN
Rosa Schuurmans (1032713)_202504041643.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
assets/output_landscape.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
assets/output_poster.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

30
demo.html Normal file
View File

@ -0,0 +1,30 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button class="notify">send a notification</button>
<script>
const Notifybtn = document.querySelector(".notify");
const sendNotification = () => {
if (!("Notification" in window)) {
throw new Error(
"Your browser does not support push notification",
);
}
Notification.requestPermission().then((Permission) => {
const notificationOptions = {
body: "Welcome to Javascript Push Notification",
icon: "./image.png",
};
new Notification("Push Notification", notificationOptions);
});
};
Notifybtn.addEventListener("click", sendNotification);
</script>
</body>
</html>

BIN
my_gif.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 MiB

BIN
n Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 250 KiB

BIN
output_A6.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 652 KiB

After

Width:  |  Height:  |  Size: 629 KiB

BIN
output_A6_qr.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 744 KiB

After

Width:  |  Height:  |  Size: 723 KiB

BIN
output_landscape-0.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 314 KiB

BIN
output_landscape-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 311 KiB

BIN
output_landscape.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 338 KiB

After

Width:  |  Height:  |  Size: 684 KiB

BIN
output_poster.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
poster_2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 872 KiB

BIN
poster_3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 868 KiB

BIN
rectangle_1.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 771 KiB

After

Width:  |  Height:  |  Size: 159 KiB

135
script.sh
View File

@ -1,19 +1,40 @@
#!/bin/bash
TEXTTITLE=$(printf "(Un)Repair Cafe")
TEXTSUBTITLE="Every 2nd and 4th thursday"
TEXTDATE=$(printf "27/03\n17:30-22:00")
TEXTSUBTITLE="Every thursday"
TEXTLOCATION=$(printf "CATU")
TEXTADDRESS=$(printf "Catullusweg 11\nRotterdam")
TEXTLOCATIONLONG=$(printf "CATU\nCatullusweg 11\nRotterdam")
DESCRIPTION=$(printf "Do you dig trough trash only to\n find treasure? Are you interested in \nbuilding servers? Do you take the shop\n out of photoshop? Is a printer jam your \n kind of jam? \n Come hang at the (un)repair cafe!")
QRDESCRIPTION=$(printf "*Check out calendar.klank.school \n for more details!")
QRDESCRIPTION=$(printf "*Check out calendar.klank.school \n for more details!")
FREE=$(printf "FREE!")
# Set date text (second parameter, with default)
if [ -n "$1" ]; then
TEXTDATE=$(printf "$1\n18:00-22:00")
FILENAME_SUFFIX=$(printf ""${1////-}"_out")
else
TEXTDATE=$(printf "31/07\n18:00-22:00")
FILENAME_SUFFIX="output"
fi
echo "Using date: $TEXTDATE"
echo "Filename suffix: $FILENAME_SUFFIX"
echo "Make output_landscape"
# Create the image with text overlays landscape
convert assets/landscape_2.jpg \
magick assets/landscape_1.jpg \
-gamma 1 +level 0,1000 -white-threshold 999 \
\( +clone -colorspace gray -threshold 80% -fill green -colorize 40% \) \
-compose over -composite \
-gamma .5 +level 100,1000 \
-morphology Convolve \
"3x3: -2 -1 0 -1 1 1 0 1 0" \
-morphology Convolve \
"3x3: -2 -1 0 -1 1 1 0 1 0" \
-morphology Distance Euclidean:1,80 -auto-level \
-font Courier \
-gamma 0.05 \
-wave -20x4 \
-weight 900 \
-fill white \
@ -22,60 +43,93 @@ convert assets/landscape_2.jpg \
\( -pointsize 100 -draw "gravity southeast text 400,950 '$TEXTDATE'" \) \
\( -pointsize 100 -draw "gravity southeast text 400,400 '$TEXTLOCATIONLONG'" \) \
-wave -2x0 \
output_landscape.jpg
-auto-level \
-morphology Convolve \
"3x3: -2 -1 0 -1 1 1 0 1 0" \
${FILENAME_SUFFIX}_landscape.jpg
echo "Make output_poster"
# create a portrait poster
convert assets/poster_6.jpg \
magick assets/poster_6.jpg \
-gamma 1 +level 0,2200 \
-morphology Distance Euclidean:4,180 -auto-level \
-font Courier \
-wave -20x4 \
-weight 900 \
-fill white \
\( -pointsize 120 -draw "rotate 7 gravity northwest text 250,200 '$TEXTTITLE'" \) \
-pointsize 120 -draw "rotate 7 gravity northwest text 250,200 '$TEXTTITLE'" \
-fill white \
\( -pointsize 70 -draw "rotate 6 gravity northwest text 250,380 '$TEXTSUBTITLE'" \) \
-pointsize 70 -draw "rotate 6 gravity northwest text 250,380 '$TEXTSUBTITLE'" \
-fill white \
\( -pointsize 48 -interline-spacing 5 -draw "rotate 6 gravity northwest text 320,580 '$TEXTLOCATIONLONG'" \) \
wave -2x0 \
\( -pointsize 40 -interline-spacing 20 -draw "rotate 1 gravity southwest text 300,360 '$DESCRIPTION'" \) \
output_poster.jpg
-pointsize 48 -interline-spacing 5 -draw "rotate 6 gravity northwest text 320,580 '$TEXTLOCATIONLONG'" \
-wave -2x0 \
-pointsize 40 -interline-spacing 20 -draw "rotate 1 gravity southwest text 300,360 '$DESCRIPTION'" \
${FILENAME_SUFFIX}_poster.jpg
# Create an A6 poster
convert assets/poster_1.jpg \
echo "Make output_A6_qr"
magick assets/poster_1.jpg \
-resize "1240x1748" \
-gamma 0.3 +level 10,1000 \
-morphology Distance Euclidean:4,80 -auto-level \
-font Courier -weight Bold \
-wave -10x4 \
-fill white \
\( -pointsize 80 -draw "rotate 7 gravity northwest text 150,150 '$TEXTTITLE'" \) \
-pointsize 80 -draw "rotate 7 gravity northwest text 150,150 '$TEXTTITLE'" \
-fill white \
\( -pointsize 50 -draw "rotate 7 gravity northwest text 160,250 '$TEXTSUBTITLE'" \) \
-pointsize 50 -draw "rotate 7 gravity northwest text 160,250 '$TEXTSUBTITLE'" \
-fill white \
\( -pointsize 30 -interline-spacing 5 -draw "rotate 6 gravity northwest text 240,450 '$TEXTLOCATIONLONG'" \) \
wave -2x0 \
\( -pointsize 30 -interline-spacing 10 -draw "rotate 1 gravity southwest text 200,300 '$DESCRIPTION'" \) \
output_A6.jpg
-pointsize 30 -interline-spacing 5 -draw "rotate 6 gravity northwest text 240,450 '$TEXTLOCATIONLONG'" \
-wave -2x0 \
-pointsize 30 -interline-spacing 10 -draw "rotate 1 gravity southwest text 200,300 '$DESCRIPTION'" \
${FILENAME_SUFFIX}_A6.jpg
convert calendar.jpg -background none -rotate 10 -resize "50%" tmp_calendar.png
magick calendar.jpg -background none -rotate 10 -resize "50%" tmp_calendar.png
# Put a QR code on an A6 poster
convert output_A6.jpg \
magick ${FILENAME_SUFFIX}_A6.jpg \
-fill tomato \
-draw "rotate 10 rectangle 840,690 1120,970" \
temp_overlay.png \
tmp_calendar.png \
-gravity center \
-geometry +200+100 \
-font Courier -weight Bold \
-pointsize 24 -interline-spacing 10 -draw "rotate 10 gravity center text 200,-120 '$QRDESCRIPTION'" \
-composite output_A6_qr.jpg
-composite ${FILENAME_SUFFIX}_A6_QR.jpg
rm tmp_calendar.png
# Create a rectangle image
convert assets/rectangle_1.jpg \
echo "Make rectangle_1"
magick assets/rectangle_1.jpg \
-resize "1240x1240" \
\( +clone -colorspace gray -threshold 80% -fill green -colorize 40% \) \
-compose over -composite \
-gamma .5 +level 100,1000 \
-morphology Convolve \
"3x3: -2 -1 0 -1 1 1 0 1 0" \
-morphology Convolve \
"3x3: -2 -1 0 -1 1 1 0 1 0" \
-morphology Distance Euclidean:1,80 -auto-level \
-font Courier -weight Bold \
-wave -10x5 \
-fill white \
-pointsize 120 -draw "rotate -18 gravity center text 30,-200 '$TEXTTITLE'" \
-pointsize 50 -draw "rotate -18 gravity center text -100,0 '$TEXTSUBTITLE'" \
-pointsize 50 -interline-spacing 5 -draw "rotate -2 gravity southeast text 60, 150 '$TEXTADDRESS'" \
-pointsize 40 -interline-spacing 5 -draw "rotate -2 gravity southeast text 80,380 '$TEXTDATE'" \
-wave 1x40 \
-auto-level \
-morphology Convolve \
"3x3: -2 -1 0 -1 1 1 0 5 0" \
${FILENAME_SUFFIX}_rectangle.jpg
# Create a another poster
echo "Make poster_2"
magick assets/poster_5.jpg \
-resize "1240x1748" \
\( +clone -colorspace gray -threshold 80% -fill green -colorize 40% \) \
-compose over -composite \
-gamma .5 +level 100,1000 \
-morphology Convolve \
"3x3: -2 -1 0 -1 1 1 0 1 0" \
@ -86,14 +140,39 @@ convert assets/rectangle_1.jpg \
-gamma 0.05 \
-wave -10x5 \
-fill white \
\( -pointsize 120 -draw "rotate -18 gravity center text 30,-200 '$TEXTTITLE'" \) \
-pointsize 120 -draw "rotate 7 gravity northwest text 90,90 '$TEXTTITLE'" \
-fill white \
\( -pointsize 50 -draw "rotate -18 gravity center text -100,0 '$TEXTSUBTITLE'" \) \
-pointsize 60 -draw "rotate 6 gravity northwest text 120,250 '$TEXTSUBTITLE'" \
-fill white \
\( -pointsize 45 -interline-spacing 5 -draw "rotate -2 gravity southeast text 60, 150 '$TEXTADDRESS'" \) \
\( -pointsize 80 -interline-spacing 5 -draw "rotate -2 gravity southeast text 100,380 '$TEXTLOCATION'" \) \
-pointsize 48 -interline-spacing 5 -draw "rotate 6 gravity northwest text 220,480 '$TEXTLOCATIONLONG'" \
-pointsize 38 -interline-spacing 20 -draw "rotate 1 gravity southwest text 150,260 '$DESCRIPTION'" \
-wave 1x40 \
-pointsize 35 -interline-spacing 5 -draw "rotate 2 gravity center text 200, 150 '$QRDESCRIPTION" \
-auto-level \
-morphology Convolve \
"3x3: -2 -1 0 -1 1 1 0 1 0" \
rectangle_1.jpg
${FILENAME_SUFFIX}_poster2.jpg
# Create a rectangle image
echo "Make poster_3"
magick assets/poster_5.jpg \
-resize "1240x1748" \
-morphology Distance Euclidean:1,600 -auto-level \
-gamma 0.23 +level 10,1000 \
-morphology Convolve \
"3x3: -2 -6 0 -1 1 1 0 5 3" \
-morphology Distance Euclidean:4,80 -auto-level \
-font Courier -weight Bold \
-wave -10x5 \
-fill white \
-pointsize 120 -draw "rotate 7 gravity northwest text 150,90 '$TEXTTITLE'" \
-pointsize 65 -draw "rotate 6 gravity northwest text 150,250 '$TEXTSUBTITLE'" \
-pointsize 40 -interline-spacing 5 -draw "rotate 6 gravity northwest text 250,450 '$TEXTLOCATIONLONG'" \
-pointsize 55 -interline-spacing 5 -draw "rotate -4 gravity northwest text 160,700 '$FREE'" \
-pointsize 32 -interline-spacing 16 -draw "rotate 1 gravity southwest text 200,300 '$DESCRIPTION'" \
-pointsize 40 -interline-spacing 5 -draw "rotate 5 gravity center text 200,130 '$TEXTDATE'" \
-wave 1x80 \
-auto-level \
-morphology Convolve \
"3x3: -2 -91 0 -1 1 1 4 5 0" \
${FILENAME_SUFFIX}_poster3.jpg