Create

Teachable machine > Web Serial

By Larux75 · 8 views · Jan 12, 2026

Simple script which converts teachable machine data to web serial daa.

🔀 Remix This 📖 View Docs ⛶ Full Screen ← Back to Gallery
📋 Embed Code

Copy this code to embed this sketch on your website:

<iframe src="https://p5js.ai/embed/a4baeee1-6082-491d-815e-3539b87d5dbc" width="400" height="400" frameborder="0" allow="autoplay" title="Teachable machine > Web Serial"></iframe>

Adjust width and height as needed. Preview embed →

❓ About This Sketch 3 questions

What visual elements does the Teachable Machine > Web Serial sketch create?

The sketch features a dark gradient background with floating particles that animate gently upwards, creating a calming visual effect.

How can users interact with the Teachable Machine > Web Serial sketch?

Users can swipe between panels to explore different features, including AI chat for code creation, live previews, and code editing.

What creative coding concepts are demonstrated in this sketch?

This sketch showcases particle systems for dynamic background animation and incorporates user-friendly mobile-first design principles for interactive coding.

💬 AI Chat History 2 messages
đŸ‘€ You
Poista web broadcast toiminto
đŸ€– AI
Hei!

Tarkistin projektisi tiedostot (`sketch.js`, `index.html`, `style.css`), enkÀ löytÀnyt niistÀ mitÀÀn koodia tai kirjastoja, jotka toteuttaisivat "web broadcast" -toiminnon. Koodisi on tÀllÀ hetkellÀ perus p5.js-luonnos, joka luo kanvaasin ja piirtÀÀ siihen taustan.

Jos olet huolissasi mahdollisesta web broadcast -toiminnosta, se saattaa olla ominaisuus kÀyttÀmÀssÀsi kehitysympÀristössÀ (IDE) tai alustalla, jolla koodia ajetaan. En voi poistaa tai muokata sellaisia alustan ominaisuuksia koodin kautta.

Voit olla huoletta, sillÀ nykyisessÀ koodissasi ei ole mitÀÀn, mikÀ lÀhettÀisi tai broadcastaisi sisÀltöÀ verkkoon.

TÀssÀ ovat tiedostosi muuttamattomina, vahvistaen, ettei broadcast-toimintoa ole:

--- sketch.js ---
```js
//====================================================
// This code was written on the p5js.ai IDE
// Using the xelsed-alpha6-flash tuned model
// Visit the site and support Dyslexic Research
//===================================================
function setup() {
createCanvas(windowWidth, windowHeight);
// Tip: Use windowWidth/windowHeight for responsive canvas
}
function draw() {
background(220);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
// Called when preview panel is resized
}
```

--- index.html ---
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js Sketch</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
```

--- style.css ---
```css
body {
margin: 0;
padding: 0;
overflow: hidden;
}

canvas {
display: block;
}
```
🎬 Video Preview