Compare commits
No commits in common. "761f3c6e0e21acdfc44ea8169b76525bb96a0ae9" and "e631d5209cf41ecb43dee4652da892cfbc71421d" have entirely different histories.
761f3c6e0e
...
e631d5209c
7 changed files with 51 additions and 77 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -1,2 +1 @@
|
||||||
.DS_Store
|
.DS_Store
|
||||||
dist
|
|
||||||
|
|
12
Makefile
12
Makefile
|
@ -1,16 +1,10 @@
|
||||||
build: slides website
|
build: slides website
|
||||||
|
|
||||||
slides: dist
|
slides:
|
||||||
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
|
||||||
|
|
||||||
dist:
|
website:
|
||||||
mkdir -p dist
|
pandoc website/site.md -o dist/website/index.html
|
||||||
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
Normal file
BIN
dist/slides.pdf
vendored
Normal file
Binary file not shown.
26
dist/website/index.html
vendored
Normal file
26
dist/website/index.html
vendored
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
<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>
|
|
@ -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, Marie und Lukas
|
author: AG Link für kritische Informatik
|
||||||
date: "11. Oktober 2022"
|
date: "11. Oktober 2022"
|
||||||
classoption: "aspectratio=169"
|
classoption: "aspectratio=169"
|
||||||
header-includes:
|
header-includes:
|
||||||
|
@ -13,17 +13,7 @@ header-includes:
|
||||||
## Wer sind wir?
|
## Wer sind wir?
|
||||||
|
|
||||||
- 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?
|
||||||
|
|
||||||
|
@ -44,4 +34,4 @@ header-includes:
|
||||||
|
|
||||||
## P5.JS
|
## P5.JS
|
||||||
|
|
||||||
- **Livedemo!**
|
- **Livedemo!*
|
||||||
|
|
|
@ -1,37 +1,32 @@
|
||||||
---
|
--
|
||||||
title: Coding Art - Workshop für die KEW 2022
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Links
|
# Links
|
||||||
|
|
||||||
- [Interaktives Tutorial](https://openprocessing.org/sketch/1642700)
|
- Einstieg
|
||||||
- [p5-Editor](https://editor.p5js.org)
|
- p5-Editor
|
||||||
- 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)
|
|
||||||
|
|
||||||
|
|
||||||
## 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
|
|
||||||
- [Vortragsslides](slides.pdf)
|
|
||||||
|
|
||||||
## Weiterführende Links
|
## Weiterführende Links
|
||||||
|
|
||||||
- [p5 Bibliotheksreferenz](https://p5js.org/reference/)
|
- p5 Bibliotheksreferenz
|
||||||
- [Interaktive Paramterübersicht](TODO)
|
- Interaktive Paramterübersicht
|
||||||
- [Daniel Shiffman - The Coding Train](https://thecodingtrain.com)
|
- Daniel Shiffman
|
||||||
- [OpenProcessing](openprocessing.org)
|
- OpenProcessing
|
||||||
|
|
||||||
|
# Editor
|
||||||
|
|
||||||
|
<iframe id="p5.js web editor embed"
|
||||||
|
title="p5.js web editor embed"
|
||||||
|
width="800"
|
||||||
|
height="600"
|
||||||
|
src="https://editor.p5js.org/">
|
||||||
|
</iframe>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
[Impressum / Datenschutz](https://ag-link.xyz/impressum/)
|
<a href="ag-link.xyz/impressum">Impressum / Datenschutz</a>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
@ -1,17 +1,4 @@
|
||||||
: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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -19,20 +6,3 @@ 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;
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in a new issue