From 754f11451ca5e20d4bacf2dd8aa3083ffaa508d5 Mon Sep 17 00:00:00 2001 From: Marco Bakera Date: Wed, 25 Dec 2024 12:32:22 +0100 Subject: [PATCH 1/6] html export demos --- README.md | 3 ++- docs/38c3/demos.html | 5 +++++ docs/38c3/slides.md | 3 +++ 3 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 docs/38c3/demos.html diff --git a/README.md b/README.md index 387f364..18543d5 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,8 @@ In [game_07_kollision.py](game_07_kollision.py) wird eine einfache Kollisionserk ## Präsentation -- [Folien für den 38c3](https://tbs1-bo.github.io/pyxel_tutorial/38c3/slides.html) +- [Folien für den 38c3](https://tbs1-bo.github.io/pyxel_tutorial/38c3/slides.html), +[Demos](https://tbs1-bo.github.io/pyxel_tutorial/38c3/demos.html) ## TODO diff --git a/docs/38c3/demos.html b/docs/38c3/demos.html new file mode 100644 index 0000000..c50fdad --- /dev/null +++ b/docs/38c3/demos.html @@ -0,0 +1,5 @@ + + + diff --git a/docs/38c3/slides.md b/docs/38c3/slides.md index 3fd0c19..5581b27 100644 --- a/docs/38c3/slides.md +++ b/docs/38c3/slides.md @@ -308,6 +308,9 @@ class PerlinNoise: - https://github.com/tbs1-bo/pyxel-tutorial - Beschreibungen von Demo-Effekte: - https://seancode.com/demofx/ +- Demos als HTML-Export + - https://tbs1-bo.github.io/pyxel_tutorial/38c3/demos.html + # Kontakt From 3b5d19b0572dd7667f5c05c4432c5227a458e7b1 Mon Sep 17 00:00:00 2001 From: Marco Bakera Date: Wed, 25 Dec 2024 12:40:56 +0100 Subject: [PATCH 2/6] add web-app export instructions and update sources in slides --- docs/38c3/slides.html | 14 +++++++++++++- docs/38c3/slides.md | 15 +++++++++++++-- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/docs/38c3/slides.html b/docs/38c3/slides.html index a2a7feb..dddd968 100644 --- a/docs/38c3/slides.html +++ b/docs/38c3/slides.html @@ -274,6 +274,13 @@

Ausblick

+

Web-App

+

Export als Executable oder Web-App möglich

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

Quellen

+
  • Demos als HTML-Export + +

    • Kontakt

      diff --git a/docs/38c3/slides.md b/docs/38c3/slides.md index 5581b27..e6c2905 100644 --- a/docs/38c3/slides.md +++ b/docs/38c3/slides.md @@ -300,13 +300,24 @@ class PerlinNoise: --- +# Web-App + +Export als Executable oder Web-App möglich + +```shell +$ pyxel papacke . demos.py +$ pyxel app2html pyxel_tutorial.pyxapp +``` + +--- + # Quellen - Pyxel: - https://github.com/kitao/pyxel - Meine Demos/Folien: - - https://github.com/tbs1-bo/pyxel-tutorial -- Beschreibungen von Demo-Effekte: + - 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 From 8664ed9f25d2e6abc95d2a747160e06144207c20 Mon Sep 17 00:00:00 2001 From: Marco Bakera Date: Wed, 25 Dec 2024 15:15:43 +0100 Subject: [PATCH 3/6] 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 +``` + From ec1077ca65a52c5e64e16787a517ab97a183adcf Mon Sep 17 00:00:00 2001 From: Marco Bakera Date: Thu, 26 Dec 2024 11:54:44 +0100 Subject: [PATCH 4/6] update slides for 38c3 --- docs/38c3/slides.html | 60 +++++++++++++++++++++++-------------------- docs/38c3/slides.md | 59 +++++++++++++++++++++--------------------- 2 files changed, 62 insertions(+), 57 deletions(-) diff --git a/docs/38c3/slides.html b/docs/38c3/slides.html index e064bc8..c1a9c07 100644 --- a/docs/38c3/slides.html +++ b/docs/38c3/slides.html @@ -28,14 +28,16 @@

        Motivation

      -

      Flipdotanzeige (Labor, Saal 3)

      -

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

      +

      Flipdotanzeige (Labor Assembly, Saal 3)

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

      auto

      Aufruf c3lounge

      -

      Ein sinnvoller Anlass

      +

      Ein sinnvoller Anlass:

      @@ -86,9 +88,12 @@

      Einfaches Programm (Hello World)

      Old-School Demo-Algorithmen

        -
      • Plasma
        • -
      • Moire
        • -
      • Perlin Noise
        • +
      • Plasma
        +
        • +
      • Perlin Noise
        +
        • +
      • Moire
        +
      @@ -108,12 +113,13 @@

      "Plasma" (Code)

      def draw(self): pyxel.cls(0) # clear screen - for y in range(HEIGHT): + for y in range(HEIGHT): # iterate all pixels x,y for x in range(WIDTH): if self.draw_px(x, y): - pyxel.pset(x, y, 6) + pyxel.pset(x, y, 6) # set pixel with pyxel def draw_px(self, x, y): + # fancy trig-math v = 0.3 + (0.3 * math.sin((x * self.s) + self.i / 4.0) * math.cos((y * self.s) + self.i / 4.0)) return v > 0.3 @@ -127,24 +133,21 @@

      Rotating Plasma

      Rotating Plasma (Code)

      class RotatingPlasma:
     def __init__(self):
-        self.current = time.time()
+        self.t = time.time()
 
     def update(self):
-        self.current = time.time()
+        self.t = time.time()
 
     def draw(self):
         # clear and iterate each pixel x,y
         ...
-        if self.draw_px(x, y):
-            pyxel.pset(x, y, int(b * 3))
-
-    def draw_px(self, x, y):
-        v = math.sin(1*(0.5*x*math.sin(self.current/2) +
-                        0.5*y*math.cos(self.current/3)) + self.current)
+        v = math.sin(1 * (0.5 * x * math.sin(self.t/2) +
+                          0.5 * y * math.cos(self.t/3)) + self.t)
         # -1 < sin() < +1
-        # therfore correct the value and bring into range [0, 1]
-        v = (v+1.0) / 2.0
-        return v 
+        # map the value range [0, 1]
+        v = (v + 1.0) / 2.0
+        if v > 0.3:
+            pyxel.pset(x, y, int(b * 3))
      @@ -159,17 +162,18 @@

      Perlin Noise

      Perlin Noise (Code)

      class PerlinNoise:
     def __init__(self):
-        self.parameter = 0
+        self.mouse_parameter = 1
 
     def update(self):
-        self.parameter = max(0.1, 10 * pyxel.mouse_x / WIDTH)
+        # get mouse x-position from pyxel
+        self.mouse_parameter = max(0.1, 10 * pyxel.mouse_x / WIDTH)
 
     def draw(self):
         # clear and iterate each pixel x,y
         ...
         n = pyxel.noise(
-            x / self.parameter,
-            y / self.parameter,
+            x / self.mouse_parameter,
+            y / self.mouse_parameter,
             pyxel.frame_count / 40
         )
 
@@ -213,8 +217,8 @@ 
      Moire (Code)
      
 
                 xored = rt1 ^ rt2  # xor the two distances
             
-                shade = ((xored >> 4) & 1) * 3 # fancy division
-                pyxel.pset(x, y, shade)
+                shade = ((xored >> 4) & 1) # fancy division and mapping to 0,1
+                pyxel.pset(x, y, shade * 3)
      @@ -235,10 +239,10 @@

      Web-App

      Quellen

      Kontakt

        diff --git a/docs/38c3/slides.md b/docs/38c3/slides.md index ad93ba5..e9aa2f8 100644 --- a/docs/38c3/slides.md +++ b/docs/38c3/slides.md @@ -23,10 +23,10 @@ author: Pintman --- -# Flipdotanzeige (Labor, Saal 3) +# Flipdotanzeige (Labor Assembly, Saal 3) -Demos vorhanden. -Ähnlichkeiten: Geringe Auflösung, wenige Farben +- Demos waren vorhanden. +- Ähnlichkeiten: Geringe Auflösung, wenige Farben ![auto drop-shadow](flipdotdisplay.jpg) @@ -34,7 +34,7 @@ Demos vorhanden. # Aufruf c3lounge -Ein sinnvoller Anlass +Ein sinnvoller Anlass: ![w:900 drop-shadow](c3lounge_text.png) @@ -92,9 +92,12 @@ App() # Old-School Demo-Algorithmen -- Plasma -- Moire -- Perlin Noise +- Plasma +![drop-shadow](checker.gif) ![drop-shadow](rotating_plasma.gif) +- Perlin Noise +![drop-shadow](perlin_noise.gif) +- Moire +![drop-shadow](moire.gif) --- # "Plasma" @@ -117,12 +120,13 @@ class Plasma: def draw(self): pyxel.cls(0) # clear screen - for y in range(HEIGHT): + for y in range(HEIGHT): # iterate all pixels x,y for x in range(WIDTH): if self.draw_px(x, y): - pyxel.pset(x, y, 6) + pyxel.pset(x, y, 6) # set pixel with pyxel def draw_px(self, x, y): + # fancy trig-math v = 0.3 + (0.3 * math.sin((x * self.s) + self.i / 4.0) * math.cos((y * self.s) + self.i / 4.0)) return v > 0.3 @@ -140,24 +144,21 @@ class Plasma: ```python class RotatingPlasma: def __init__(self): - self.current = time.time() + self.t = time.time() def update(self): - self.current = time.time() + self.t = time.time() def draw(self): # clear and iterate each pixel x,y ... - if self.draw_px(x, y): - pyxel.pset(x, y, int(b * 3)) - - def draw_px(self, x, y): - v = math.sin(1*(0.5*x*math.sin(self.current/2) + - 0.5*y*math.cos(self.current/3)) + self.current) + v = math.sin(1 * (0.5 * x * math.sin(self.t/2) + + 0.5 * y * math.cos(self.t/3)) + self.t) # -1 < sin() < +1 - # therfore correct the value and bring into range [0, 1] - v = (v+1.0) / 2.0 - return v + # map the value range [0, 1] + v = (v + 1.0) / 2.0 + if v > 0.3: + pyxel.pset(x, y, int(b * 3)) ``` --- @@ -174,17 +175,18 @@ class RotatingPlasma: ```python class PerlinNoise: def __init__(self): - self.parameter = 0 + self.mouse_parameter = 1 def update(self): - self.parameter = max(0.1, 10 * pyxel.mouse_x / WIDTH) + # get mouse x-position from pyxel + self.mouse_parameter = max(0.1, 10 * pyxel.mouse_x / WIDTH) def draw(self): # clear and iterate each pixel x,y ... n = pyxel.noise( - x / self.parameter, - y / self.parameter, + x / self.mouse_parameter, + y / self.mouse_parameter, pyxel.frame_count / 40 ) @@ -231,8 +233,8 @@ class PerlinNoise: xored = rt1 ^ rt2 # xor the two distances - shade = ((xored >> 4) & 1) * 3 # fancy division - pyxel.pset(x, y, shade) + shade = ((xored >> 4) & 1) # fancy division and mapping to 0,1 + pyxel.pset(x, y, shade * 3) ``` --- @@ -257,11 +259,10 @@ $ pyxel app2html pyxel_tutorial.pyxapp ## 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 +- Beschreibungen von Demo-Effekten: https://seancode.com/demofx ## Kontakt From 2368d98c821ed914a4e4ae54c4ea7d854b2c22c6 Mon Sep 17 00:00:00 2001 From: Pintman Date: Fri, 27 Dec 2024 09:20:07 +0100 Subject: [PATCH 5/6] more better slides --- docs/38c3/slides.html | 197 +++++++++++++++++++++--------------------- docs/38c3/slides.md | 197 ++++++++++++++++++++++-------------------- 2 files changed, 200 insertions(+), 194 deletions(-) diff --git a/docs/38c3/slides.html b/docs/38c3/slides.html index c1a9c07..7e6c5ad 100644 --- a/docs/38c3/slides.html +++ b/docs/38c3/slides.html @@ -23,7 +23,7 @@

        Old-School demos mit pyxel!

        Motivation

          -
        • Einfache Game-Engine lernen -> pyxel (https://github.com/kitao/pyxel)
          • +
        • Einfache Game-Engine lernen -> pyxel
        • Einfache Algorithmen für Old-School Demos
        @@ -39,11 +39,16 @@

        Flipdotanzeige (Labor Assembly, Sa

        Aufruf c3lounge

        Ein sinnvoller Anlass:

        +

        https://chaos.social/@c3lounge/113698624147114424

        pyxel

          -
        • Einfache Python Game-Engine
          • +
        • Einfache integrierte Python Game-Engine + +
        • inspiriert von PICO-8 (aber kostenlos)
        • Editoren für
            @@ -86,71 +91,48 @@

            Einfaches Programm (Hello World)

        -

        Old-School Demo-Algorithmen

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

        Old-School Demo-Algorithmen (Auswahl)

        +

        Plasma
        +Perlin Noise
        +Moire
        +Swirl

        -

        "Plasma"

        -

        +

        Moire

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

        -

        "Plasma" (Code)

        -
        class Plasma:
-    def __init__(self):
-        self.i = 0
-        self.s = 1
-
-    def update(self):
-        self.i += 2
-        self.s = math.sin(self.i / 100.0) * 2.0 + 6.0
+
        Moire (Code)
        
+
            def draw(self):
+        pyxel.cls(0)
+        t = time.time()
+        # moving center of two circles c1 and c2
+        cx1 = math.sin(t / 2) * WIDTH / 3 + WIDTH / 2
+        cy1 = math.sin(t / 4) * HEIGHT / 3 + HEIGHT / 2
+        ...
+        for y in range(HEIGHT): # calculate distance for y
+            dy = (y - cy1) * (y - cy1)
+            dy2 = (y - cy2) * (y - cy2)
+            for x in range(WIDTH): # ... and x
+                dx = (x - cx1) * (x - cx1)
+                dx2 = (x - cx2) * (x - cx2)
 
-    def draw(self):
-        pyxel.cls(0) # clear screen
-        for y in range(HEIGHT): # iterate all pixels x,y
-            for x in range(WIDTH):
-                if self.draw_px(x, y):
-                    pyxel.pset(x, y, 6) # set pixel with pyxel
+                # distances
+                rt1 = int(math.sqrt(dx + dy))
+                rt2 = int(math.sqrt(dx2 + dy2))
 
-    def draw_px(self, x, y):
-        # fancy trig-math
-        v = 0.3 + (0.3 * math.sin((x * self.s) + self.i / 4.0) * 
-                   math.cos((y * self.s) + self.i / 4.0))
-        return v > 0.3
+                xored = rt1 ^ rt2  # xor the two distances
+            
+                shade = ((xored >> 4) & 1) # fancy division and mapping to 0,1
+                pyxel.pset(x, y, shade * 3)
        -

        Rotating Plasma

        -

        -
        -
        -

        Rotating Plasma (Code)

        -
        class RotatingPlasma:
-    def __init__(self):
-        self.t = time.time()
-
-    def update(self):
-        self.t = time.time()
-
-    def draw(self):
-        # clear and iterate each pixel x,y
-        ...
-        v = math.sin(1 * (0.5 * x * math.sin(self.t/2) +
-                          0.5 * y * math.cos(self.t/3)) + self.t)
-        # -1 < sin() < +1
-        # map the value range [0, 1]
-        v = (v + 1.0) / 2.0
-        if v > 0.3:
-            pyxel.pset(x, y, int(b * 3))
-
        -
        -

        Perlin Noise

        • Durch Mouse-Bewegung beeinflussbar
          • @@ -158,7 +140,7 @@

          Perlin Noise

        -
        +

        Perlin Noise (Code)

        class PerlinNoise:
     def __init__(self):
@@ -186,42 +168,7 @@ 
        Perlin Noise (Code)
        
         pyxel.pset(x, y, col)
        -
        -

        Moire

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

        -
        -
        -

        Moire (Code)

        -
            def draw(self):
-        pyxel.cls(0)
-        t = time.time()
-        # moving center of two circles c1 and c2
-        cx1 = math.sin(t / 2) * WIDTH / 3 + WIDTH / 2
-        cy1 = math.sin(t / 4) * HEIGHT / 3 + HEIGHT / 2
-        ...
-        for y in range(HEIGHT): # calculate distance for y
-            dy = (y - cy1) * (y - cy1)
-            dy2 = (y - cy2) * (y - cy2)
-            for x in range(WIDTH): # ... and x
-                dx = (x - cx1) * (x - cx1)
-                dx2 = (x - cx2) * (x - cx2)
-
-                # distances
-                rt1 = int(math.sqrt(dx + dy))
-                rt2 = int(math.sqrt(dx2 + dy2))
-
-                xored = rt1 ^ rt2  # xor the two distances
-            
-                shade = ((xored >> 4) & 1) # fancy division and mapping to 0,1
-                pyxel.pset(x, y, shade * 3)
-
        -
        -
        +

        Ausblick

        • weitere Effekte (Paletten, ...)
          • @@ -229,14 +176,14 @@

          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

        -
        +

        Weitere Demos

        +
        +

        "Plasma"

        +

        +
        +
        +

        "Plasma" (Code)

        +
        class Plasma:
+    def __init__(self):
+        self.i = 0
+        self.s = 1
+
+    def update(self):
+        self.i += 2
+        self.s = math.sin(self.i / 100.0) * 2.0 + 6.0
+
+    def draw(self):
+        pyxel.cls(0) # clear screen
+        for y in range(HEIGHT): # iterate all pixels x,y
+            for x in range(WIDTH):
+                if self.draw_px(x, y):
+                    pyxel.pset(x, y, 6) # set pixel with pyxel
+
+    def draw_px(self, x, y):
+        # fancy trig-math
+        v = 0.3 + (0.3 * math.sin((x * self.s) + self.i / 4.0) * 
+                   math.cos((y * self.s) + self.i / 4.0))
+        return v > 0.3
+
        +
        +
        +

        Rotating Plasma

        +

        +
        +
        +

        Rotating Plasma (Code)

        +
        class RotatingPlasma:
+    def __init__(self):
+        self.t = time.time()
+
+    def update(self):
+        self.t = time.time()
+
+    def draw(self):
+        # clear and iterate each pixel x,y
+        ...
+        v = math.sin(1 * (0.5 * x * math.sin(self.t/2) +
+                          0.5 * y * math.cos(self.t/3)) + self.t)
+        # -1 < sin() < +1
+        # map the value range [0, 1]
+        v = (v + 1.0) / 2.0
+        if v > 0.3:
+            pyxel.pset(x, y, int(b * 3))
+
        +

        Swirl

        diff --git a/docs/38c3/slides.md b/docs/38c3/slides.md index e9aa2f8..e706f8f 100644 --- a/docs/38c3/slides.md +++ b/docs/38c3/slides.md @@ -18,7 +18,7 @@ author: Pintman # Motivation -- Einfache Game-Engine lernen -> pyxel (https://github.com/kitao/pyxel) +- Einfache Game-Engine lernen -> pyxel - Einfache Algorithmen für Old-School Demos --- @@ -38,11 +38,14 @@ Ein sinnvoller Anlass: ![w:900 drop-shadow](c3lounge_text.png) +https://chaos.social/@c3lounge/113698624147114424 + --- # pyxel -- Einfache Python Game-Engine +- Einfache integrierte Python Game-Engine + - https://github.com/kitao/pyxel - inspiriert von PICO-8 (aber kostenlos) - Editoren für - Sprites @@ -90,78 +93,52 @@ App() --- -# Old-School Demo-Algorithmen - -- Plasma -![drop-shadow](checker.gif) ![drop-shadow](rotating_plasma.gif) -- Perlin Noise -![drop-shadow](perlin_noise.gif) -- Moire -![drop-shadow](moire.gif) - ---- -# "Plasma" +# Old-School Demo-Algorithmen (Auswahl) -![w:400 drop-shadow](checker.gif) +Plasma ![drop-shadow](checker.gif) ![drop-shadow](rotating_plasma.gif) +Perlin Noise ![drop-shadow](perlin_noise.gif) +Moire ![drop-shadow](moire.gif) +Swirl ![drop-shadow](swirl.gif) --- +# Moire -# "Plasma" (Code) - -```python -class Plasma: - def __init__(self): - self.i = 0 - self.s = 1 - - def update(self): - self.i += 2 - self.s = math.sin(self.i / 100.0) * 2.0 + 6.0 - - def draw(self): - pyxel.cls(0) # clear screen - for y in range(HEIGHT): # iterate all pixels x,y - for x in range(WIDTH): - if self.draw_px(x, y): - pyxel.pset(x, y, 6) # set pixel with pyxel - - def draw_px(self, x, y): - # fancy trig-math - v = 0.3 + (0.3 * math.sin((x * self.s) + self.i / 4.0) * - math.cos((y * self.s) + self.i / 4.0)) - return v > 0.3 -``` - ---- -# Rotating Plasma +- Zwei Brennpunkte +- Distanz zwischen Pixel und Brennpunkten berechnen +- XOR der Distanzen bilden und durch Ringdicke teilen -![w:400 drop-shadow](rotating_plasma.gif) +![w:320 drop-shadow](moire.gif) --- -# Rotating Plasma (Code) +# Moire (Code) ```python -class RotatingPlasma: - def __init__(self): - self.t = time.time() - - def update(self): - self.t = time.time() - def draw(self): - # clear and iterate each pixel x,y + pyxel.cls(0) + t = time.time() + # moving center of two circles c1 and c2 + cx1 = math.sin(t / 2) * WIDTH / 3 + WIDTH / 2 + cy1 = math.sin(t / 4) * HEIGHT / 3 + HEIGHT / 2 ... - v = math.sin(1 * (0.5 * x * math.sin(self.t/2) + - 0.5 * y * math.cos(self.t/3)) + self.t) - # -1 < sin() < +1 - # map the value range [0, 1] - v = (v + 1.0) / 2.0 - if v > 0.3: - pyxel.pset(x, y, int(b * 3)) -``` + for y in range(HEIGHT): # calculate distance for y + dy = (y - cy1) * (y - cy1) + dy2 = (y - cy2) * (y - cy2) + for x in range(WIDTH): # ... and x + dx = (x - cx1) * (x - cx1) + dx2 = (x - cx2) * (x - cx2) + + # distances + rt1 = int(math.sqrt(dx + dy)) + rt2 = int(math.sqrt(dx2 + dy2)) + xored = rt1 ^ rt2 # xor the two distances + + shade = ((xored >> 4) & 1) # fancy division and mapping to 0,1 + pyxel.pset(x, y, shade * 3) +``` --- + # Perlin Noise - Durch Mouse-Bewegung beeinflussbar @@ -200,43 +177,7 @@ class PerlinNoise: ``` --- -# Moire - -- Zwei Brennpunkte -- Distanz zwischen Pixel und Brennpunkten berechnen -- XOR der Distanzen bilden und durch Ringdicke teilen -![w:320 drop-shadow](moire.gif) - ---- - -# Moire (Code) - -```python - def draw(self): - pyxel.cls(0) - t = time.time() - # moving center of two circles c1 and c2 - cx1 = math.sin(t / 2) * WIDTH / 3 + WIDTH / 2 - cy1 = math.sin(t / 4) * HEIGHT / 3 + HEIGHT / 2 - ... - for y in range(HEIGHT): # calculate distance for y - dy = (y - cy1) * (y - cy1) - dy2 = (y - cy2) * (y - cy2) - for x in range(WIDTH): # ... and x - dx = (x - cx1) * (x - cx1) - dx2 = (x - cx2) * (x - cx2) - - # distances - rt1 = int(math.sqrt(dx + dy)) - rt2 = int(math.sqrt(dx2 + dy2)) - - xored = rt1 ^ rt2 # xor the two distances - - shade = ((xored >> 4) & 1) # fancy division and mapping to 0,1 - pyxel.pset(x, y, shade * 3) -``` ---- # Ausblick @@ -273,6 +214,70 @@ $ pyxel app2html pyxel_tutorial.pyxapp # Weitere Demos + +--- +# "Plasma" + +![w:400 drop-shadow](checker.gif) + +--- + +# "Plasma" (Code) + +```python +class Plasma: + def __init__(self): + self.i = 0 + self.s = 1 + + def update(self): + self.i += 2 + self.s = math.sin(self.i / 100.0) * 2.0 + 6.0 + + def draw(self): + pyxel.cls(0) # clear screen + for y in range(HEIGHT): # iterate all pixels x,y + for x in range(WIDTH): + if self.draw_px(x, y): + pyxel.pset(x, y, 6) # set pixel with pyxel + + def draw_px(self, x, y): + # fancy trig-math + v = 0.3 + (0.3 * math.sin((x * self.s) + self.i / 4.0) * + math.cos((y * self.s) + self.i / 4.0)) + return v > 0.3 +``` + +--- +# Rotating Plasma + +![w:400 drop-shadow](rotating_plasma.gif) + +--- + +# Rotating Plasma (Code) + +```python +class RotatingPlasma: + def __init__(self): + self.t = time.time() + + def update(self): + self.t = time.time() + + def draw(self): + # clear and iterate each pixel x,y + ... + v = math.sin(1 * (0.5 * x * math.sin(self.t/2) + + 0.5 * y * math.cos(self.t/3)) + self.t) + # -1 < sin() < +1 + # map the value range [0, 1] + v = (v + 1.0) / 2.0 + if v > 0.3: + pyxel.pset(x, y, int(b * 3)) +``` + + --- # Swirl From d7cec2577e05317f92a9dc2444b81c2acfbdc8c1 Mon Sep 17 00:00:00 2001 From: Christoph Kaiser Date: Sat, 28 Dec 2024 17:17:49 +0100 Subject: [PATCH 6/6] update reference to .pyxres file --- game.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/game.py b/game.py index 3689f2a..3c8ca13 100644 --- a/game.py +++ b/game.py @@ -6,7 +6,7 @@ def __init__(self): self.y = 8 pyxel.init(8*8, 8*8) - pyxel.load("res.pyxres") + pyxel.load("my_resource.pyxres") pyxel.run(self.update, self.draw) def update(self):