Pulse-Width Modulation [Edit This MicroSim Using the P5.js Editor](https://editor.p5js.org/dmccreary/sketches/LuroLLnh9) [Run the Pulse-Width Modulation Demo](./pwm.html){ .md-button .md-button--primary } Pulse-width modulation is the way for microcontrollers to send a precise signal to a device such as a motor controller to control motor speed. PWM signals can also be used to change the brightness of an LED. This simulation has a slider that allows the user to change the "duty cycle" of a waveform. The simulation is a bright green line on a black background, just like the old CRT oscilloscope displays. ## Sample ChatGPT Prompt !!! prompt Generate a p5.js sketch file of a simulation of a static pulse width modulation (PWM) waveform on a 600x300 canvas. Add a range control slider to adjust the Duty Cycle of the waveform. Make the default Duty Cycle be 50%. The min should be 0% and the max should be 100%. Place the range control slider at the bottom of the canvas. Make the leftSliderMargin be 155. Make sure the range control slider has a width of canvasWidth-leftSliderMargin-20 using the style attribute. At the end of the draw() function add a text() function that displays the label and value of the duty cycle. I have tested this prompt several times using GPT-4 and it seems to work very well except for the precise layout of the duty cycle label, value and slider positioning. I had to tweak these by hand. ## Sample Response <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span> <span class="normal"> 2</span> <span class="normal"> 3</span> <span class="normal"> 4</span> <span class="normal"> 5</span> <span class="normal"> 6</span> <span class="normal"> 7</span> <span class="normal"> 8</span> <span class="normal"> 9</span> <span class="normal">10</span> <span class="normal">11</span> <span class="normal">12</span> <span class="normal">13</span> <span class="normal">14</span> <span class="normal">15</span> <span class="normal">16</span> <span class="normal">17</span> <span class="normal">18</span> <span class="normal">19</span> <span class="normal">20</span> <span class="normal">21</span> <span class="normal">22</span> <span class="normal">23</span> <span class="normal">24</span> <span class="normal">25</span> <span class="normal">26</span> <span class="normal">27</span> <span class="normal">28</span> <span class="normal">29</span> <span class="normal">30</span> <span class="normal">31</span> <span class="normal">32</span> <span class="normal">33</span> <span class="normal">34</span> <span class="normal">35</span> <span class="normal">36</span> <span class="normal">37</span> <span class="normal">38</span> <span class="normal">39</span> <span class="normal">40</span> <span class="normal">41</span> <span class="normal">42</span> <span class="normal">43</span> <span class="normal">44</span> <span class="normal">45</span> <span class="normal">46</span> <span class="normal">47</span> <span class="normal">48</span> <span class="normal">49</span> <span class="normal">50</span> <span class="normal">51</span> <span class="normal">52</span> <span class="normal">53</span> <span class="normal">54</span> <span class="normal">55</span> <span class="normal">56</span> <span class="normal">57</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="c1">/// Pulse Wave Modulation (PWM) simulation</span> <span class="c1">// Made to render like an old oscilloscope - lime green on black</span> <span class="c1">// Most of this sim was generated by GPT-4 with some cleanup on placement of the slider</span> <span class="kd">let</span><span class="w"> </span><span class="nx">canvasWidth</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">600</span><span class="p">;</span> <span class="kd">let</span><span class="w"> </span><span class="nx">canvasHeight</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">200</span><span class="p">;</span> <span class="kd">let</span><span class="w"> </span><span class="nx">dutyCycleSlider</span><span class="p">;</span> <span class="kd">let</span><span class="w"> </span><span class="nx">dutyCycle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0.5</span><span class="p">;</span><span class="w"> </span><span class="c1">// Initialize to 50%</span> <span class="kd">let</span><span class="w"> </span><span class="nx">cycles</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">6</span><span class="p">;</span> <span class="kd">let</span><span class="w"> </span><span class="nx">waveHeight</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">canvasHeight</span><span class="o">/</span><span class="mf">3</span><span class="p">;</span> <span class="kd">let</span><span class="w"> </span><span class="nx">leftSliderMargin</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">155</span><span class="p">;</span><span class="w"> </span><span class="c1">// at 16 point font</span> <span class="kd">function</span><span class="w"> </span><span class="nx">setup</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">canvas</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">createCanvas</span><span class="p">(</span><span class="nx">canvasWidth</span><span class="p">,</span><span class="w"> </span><span class="nx">canvasHeight</span><span class="p">);</span> <span class="w"> </span><span class="c1">// uncomment if you are placing in an HTML page</span> <span class="w"> </span><span class="c1">// canvas.parent('canvas-container');</span> <span class="w"> </span><span class="nx">textSize</span><span class="p">(</span><span class="mf">16</span><span class="p">);</span> <span class="w"> </span><span class="nx">dutyCycleSlider</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">createSlider</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="mf">0.5</span><span class="p">,</span><span class="w"> </span><span class="mf">0.01</span><span class="p">);</span><span class="w"> </span><span class="c1">// Range from 0 to 1, default value 0.5, step size 0.01</span> <span class="w"> </span><span class="nx">dutyCycleSlider</span><span class="p">.</span><span class="nx">position</span><span class="p">(</span><span class="nx">leftSliderMargin</span><span class="p">,</span><span class="w"> </span><span class="nx">canvasHeight</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">35</span><span class="p">);</span><span class="w"> </span><span class="c1">// Position slider</span> <span class="w"> </span><span class="nx">dutyCycleSlider</span><span class="p">.</span><span class="nx">style</span><span class="p">(</span><span class="s1">'width'</span><span class="p">,</span><span class="w"> </span><span class="nx">canvasWidth</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">leftSliderMargin</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">20</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">'px'</span><span class="p">);</span><span class="w"> </span><span class="c1">// Set width of slider</span> <span class="p">}</span> <span class="kd">function</span><span class="w"> </span><span class="nx">draw</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">background</span><span class="p">(</span><span class="s1">'black'</span><span class="p">);</span> <span class="w"> </span><span class="c1">// Update duty cycle</span> <span class="w"> </span><span class="nx">dutyCycle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dutyCycleSlider</span><span class="p">.</span><span class="nx">value</span><span class="p">();</span> <span class="w"> </span><span class="c1">// Set stroke for waveform</span> <span class="w"> </span><span class="nx">stroke</span><span class="p">(</span><span class="s1">'limegreen'</span><span class="p">);</span> <span class="w"> </span><span class="c1">// disable the fill in the waveform</span> <span class="w"> </span><span class="nx">noFill</span><span class="p">();</span> <span class="w"> </span><span class="c1">// make the line be double wide</span> <span class="w"> </span><span class="nx">strokeWeight</span><span class="p">(</span><span class="mf">2</span><span class="p">);</span> <span class="w"> </span><span class="c1">// Generate PWM waveform</span> <span class="w"> </span><span class="nx">beginShape</span><span class="p">();</span> <span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">x</span><span class="w"> </span><span class="o"><</span><span class="w"> </span><span class="nx">width</span><span class="p">;</span><span class="w"> </span><span class="nx">x</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">// Map x to time period of waveform</span> <span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">t</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">map</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">width</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">TWO_PI</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">cycles</span><span class="p">);</span> <span class="w"> </span><span class="c1">// Calculate value of waveform at this point in time</span> <span class="w"> </span><span class="c1">// Draw high if in duty cycle, low otherwise</span> <span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">sin</span><span class="p">(</span><span class="nx">t</span><span class="p">)</span><span class="w"> </span><span class="o">></span><span class="w"> </span><span class="mf">2</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="nx">dutyCycle</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">1</span><span class="p">)</span><span class="w"> </span><span class="o">?</span><span class="w"> </span> <span class="w"> </span><span class="mf">2</span><span class="o">*</span><span class="nx">height</span><span class="o">/</span><span class="mf">3</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="nx">height</span><span class="o">/</span><span class="mf">3</span><span class="p">;</span><span class="w"> </span> <span class="w"> </span><span class="c1">// Add vertex to waveform</span> <span class="w"> </span><span class="nx">vertex</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">y</span><span class="p">);</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="nx">endShape</span><span class="p">();</span> <span class="w"> </span><span class="c1">// Display duty cycle</span> <span class="w"> </span><span class="nx">fill</span><span class="p">(</span><span class="s1">'white'</span><span class="p">);</span> <span class="w"> </span><span class="nx">noStroke</span><span class="p">();</span> <span class="w"> </span><span class="c1">// Display duty cycle as percentage</span> <span class="w"> </span><span class="nx">text</span><span class="p">(</span><span class="s2">"Duty Cycle: "</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">nf</span><span class="p">(</span><span class="nx">dutyCycle</span><span class="o">*</span><span class="mf">100</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">)</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s2">"%"</span><span class="p">,</span><span class="w"> </span><span class="mf">20</span><span class="p">,</span><span class="w"> </span><span class="nx">height</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">20</span><span class="p">);</span><span class="w"> </span> <span class="p">}</span> </code></pre></div></td></tr></table></div> ## Key Learnings from the Simulation 1. We can use the ```map()``` function to transform the x coordinate into the time period of a waverform (t.) 1. We can draw a square wave using a ```sin()``` function with a threshold test. 2. We can use the ```beginShape()``` and ```endShape()``` around as set of ```vertex()``` point placements to generate waveforms. 3. We can use the "number format" function [```nf()```](https://p5js.org/reference/#/p5/nf) to display the percentage without a decimal point. ## Lesson Plan ### Lesson Plan Prompt <div class="highlight"><pre><span></span><code>I have a webpage that simulates a pulse-width-modulation waveform. The page has a slider that allows students to change the duty cycle from 0% to 100%. When the students change the slider, the waveform is updated with the duty cycle. Generate a lesson plan for a 9th-grade robotics class that uses this simulation. For follow up activities, we have Raspberry Pi Picos that we program with MicroPython. Return the response in a single raw markdown file. </code></pre></div> ### Lesson Plan: Understanding Pulse-Width Modulation in Robotics #### Objective: Students will understand the concept of PWM and its application in controlling robotic components like motors and LEDs. #### Materials Needed: - Computers with internet access for the PWM simulation webpage. - Projector for demonstrations. - Optional: Physical components such as a small motor, LED, and Arduino for real-world demonstration. #### Duration: 1 hour ### Lesson Outline: #### 1. Introduction to PWM (15 minutes) - Begin with a brief overview of PWM and its significance in robotics. - Explain key terms: duty cycle, frequency, analog vs. digital signals. #### 2. Demonstration of PWM Simulation (10 minutes) - Project the PWM simulation on the screen. - Show how changing the duty cycle affects the waveform. - Relate this to how it would affect a motor's speed or an LED's brightness. #### 3. Hands-On Activity with the Simulation (20 minutes) - Students will use the simulation on their computers. - Tasks: - Set the duty cycle to various levels (0%, 25%, 50%, 75%, 100%) and observe changes. - Students note their observations regarding the waveform changes. #### 4. Real-World Application Discussion (10 minutes) - Discuss how PWM is used in real-world robotics. - If available, demonstrate using a motor or LED with an Arduino. - Encourage students to think of examples where PWM might be used in everyday technology. #### 5. Reflection and Q&A (5 minutes) - Encourage students to ask questions. - Discuss the importance of PWM in precise control in robotics. ### Assessment: - Students will submit a brief report on their findings from the simulation. - Include a few quiz questions at the end of the session to gauge understanding. ### Extension Activity: - For advanced students or as a follow-up lesson, introduce a Python program that uses PWM to control a motor speed using a motor driver chip such as an L293D or control an LED brightness. ### Notes: - Ensure that all students understand the basic concepts before moving to the hands-on activity. - Assist students who might have difficulty with the simulation or concepts. - Encourage group discussions and peer learning. </article> </div> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> <button type="button" class="md-top md-icon" data-md-component="top" hidden> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg> Back to top </button> </main> <footer class="md-footer"> <nav class="md-footer__inner md-grid" aria-label="Footer" > <a href="../projectile-motion-gravity/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Projectile Motion With Gravity"> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </div> <div class="md-footer__title"> <span class="md-footer__direction"> Previous </span> <div class="md-ellipsis"> Projectile Motion With Gravity </div> </div> </a> <a href="../pythagorean-theorem/" class="md-footer__link md-footer__link--next" aria-label="Next: Pythagorean Theorem"> <div class="md-footer__title"> <span class="md-footer__direction"> Next </span> <div class="md-ellipsis"> Pythagorean Theorem </div> </div> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class="md-copyright"> <div class="md-copyright__highlight"> Copyright © 2025 Dan McCreary. Licensed under <a href="license/">CC BY-NC-SA 4.0</a> for non-commercial use. </div> </div> </div> </div> </footer> </div> <div class="md-dialog" data-md-component="dialog"> <div class="md-dialog__inner md-typeset"></div> </div> <script id="__config" type="application/json">{"base": "../..", "features": ["content.code.copy", "navigation.expand", "navigation.path", "navigation.prune", "navigation.indexes", "toc.follow", "navigation.top", "navigation.footer", "content.action.edit"], "search": "../../assets/javascripts/workers/search.6ce7567c.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script> <script src="../../assets/javascripts/bundle.83f73b43.min.js"></script> <script src="../../js/extra.js"></script> <script src="https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js"></script> </body> </html>