From 8664ed9f25d2e6abc95d2a747160e06144207c20 Mon Sep 17 00:00:00 2001 From: Marco Bakera Date: Wed, 25 Dec 2024 15:15:43 +0100 Subject: [PATCH] slide update --- docs/38c3/slides.html | 169 ++++++++++++++++++------------------------ docs/38c3/slides.md | 147 +++++++++++++++++------------------- 2 files changed, 142 insertions(+), 174 deletions(-) diff --git a/docs/38c3/slides.html b/docs/38c3/slides.html index dddd968..e064bc8 100644 --- a/docs/38c3/slides.html +++ b/docs/38c3/slides.html @@ -28,12 +28,13 @@

Motivation

-

Flipdotanzeige

-

Demos vorhanden.

+

Flipdotanzeige (Labor, Saal 3)

+

Demos vorhanden.
+Ähnlichkeiten: Geringe Auflösung, wenige Farben

auto

-

Aufruf c3clounge

+

Aufruf c3lounge

Ein sinnvoller Anlass

@@ -41,7 +42,7 @@

Aufruf c3clounge

pyxel

  • Einfache Python Game-Engine
    • -
  • inspiriert von PICO-8
    • +
  • inspiriert von PICO-8 (aber kostenlos)
  • Editoren für
    • Sprites
      • @@ -53,25 +54,17 @@

      pyxel

    -

    Sprite-Editor

    -

    Bei pyxel als Image bezeichnet

    -

    +

    Sprite- und Tilemap-Editor

    +

    Sprite: Bei pyxel als Image bezeichnet
    +Tilemaps werden aus Sprites zusammengesetzt

    +

    -

    Tilemap-Editor

    -

    Setzt Maps aus Sprites zusammen

    -

    +

    Sound- und Musik-Editor

    +

    -

    Sound-Editor

    -

    -
    -
    -

    Musik-Editor

    -

    -
    -
    -

    Einfaches Programm

    +

    Einfaches Programm (Hello World)

    import pyxel
 
 class App:
@@ -90,20 +83,19 @@ 
    Einfaches Programm
    
 App()
    -
    +

    Old-School Demo-Algorithmen

    • Plasma
      • -
    • Swirl
    • Moire
    • Perlin Noise
    -
    +

    "Plasma"

    -
    +

    "Plasma" (Code)

    class Plasma:
     def __init__(self):
@@ -127,11 +119,11 @@ 
    "Plasma" (Code)
    
         return v > 0.3
    -
    +

    Rotating Plasma

    -
    +

    Rotating Plasma (Code)

    class RotatingPlasma:
     def __init__(self):
@@ -155,47 +147,7 @@ 
    Rotating Plasma (Code)
    
         return v
    -
    -

    Swirl

    -

    -
    -
    -

    Swirl (Code)

    -
    class Swirl:
-    def __init__(self):
-        self.timestep = 0
-        self.parameter1 = 0
-        
-    def update(self):
-        self.timestep = math.sin(time.time() / 18) * 1500
-        self.parameter1 = pyxel.mouse_x / WIDTH
-
-    def draw(self):
-        # clear and iterate each pixel x,y
-        ...
-        if self.swirl(x, y, self.timestep) > 0.2:
-            col = random.randint(5, 6)
-            pyxel.pset(x, y, col)
-
-    def swirl(self, x, y, step):
-        x -= (WIDTH/2.0)
-        y -= (HEIGHT/2.0)
-
-        dist = math.sqrt(pow(x, 2) + pow(y, 2))
-        angle = (step / 10.0) + dist / 1.5
-
-        s = math.sin(angle)
-        c = math.cos(angle)
-
-        xs = x * c - y * s
-        ys = x * s + y * c
-
-        r = abs(xs + ys)
-        val =  max(0.0, 0.7 - min(1.0, r/8.0))
-        return val
-
    -
    -
    +

    Perlin Noise

    • Durch Mouse-Bewegung beeinflussbar
      • @@ -203,7 +155,7 @@

      Perlin Noise

    -
    +

    Perlin Noise (Code)

    class PerlinNoise:
     def __init__(self):
@@ -230,16 +182,16 @@ 
    Perlin Noise (Code)
    
         pyxel.pset(x, y, col)
    -
    +

    Moire

    • Zwei Brennpunkte
    • Distanz zwischen Pixel und Brennpunkten berechnen
      • -
    • XOR der Distanzen und durch Ringdicke teilen
      • +
    • XOR der Distanzen bilden und durch Ringdicke teilen

    -
    +

    Moire (Code)

        def draw(self):
         pyxel.cls(0)
@@ -265,7 +217,7 @@ 
    Moire (Code)
    
                 pyxel.pset(x, y, shade)
    -
    +

    Ausblick

    • weitere Effekte (Paletten, ...)
      • @@ -273,43 +225,70 @@

      Ausblick

    • Tiles, Sound, Musik integrieren
    -
    +

    Web-App

    Export als Executable oder Web-App möglich

    $ pyxel papacke . demos.py
 $ pyxel app2html pyxel_tutorial.pyxapp
    -
    -

    Quellen

    -
      -
    • Pyxel: - -
      • -
    • Meine Demos/Folien: - -
      • -
    • Beschreibungen von Demo-Effekte: - -
      • -
    • Demos als HTML-Export +
      +

      Quellen

      - +
    • Pyxel: https://github.com/kitao/pyxel
      • +
    • Meine Demos/Folien: https://github.com/tbs1-bo/pyxel_tutorial
      • +
    • Beschreibungen von Demo-Effekten: https://seancode.com/demofx/
      • +
    • Demos als HTML-Export: https://tbs1-bo.github.io/pyxel_tutorial/38c3/demos.html
      • -

      Kontakt

      +

      Kontakt

      +
      +

      Weitere Demos

      +
      +
      +

      Swirl

      +

      +
      +
      +

      Swirl (Code)

      +
      class Swirl:
+    def __init__(self):
+        self.timestep = 0
+        self.parameter1 = 0
+        
+    def update(self):
+        self.timestep = math.sin(time.time() / 18) * 1500
+        self.parameter1 = pyxel.mouse_x / WIDTH
+
+    def draw(self):
+        # clear and iterate each pixel x,y
+        ...
+        if self.swirl(x, y, self.timestep) > 0.2:
+            col = random.randint(5, 6)
+            pyxel.pset(x, y, col)
+
+    def swirl(self, x, y, step):
+        x -= (WIDTH/2.0)
+        y -= (HEIGHT/2.0)
+
+        dist = math.sqrt(pow(x, 2) + pow(y, 2))
+        angle = (step / 10.0) + dist / 1.5
+
+        s = math.sin(angle)
+        c = math.cos(angle)
+
+        xs = x * c - y * s
+        ys = x * s + y * c
+
+        r = abs(xs + ys)
+        val =  max(0.0, 0.7 - min(1.0, r/8.0))
+        return val
+
      +
       \ No newline at end of file diff --git a/docs/38c3/slides.md b/docs/38c3/slides.md index e6c2905..ad93ba5 100644 --- a/docs/38c3/slides.md +++ b/docs/38c3/slides.md @@ -23,15 +23,16 @@ author: Pintman --- -# Flipdotanzeige +# Flipdotanzeige (Labor, Saal 3) Demos vorhanden. +Ähnlichkeiten: Geringe Auflösung, wenige Farben ![auto drop-shadow](flipdotdisplay.jpg) --- -# Aufruf c3clounge +# Aufruf c3lounge Ein sinnvoller Anlass @@ -42,7 +43,7 @@ Ein sinnvoller Anlass # pyxel - Einfache Python Game-Engine -- inspiriert von PICO-8 +- inspiriert von PICO-8 (aber kostenlos) - Editoren für - Sprites - Tilemaps @@ -51,35 +52,22 @@ Ein sinnvoller Anlass --- -# Sprite-Editor +# Sprite- und Tilemap-Editor -Bei pyxel als Image bezeichnet +Sprite: Bei pyxel als Image bezeichnet +Tilemaps werden aus Sprites zusammengesetzt -![drop-shadow](pyxel_image_editor.gif) +![drop-shadow](pyxel_image_editor.gif) ![drop-shadow](pyxel_tilemap_editor.gif) --- -# Tilemap-Editor +# Sound- und Musik-Editor -Setzt Maps aus Sprites zusammen - -![drop-shadow](pyxel_tilemap_editor.gif) +![drop-shadow](pyxel_sound.gif) ![drop-shadow](pyxel_music.gif) --- -# Sound-Editor - -![drop-shadow](pyxel_sound.gif) - ---- - -# Musik-Editor - -![drop-shadow](pyxel_music.gif) - ---- - -# Einfaches Programm +# Einfaches Programm (Hello World) ```python import pyxel @@ -105,7 +93,6 @@ App() # Old-School Demo-Algorithmen - Plasma -- Swirl - Moire - Perlin Noise @@ -173,50 +160,6 @@ class RotatingPlasma: return v ``` ---- -# Swirl - -![w:400 drop-shadow](swirl.gif) - ---- - -# Swirl (Code) - -```python -class Swirl: - def __init__(self): - self.timestep = 0 - self.parameter1 = 0 - - def update(self): - self.timestep = math.sin(time.time() / 18) * 1500 - self.parameter1 = pyxel.mouse_x / WIDTH - - def draw(self): - # clear and iterate each pixel x,y - ... - if self.swirl(x, y, self.timestep) > 0.2: - col = random.randint(5, 6) - pyxel.pset(x, y, col) - - def swirl(self, x, y, step): - x -= (WIDTH/2.0) - y -= (HEIGHT/2.0) - - dist = math.sqrt(pow(x, 2) + pow(y, 2)) - angle = (step / 10.0) + dist / 1.5 - - s = math.sin(angle) - c = math.cos(angle) - - xs = x * c - y * s - ys = x * s + y * c - - r = abs(xs + ys) - val = max(0.0, 0.7 - min(1.0, r/8.0)) - return val -``` - --- # Perlin Noise @@ -256,9 +199,10 @@ class PerlinNoise: --- # Moire + - Zwei Brennpunkte - Distanz zwischen Pixel und Brennpunkten berechnen -- XOR der Distanzen und durch Ringdicke teilen +- XOR der Distanzen bilden und durch Ringdicke teilen ![w:320 drop-shadow](moire.gif) @@ -311,19 +255,64 @@ $ pyxel app2html pyxel_tutorial.pyxapp --- -# Quellen +## Quellen -- Pyxel: - - https://github.com/kitao/pyxel -- Meine Demos/Folien: - - https://github.com/tbs1-bo/pyxel_tutorial -- Beschreibungen von Demo-Effekten: - - https://seancode.com/demofx/ -- Demos als HTML-Export - - https://tbs1-bo.github.io/pyxel_tutorial/38c3/demos.html +- Pyxel: https://github.com/kitao/pyxel +- Meine Demos/Folien: https://github.com/tbs1-bo/pyxel_tutorial +- Beschreibungen von Demo-Effekten: https://seancode.com/demofx/ +- Demos als HTML-Export: https://tbs1-bo.github.io/pyxel_tutorial/38c3/demos.html -# Kontakt +## Kontakt - Mastodon: @pintman@chaos.social - Mail: pintman@0xabc.de + +--- + +# Weitere Demos + +--- +# Swirl + +![w:400 drop-shadow](swirl.gif) + +--- + +# Swirl (Code) + +```python +class Swirl: + def __init__(self): + self.timestep = 0 + self.parameter1 = 0 + + def update(self): + self.timestep = math.sin(time.time() / 18) * 1500 + self.parameter1 = pyxel.mouse_x / WIDTH + + def draw(self): + # clear and iterate each pixel x,y + ... + if self.swirl(x, y, self.timestep) > 0.2: + col = random.randint(5, 6) + pyxel.pset(x, y, col) + + def swirl(self, x, y, step): + x -= (WIDTH/2.0) + y -= (HEIGHT/2.0) + + dist = math.sqrt(pow(x, 2) + pow(y, 2)) + angle = (step / 10.0) + dist / 1.5 + + s = math.sin(angle) + c = math.cos(angle) + + xs = x * c - y * s + ys = x * s + y * c + + r = abs(xs + ys) + val = max(0.0, 0.7 - min(1.0, r/8.0)) + return val +``` +