Compare commits
12 commits
a43b7dab5c
...
9954959d5f
| Author | SHA1 | Date | |
|---|---|---|---|
| 9954959d5f | |||
| 0aba03484e | |||
| e44a0b362c | |||
| 5edced6568 | |||
| c6d2f3e447 | |||
| f8087e39c3 | |||
| 4910b2e3dc | |||
| 79255c6470 | |||
| 4bfd8615a9 | |||
| a3a4e35599 | |||
| 246caf7392 | |||
| 3f53ff195d |
13 changed files with 227 additions and 39 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,2 +1 @@
|
||||||
.DS_Store
|
.DS_Store
|
||||||
dist
|
|
||||||
|
|
|
||||||
1
Makefile
1
Makefile
|
|
@ -10,6 +10,7 @@ dist:
|
||||||
website: dist
|
website: dist
|
||||||
cp -f website/style.css dist/website/style.css
|
cp -f website/style.css dist/website/style.css
|
||||||
cp -f dist/slides.pdf dist/website/slides.pdf
|
cp -f dist/slides.pdf dist/website/slides.pdf
|
||||||
|
cp -f imgs/favicon.png dist/website/favicon.png
|
||||||
pandoc website/site.md -o dist/website/index.html -c style.css -s
|
pandoc website/site.md -o dist/website/index.html -c style.css -s
|
||||||
|
|
||||||
qrcode:
|
qrcode:
|
||||||
|
|
|
||||||
BIN
dist/slides.pdf
vendored
Normal file
BIN
dist/slides.pdf
vendored
Normal file
Binary file not shown.
BIN
dist/website/favicon.png
vendored
Normal file
BIN
dist/website/favicon.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
89
dist/website/index.html
vendored
Normal file
89
dist/website/index.html
vendored
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="generator" content="pandoc" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>Coding Art - Workshop für die KEW 2022</title>
|
||||||
|
<style>
|
||||||
|
code{white-space: pre-wrap;}
|
||||||
|
span.smallcaps{font-variant: small-caps;}
|
||||||
|
span.underline{text-decoration: underline;}
|
||||||
|
div.column{display: inline-block; vertical-align: top; width: 50%;}
|
||||||
|
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||||||
|
ul.task-list{list-style: none;}
|
||||||
|
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header id="title-block-header">
|
||||||
|
<h1 class="title">Coding Art - Workshop für die KEW 2022</h1>
|
||||||
|
</header>
|
||||||
|
<h2 id="ergebnisse-des-workshops">Ergebnisse des Workshops</h2>
|
||||||
|
<p><em>Hier ist noch nichts… wenn ihr mögt, können wir im Anschluss an
|
||||||
|
den Workshop eure Ergebnisse hier “ausstellen”!</em></p>
|
||||||
|
<h2 id="links">Links</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://openprocessing.org/sketch/1685741">Interaktives
|
||||||
|
Tutorial</a> für Kleingruppen</li>
|
||||||
|
<li><a href="https://openprocessing.org/sketch/create">p5-Editor auf
|
||||||
|
OpenProcessing</a> <em>oder</em> auf <a
|
||||||
|
href="https://editor.p5js.org">der Seite der
|
||||||
|
Processing-Foundation.</a></li>
|
||||||
|
<li><a href="https://bmoren.github.io/p5js-cheat-sheet/">p5-Cheatsheet
|
||||||
|
mit vielen wichtigen Kommandos auf einen Blick</a></li>
|
||||||
|
<li>Code-Beispiele für das Plenum
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://openprocessing.org/sketch/1686945">Farbkacheln -
|
||||||
|
Unanimiert</a></li>
|
||||||
|
<li><a href="https://openprocessing.org/sketch/1687440">Noise
|
||||||
|
Ellipse</a></li>
|
||||||
|
</ul></li>
|
||||||
|
<li><a href="https://openprocessing.org/curation/81145">Sammlung
|
||||||
|
weiterer Beispiele für die Kleingruppenphase</a></li>
|
||||||
|
<li><a href="https://ag-link.xyz">Mehr Informationen über die AG
|
||||||
|
Link</a></li>
|
||||||
|
</ul>
|
||||||
|
<h2 id="downloads">Downloads</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="slides.pdf">Vortragsslides</a></li>
|
||||||
|
</ul>
|
||||||
|
<h2 id="weiterführendes">Weiterführendes</h2>
|
||||||
|
<p>Danke für eure Teilnahme am <strong>Coding Art</strong>-Workshop in
|
||||||
|
der KEW 2022! Wenn euch die AG interessiert, schaut gerne bei einem
|
||||||
|
unserer Plena vorbei. Schreibt uns dafür gerne eine Mail an <a
|
||||||
|
href="mailto:ag-link@riseup.net">ag-link@riseup.net</a>.</p>
|
||||||
|
<p>Am Donnerstag, dem 13.10.2022, findet um 19:00 Uhr im Hörsaal 17 des
|
||||||
|
Hörsaalgebäudes noch die letzte Veranstaltung der AG Link in der KEW
|
||||||
|
statt. Beim Vortrag “Toxischer Optimismus” erklärt uns <a
|
||||||
|
href="http://www.2pir.de">Timo Daum</a>, wie Tech-Konzerne
|
||||||
|
gesellschaftliche Probleme mit Technologie lösen möchten und wie das
|
||||||
|
(nicht) möglich ist.<br />
|
||||||
|
<a
|
||||||
|
href="https://ag-link.xyz/event/2022/10/13/Toxischer-Optimismus.html">Mehr
|
||||||
|
Informationen findet ihr hier.</a></p>
|
||||||
|
<p>Zuletzt findet ihr hier noch eine Liste mit weiterführenden
|
||||||
|
Links:</p>
|
||||||
|
<ul>
|
||||||
|
<li><p><a href="https://p5js.org/reference/">p5 Bibliotheksreferenz</a>
|
||||||
|
Eine Übersicht und Erklärungen zu wirklich allen Kommandos die p5js
|
||||||
|
bereitstellt.</p></li>
|
||||||
|
<li><p><a href="https://thecodingtrain.com">Daniel Shiffman - The Coding
|
||||||
|
Train</a> Viele Tutorials und Beispielvideos zu p5js die auf eine sehr
|
||||||
|
sympathische Art und Weise vorgestellt werden.</p></li>
|
||||||
|
<li><p><a href="openprocessing.org">OpenProcessing</a> Erkundet Tausende
|
||||||
|
Beispiele von p5js-Sketches</p></li>
|
||||||
|
<li><p><a
|
||||||
|
href="https://git.ag-link.xyz/lukaszett/Coding_Art_KEW_22">Repository
|
||||||
|
der Workshopslides und Website</a></p>
|
||||||
|
<footer>
|
||||||
|
<p><a href="https://ag-link.xyz/impressum/">Impressum /
|
||||||
|
Datenschutz</a></p>
|
||||||
|
</footer></li>
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
dist/website/slides.pdf
vendored
Normal file
BIN
dist/website/slides.pdf
vendored
Normal file
Binary file not shown.
51
dist/website/style.css
vendored
Normal file
51
dist/website/style.css
vendored
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
:root {
|
||||||
|
--link-color: #00755e;
|
||||||
|
--visited-color: #00755e;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: sans-serif;
|
||||||
|
size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 80%;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: auto;
|
||||||
|
background-color: #fdf6e3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 4em;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--link-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2:after {
|
||||||
|
content: "";
|
||||||
|
background-image: url("https://ag-link.xyz/assets/img/connection.png");
|
||||||
|
background-size: contain;
|
||||||
|
width: .75em;
|
||||||
|
height: .75em;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: .3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 0.5em 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li li {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
20
docker-compose.yml
Normal file
20
docker-compose.yml
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
version: '3'
|
||||||
|
|
||||||
|
services:
|
||||||
|
nginx:
|
||||||
|
image: nginx
|
||||||
|
container_name: art.ag-link.xyz
|
||||||
|
restart: unless-stopped
|
||||||
|
volumes:
|
||||||
|
- dist/website:/usr/share/nginx/html:ro
|
||||||
|
networks:
|
||||||
|
- proxy
|
||||||
|
labels:
|
||||||
|
- "traefik.enable=true"
|
||||||
|
- "traefik.http.routers.art.rule=Host(`art.ag-link.xyz`)"
|
||||||
|
- "traefik.http.routers.art.entrypoints=websecure"
|
||||||
|
- "traefik.http.routers.art.tls.certresolver=art-resolver"
|
||||||
|
|
||||||
|
networks:
|
||||||
|
proxy:
|
||||||
|
external: true
|
||||||
BIN
imgs/favicon.png
Normal file
BIN
imgs/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
imgs/logo.png
Normal file
BIN
imgs/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
|
|
@ -4,8 +4,9 @@ subtitle: Workshop für die kritischen Einführungswochen 2022
|
||||||
author: AG Link für kritische Informatik, Marie und Lukas
|
author: AG Link für kritische Informatik, Marie und Lukas
|
||||||
date: "11. Oktober 2022"
|
date: "11. Oktober 2022"
|
||||||
classoption: "aspectratio=169"
|
classoption: "aspectratio=169"
|
||||||
|
graphics: yes
|
||||||
header-includes:
|
header-includes:
|
||||||
- \usepackage[labelformat=empty]{caption}
|
- \usepackage[labelformat=empty, textformat=empty]{caption}
|
||||||
---
|
---
|
||||||
|
|
||||||
# Hallo Welt!
|
# Hallo Welt!
|
||||||
|
|
@ -14,16 +15,20 @@ header-includes:
|
||||||
|
|
||||||
- Marie und Lukas
|
- Marie und Lukas
|
||||||
- AG Link für kritische Informatik
|
- AG Link für kritische Informatik
|
||||||
|
- seit 2018
|
||||||
- **[ag-link.xyz](https://ag-link.xyz)**
|
- **[ag-link.xyz](https://ag-link.xyz)**
|
||||||
|
- **ag-link@riseup.net**
|
||||||
|
- Plenum immer Mittwochs 19 Uhr - schreibt uns gerne eine Mail falls ihr Bock habt!
|
||||||
|
|
||||||
|
{ width=100px }
|
||||||
|
|
||||||
## Ablauf
|
## Ablauf
|
||||||
|
|
||||||
1. -> Einstieg <-
|
1. -> Einstieg <-
|
||||||
2. Einführung p5js
|
2. Interaktives Tutorial in Kleingruppe (Kleingruppe)
|
||||||
3. Interaktives Tutorial in Kleingruppe
|
3. Beispiele generativer Kunst (Plenum)
|
||||||
4. Beispiele generativer Kunst
|
4. Eigene Kunst in Kleingruppen (Kleingruppe)
|
||||||
5. Eigene Kunst in Kleingruppen
|
5. Abschluss
|
||||||
6. Abschluss
|
|
||||||
|
|
||||||
## Was haben wir heute vor?
|
## Was haben wir heute vor?
|
||||||
|
|
||||||
|
|
@ -31,10 +36,14 @@ header-includes:
|
||||||
- keine AI / Neuronale Netze / ...
|
- keine AI / Neuronale Netze / ...
|
||||||
- Erste Erfahrungen mit **p5.js** machen
|
- Erste Erfahrungen mit **p5.js** machen
|
||||||
- Nicht: Programmierprofis werden
|
- Nicht: Programmierprofis werden
|
||||||
|
- Gerade wenn ihr noch nie programmiert habt: Nicht jede Zeile der Beispiele wird verständlich für euch sein.
|
||||||
|
- Falls ihr schon etwas Erfahrung habt: Nicht wundern, wenn streckenweise von Konventionen abgewichen wird.
|
||||||
|
|
||||||
## Und wer seid ihr?
|
## Und wer seid ihr?
|
||||||
|
|
||||||
|
{ height=200px }
|
||||||
|
|
||||||
|
- Menti.com (Code: 4532 6343)
|
||||||
|
|
||||||
## Wie wir heute vorgehen
|
## Wie wir heute vorgehen
|
||||||
|
|
||||||
|
|
@ -42,6 +51,4 @@ header-includes:
|
||||||
- p5.js
|
- p5.js
|
||||||
- Alle Links und Ressourcen findet ihr unter **art.ag-link.xyz**
|
- Alle Links und Ressourcen findet ihr unter **art.ag-link.xyz**
|
||||||
|
|
||||||
## P5.JS
|
# Los geht's!
|
||||||
|
|
||||||
- **Livedemo!**
|
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,45 @@
|
||||||
---
|
---
|
||||||
title: Coding Art - Workshop für die KEW 2022
|
title: Coding Art - Workshop für die KEW 2022
|
||||||
|
include-in-header: <link rel="icon" type="image/x-icon" href="favicon.png" />
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Ergebnisse des Workshops
|
||||||
|
|
||||||
|
*Hier ist noch nichts... wenn ihr mögt, können wir im Anschluss an den Workshop eure Ergebnisse hier "ausstellen"!*
|
||||||
|
|
||||||
## Links
|
## Links
|
||||||
|
|
||||||
- [Interaktives Tutorial](https://openprocessing.org/sketch/1642700)
|
- [Interaktives Tutorial](https://openprocessing.org/sketch/1685741) für Kleingruppen
|
||||||
- [p5-Editor](https://editor.p5js.org)
|
- [p5-Editor auf OpenProcessing](https://openprocessing.org/sketch/create) *oder* auf [der Seite der Processing-Foundation.](https://editor.p5js.org)
|
||||||
- Code-Beispiele
|
- [p5-Cheatsheet mit vielen wichtigen Kommandos auf einen Blick](https://bmoren.github.io/p5js-cheat-sheet/)
|
||||||
- Beispiel 1 (Shapes)
|
- Code-Beispiele für das Plenum
|
||||||
- Beispiel 2 (Color)
|
- [Farbkacheln - Unanimiert](https://openprocessing.org/sketch/1686945)
|
||||||
- Beispiel 3 (Interaktion)
|
- [Noise Ellipse](https://openprocessing.org/sketch/1687440)
|
||||||
- [Mehr Informationen über die AG Link](https://ag-link.xyz)
|
- [Sammlung weiterer Beispiele für die Kleingruppenphase](https://openprocessing.org/curation/81145)
|
||||||
|
- [Mehr Informationen über die AG Link](https://ag-link.xyz)
|
||||||
|
|
||||||
## Editor
|
|
||||||
|
|
||||||
<iframe id="p5.js web editor embed"
|
|
||||||
title="p5.js web editor embed"
|
|
||||||
width="100%"
|
|
||||||
height="800"
|
|
||||||
src="https://editor.p5js.org/">
|
|
||||||
</iframe>
|
|
||||||
|
|
||||||
## Downloads
|
## Downloads
|
||||||
- [Vortragsslides](slides.pdf)
|
- [Vortragsslides](slides.pdf)
|
||||||
|
|
||||||
## Weiterführende Links
|
## Weiterführendes
|
||||||
|
|
||||||
- [p5 Bibliotheksreferenz](https://p5js.org/reference/)
|
Danke für eure Teilnahme am **Coding Art**-Workshop in der KEW 2022! Wenn euch
|
||||||
- [Interaktive Paramterübersicht](TODO)
|
die AG interessiert, schaut gerne bei einem unserer Plena vorbei. Schreibt uns
|
||||||
- [Daniel Shiffman - The Coding Train](https://thecodingtrain.com)
|
dafür gerne eine Mail an [ag-link@riseup.net](mailto:ag-link@riseup.net).
|
||||||
- [OpenProcessing](openprocessing.org)
|
|
||||||
|
|
||||||
<footer>
|
Am Donnerstag, dem 13.10.2022, findet um 19:00 Uhr im Hörsaal 17 des Hörsaalgebäudes
|
||||||
|
noch die letzte Veranstaltung der AG Link in der KEW statt. Beim Vortrag
|
||||||
|
"Toxischer Optimismus" erklärt uns [Timo Daum](http://www.2pir.de), wie Tech-Konzerne
|
||||||
|
gesellschaftliche Probleme mit Technologie lösen möchten und wie das (nicht) möglich ist.
|
||||||
|
[Mehr Informationen findet ihr hier.](https://ag-link.xyz/event/2022/10/13/Toxischer-Optimismus.html)
|
||||||
|
|
||||||
|
Zuletzt findet ihr hier noch eine Liste mit weiterführenden Links:
|
||||||
|
|
||||||
|
* [p5 Bibliotheksreferenz](https://p5js.org/reference/) Eine Übersicht und Erklärungen zu wirklich allen Kommandos die p5js bereitstellt.
|
||||||
|
* [Daniel Shiffman - The Coding Train](https://thecodingtrain.com) Viele Tutorials und Beispielvideos zu p5js die auf eine sehr sympathische Art und Weise vorgestellt werden.
|
||||||
|
* [OpenProcessing](openprocessing.org) Erkundet Tausende Beispiele von p5js-Sketches
|
||||||
|
* [Repository der Workshopslides und Website](https://git.ag-link.xyz/lukaszett/Coding_Art_KEW_22)
|
||||||
|
|
||||||
|
<footer>
|
||||||
[Impressum / Datenschutz](https://ag-link.xyz/impressum/)
|
[Impressum / Datenschutz](https://ag-link.xyz/impressum/)
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -10,14 +10,15 @@ html {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
max-width: 1024px;
|
max-width: 800px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
background-color: #fdf6e3 !important;
|
background-color: #fdf6e3 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 3em;
|
margin-top: 4em;
|
||||||
|
padding-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -27,6 +28,10 @@ a {
|
||||||
color: var(--link-color);
|
color: var(--link-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
h2:after {
|
h2:after {
|
||||||
content: "";
|
content: "";
|
||||||
background-image: url("https://ag-link.xyz/assets/img/connection.png");
|
background-image: url("https://ag-link.xyz/assets/img/connection.png");
|
||||||
|
|
@ -36,3 +41,11 @@ h2:after {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: .3em;
|
margin-left: .3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 0.5em 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li li {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue