Compare commits

..

4 commits

Author SHA1 Message Date
761f3c6e0e dont track dist 2022-09-11 15:22:45 +02:00
fb2f5fb45b serve static files on website 2022-09-11 15:19:19 +02:00
cf07f99be2 further work on slides 2022-09-11 15:18:51 +02:00
9456ee7e9c work on site 2022-09-11 15:18:18 +02:00
7 changed files with 73 additions and 47 deletions

1
.gitignore vendored
View file

@ -1 +1,2 @@
.DS_Store .DS_Store
dist

View file

@ -1,10 +1,16 @@
build: slides website build: slides website
slides: slides: dist
pandoc slides/slides.md -o dist/slides.pdf -t beamer -V theme:DarkConsole pandoc slides/slides.md -o dist/slides.pdf -t beamer -V theme:DarkConsole
website: dist:
pandoc website/site.md -o dist/website/index.html mkdir -p dist
mkdir -p dist/website
website: dist
cp -f website/style.css dist/website/style.css
cp -f dist/slides.pdf dist/website/slides.pdf
pandoc website/site.md -o dist/website/index.html -c style.css -s
qrcode: qrcode:
qrencode -t PNG -s 5 -o imgs/menti.png https://www.menti.com/9w1aj8bb8o qrencode -t PNG -s 5 -o imgs/menti.png https://www.menti.com/9w1aj8bb8o

BIN
dist/slides.pdf vendored

Binary file not shown.

View file

@ -1,26 +0,0 @@
<p></p>
<hr />
<h1 id="links">Links</h1>
<ul>
<li>Einstieg</li>
<li>p5-Editor</li>
<li>Code-Beispiele
<ul>
<li>Beispiel 1 (Shapes)</li>
<li>Beispiel 2 (Color)</li>
<li>Beispiel 3 (Interaktion)</li>
</ul></li>
</ul>
<h2 id="weiterführende-links">Weiterführende Links</h2>
<ul>
<li>p5 Bibliotheksreferenz</li>
<li>Interaktive Paramterübersicht</li>
<li>Daniel Shiffman</li>
<li>OpenProcessing</li>
</ul>
<h1 id="editor">Editor</h1>
<iframe id="p5.js web editor embed" title="p5.js web editor embed" width="800" height="600" src="https://editor.p5js.org/">
</iframe>
<footer>
<a href="ag-link.xyz/impressum">Impressum / Datenschutz</a>
</footer>

View file

@ -1,7 +1,7 @@
--- ---
title: Coding Art! title: Coding Art!
subtitle: Workshop für die kritischen Einführungswochen 2022 subtitle: Workshop für die kritischen Einführungswochen 2022
author: AG Link für kritische Informatik author: AG Link für kritische Informatik, Marie und Lukas
date: "11. Oktober 2022" date: "11. Oktober 2022"
classoption: "aspectratio=169" classoption: "aspectratio=169"
header-includes: header-includes:
@ -14,6 +14,16 @@ header-includes:
- Marie und Lukas - Marie und Lukas
- AG Link für kritische Informatik - AG Link für kritische Informatik
- **[ag-link.xyz](https://ag-link.xyz)**
## Ablauf
1. -> Einstieg <-
2. Einführung p5js
3. Interaktives Tutorial in Kleingruppe
4. Beispiele generativer Kunst
5. Eigene Kunst in Kleingruppen
6. Abschluss
## Was haben wir heute vor? ## Was haben wir heute vor?
@ -34,4 +44,4 @@ header-includes:
## P5.JS ## P5.JS
- **Livedemo!* - **Livedemo!**

View file

@ -1,32 +1,37 @@
-- ---
title: Coding Art - Workshop für die KEW 2022
--- ---
# Links ## Links
- Einstieg - [Interaktives Tutorial](https://openprocessing.org/sketch/1642700)
- p5-Editor - [p5-Editor](https://editor.p5js.org)
- Code-Beispiele - Code-Beispiele
- Beispiel 1 (Shapes) - Beispiel 1 (Shapes)
- Beispiel 2 (Color) - Beispiel 2 (Color)
- Beispiel 3 (Interaktion) - Beispiel 3 (Interaktion)
- [Mehr Informationen über die AG Link](https://ag-link.xyz)
## Weiterführende Links
- p5 Bibliotheksreferenz ## Editor
- Interaktive Paramterübersicht
- Daniel Shiffman
- OpenProcessing
# Editor
<iframe id="p5.js web editor embed" <iframe id="p5.js web editor embed"
title="p5.js web editor embed" title="p5.js web editor embed"
width="800" width="100%"
height="600" height="800"
src="https://editor.p5js.org/"> src="https://editor.p5js.org/">
</iframe> </iframe>
## Downloads
- [Vortragsslides](slides.pdf)
## Weiterführende Links
- [p5 Bibliotheksreferenz](https://p5js.org/reference/)
- [Interaktive Paramterübersicht](TODO)
- [Daniel Shiffman - The Coding Train](https://thecodingtrain.com)
- [OpenProcessing](openprocessing.org)
<footer> <footer>
<a href="ag-link.xyz/impressum">Impressum / Datenschutz</a> [Impressum / Datenschutz](https://ag-link.xyz/impressum/)
</footer> </footer>

View file

@ -1,4 +1,17 @@
:root {
--link-color: #00755e;
--visited-color: #00755e;
}
html { html {
font-family: sans-serif;
size: 12px;
}
body {
width: 80%;
max-width: 1024px;
margin: auto;
background-color: #fdf6e3 !important; background-color: #fdf6e3 !important;
} }
@ -6,3 +19,20 @@ footer {
text-align: center; text-align: center;
margin-top: 3em; margin-top: 3em;
} }
a {
text-decoration: none;
font-weight: bold;
color: var(--link-color);
}
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;
}