Compare commits
10 Commits
9954959d5f
...
a43b7dab5c
| Author | SHA1 | Date |
|---|---|---|
 Lukas Z
|
a43b7dab5c | |
|
Lukas Z
|
a80561ce16 | |
|
Lukas Z
|
ff0caca8ca | |
|
Lukas Z
|
60ffc24acc | |
|
Lukas Z
|
3d6207f7ea | |
|
Lukas Z
|
62a7cef413 | |
|
Lukas Z
|
067c91b624 | |
|
Lukas Z
|
f4ae47a532 | |
|
Lukas Z
|
ae797ba38e | |
|
Lukas Z
|
4896a86aac |
|
|
@ -1,2 +1 @@
|
|||
.DS_Store
|
||||
dist
|
||||
|
|
|
|||
1
Makefile
1
Makefile
|
|
@ -10,6 +10,7 @@ dist:
|
|||
website: dist
|
||||
cp -f website/style.css dist/website/style.css
|
||||
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
|
||||
|
||||
qrcode:
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
|
|
@ -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>
|
||||
Binary file not shown.
|
|
@ -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;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
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
|
||||
date: "11. Oktober 2022"
|
||||
classoption: "aspectratio=169"
|
||||
graphics: yes
|
||||
header-includes:
|
||||
- \usepackage[labelformat=empty]{caption}
|
||||
- \usepackage[labelformat=empty, textformat=empty]{caption}
|
||||
---
|
||||
|
||||
# Hallo Welt!
|
||||
|
|
@ -13,17 +14,21 @@ header-includes:
|
|||
## Wer sind wir?
|
||||
|
||||
- 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@riseup.net**
|
||||
- Plenum immer Mittwochs 19 Uhr - schreibt uns gerne eine Mail falls ihr Bock habt!
|
||||
|
||||
{ width=100px }
|
||||
|
||||
## Ablauf
|
||||
|
||||
1. -> Einstieg <-
|
||||
2. Einführung p5js
|
||||
3. Interaktives Tutorial in Kleingruppe
|
||||
4. Beispiele generativer Kunst
|
||||
5. Eigene Kunst in Kleingruppen
|
||||
6. Abschluss
|
||||
2. Interaktives Tutorial in Kleingruppe (Kleingruppe)
|
||||
3. Beispiele generativer Kunst (Plenum)
|
||||
4. Eigene Kunst in Kleingruppen (Kleingruppe)
|
||||
5. Abschluss
|
||||
|
||||
## Was haben wir heute vor?
|
||||
|
||||
|
|
@ -31,10 +36,14 @@ header-includes:
|
|||
- keine AI / Neuronale Netze / ...
|
||||
- Erste Erfahrungen mit **p5.js** machen
|
||||
- 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?
|
||||
|
||||
|
||||
{ height=200px }
|
||||
|
||||
- Menti.com (Code: 4532 6343)
|
||||
|
||||
## Wie wir heute vorgehen
|
||||
|
||||
|
|
@ -42,6 +51,4 @@ header-includes:
|
|||
- p5.js
|
||||
- Alle Links und Ressourcen findet ihr unter **art.ag-link.xyz**
|
||||
|
||||
## P5.JS
|
||||
|
||||
- **Livedemo!**
|
||||
# Los geht's!
|
||||
|
|
|
|||
|
|
@ -1,37 +1,45 @@
|
|||
---
|
||||
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
|
||||
|
||||
- [Interaktives Tutorial](https://openprocessing.org/sketch/1642700)
|
||||
- [p5-Editor](https://editor.p5js.org)
|
||||
- Code-Beispiele
|
||||
- Beispiel 1 (Shapes)
|
||||
- Beispiel 2 (Color)
|
||||
- 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>
|
||||
- [Interaktives Tutorial](https://openprocessing.org/sketch/1685741) für Kleingruppen
|
||||
- [p5-Editor auf OpenProcessing](https://openprocessing.org/sketch/create) *oder* auf [der Seite der Processing-Foundation.](https://editor.p5js.org)
|
||||
- [p5-Cheatsheet mit vielen wichtigen Kommandos auf einen Blick](https://bmoren.github.io/p5js-cheat-sheet/)
|
||||
- Code-Beispiele für das Plenum
|
||||
- [Farbkacheln - Unanimiert](https://openprocessing.org/sketch/1686945)
|
||||
- [Noise Ellipse](https://openprocessing.org/sketch/1687440)
|
||||
- [Sammlung weiterer Beispiele für die Kleingruppenphase](https://openprocessing.org/curation/81145)
|
||||
- [Mehr Informationen über die AG Link](https://ag-link.xyz)
|
||||
|
||||
## Downloads
|
||||
- [Vortragsslides](slides.pdf)
|
||||
- [Vortragsslides](slides.pdf)
|
||||
|
||||
## Weiterführende Links
|
||||
## Weiterführendes
|
||||
|
||||
- [p5 Bibliotheksreferenz](https://p5js.org/reference/)
|
||||
- [Interaktive Paramterübersicht](TODO)
|
||||
- [Daniel Shiffman - The Coding Train](https://thecodingtrain.com)
|
||||
- [OpenProcessing](openprocessing.org)
|
||||
Danke für eure Teilnahme am **Coding Art**-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 [ag-link@riseup.net](mailto:ag-link@riseup.net).
|
||||
|
||||
<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/)
|
||||
</footer>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -10,14 +10,15 @@ html {
|
|||
|
||||
body {
|
||||
width: 80%;
|
||||
max-width: 1024px;
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
background-color: #fdf6e3 !important;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 3em;
|
||||
margin-top: 4em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -27,6 +28,10 @@ a {
|
|||
color: var(--link-color);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
h2:after {
|
||||
content: "";
|
||||
background-image: url("https://ag-link.xyz/assets/img/connection.png");
|
||||
|
|
@ -36,3 +41,11 @@ h2:after {
|
|||
display: inline-block;
|
||||
margin-left: .3em;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0.5em 0 0 0;
|
||||
}
|
||||
|
||||
li li {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue