p5.html: Processing for HTML!

Andrew Sherman - a@ndr.ooo

Why What is p5.html?

What is the web made of?

JS
HTML
CSS

p5 can be all of these!

What is p5.html?

  • Processing for HTML (and CSS, and JS)
  • Very much a prototype
  • Built with HTML Custom Elements 

                            
                                
                                    
                                
                            
                            <script>
                              let x = 0;
                              function draw() {
                                document.getElementById('square').setAttribute('x', x);
                                x += 1;
                              }
                            </script>

Composable

How do you use it?


                            <head>
                                <script src="https://cdn.jsdelivr.net/npm/p5@latest/lib/p5.js"></script>
                                <script src="https://cdn.jsdelivr.net/npm/p5.html@latest/dist/p5.html.min.js"></script>
                            </head>

                            <body>
                                
                                    
                                
                            </body>

Tinkering environments

Build up, poke, prod, rearrange

Tinkering software

Quick changes, quick feedback

Building on top of p5.html

Composable software can be anywhere!

You don't need to use p5.html!

(But I hope you'll try it out)


                        class Brick {
                            draw() {}
                            attach(brick) {}
                        }
                        class SquareBrick extends Brick {}
                        class TreeBrick extends Brick {}
                        class Minifig extends Brick {
                            head; torso; legs;
                        }

Thank you!