<!DOCTYPE html>
<html class="no-js" lang="zh-Hans">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.">
    <title tabindex="1">examples | p5.js</title>
    <link rel="stylesheet" href="/assets/css/all.css?v=4c8161">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet">

    <link rel="shortcut icon" href="/../../assets/img/favicon.ico">
    <link rel="icon" href="/../../assets/img/favicon.ico">


    <script src="/../../assets/js/vendor/jquery-1.12.4.min.js"></script>
    <script src="/../../assets/js/vendor/ace-nc/ace.js"></script>
    <script src="/../../assets/js/vendor/ace-nc/mode-javascript.js"></script>
    <script src="/../../assets/js/vendor/prism.js"></script>
    <script src="/assets/js/init.js?v=97b4f7"></script>

    <script src="/../../assets/js/vendor/pangu.min.js"></script>

  </head>
  <body>

    <a href="#content" class="sr-only">跳到内容</a>
    
    <!-- p5*js language buttons -->
    <div id="i18n-btn">
      <h2 id="i18n-settings" class="sr-only">语言设定</h2>
      <ul id="i18n-buttons" aria-labelledby="i18n-settings">
        <li><a href='#' lang='en' data-lang='en'>English</a></li>
        <li><a href='#' lang='es' data-lang='es'>Español</a></li>
        <li><a href='#' lang='zh-Hans' data-lang='zh-Hans'>简体中文</a></li>
        <li><a href='#' lang='ko' data-lang='ko'>한국어</a></li>
        <li><a href='#' lang='hi' data-lang='hi'>हिन्दी</a></li>
      </ul>
    </div>    <!-- .container -->
    <div class="container">

      <!-- logo -->
      <header id="lockup">
        <a href="/zh-Hans/">
          <img src="/../../assets/img/p5js.svg" alt="p5 homepage" id="logo_image" class="logo" />
          <div id="p5_logo"></div>
        </a>
      </header>
      <!-- close logo -->

      

<div id="examples-page">

  
  <!-- site navigation -->
  <div class="column-span">
    <nav class="sidebar-menu-nav-element">
      <h2 id="menu-title" class="sr-only">网站导航</h2>
      <input class="sidebar-menu-btn" type="checkbox" id="sidebar-menu-btn" />
      <label class="sidebar-menu-icon" for="sidebar-menu-btn"><span class="sidebar-nav-icon"></span></label>
      <ul id="menu" class="sidebar-menu" aria-labelledby="menu-title">
        <li><a href="/zh-Hans/">主页</a></li>
        <li><a href="https://editor.p5js.org">编辑器</a></li>
        <li><a href="/zh-Hans/download/">下载</a></li>
        <li><a href="/zh-Hans/download/support.html">捐赠</a></li>
        <li><a href="/zh-Hans/get-started/">入门</a></li>
        <li><a href="/zh-Hans/reference/">参考文献</a></li>
        <li><a href="/zh-Hans/libraries/">程式库</a></li>
        <li><a href="/zh-Hans/learn/">学习</a></li>
        <li><a href="/zh-Hans/teach/">教学</a></li>
        <li><a href="/zh-Hans/examples/">范例</a></li>
        <li><a href="/zh-Hans/books/">书籍</a></li>
        <li><a href="/zh-Hans/community/">社群</a></li>
        <li><a href="https://showcase.p5js.org">案例展示</a></li>
        <li><a href="https://discourse.processing.org/c/p5js" target=_blank class="other-link">论坛</a></li>
        <li><a href="http://github.com/processing/p5.js" target=_blank class="other-link">GitHub</a></li>
        <li><a href="http://twitter.com/p5xjs" target=_blank class="other-link">Twitter</a></li>
        <li><a href="https://www.instagram.com/p5xjs/" target=_blank class="other-link">Instagram</a></li>
        <li><a href="https://discord.gg/SHQ8dH25r9" target=_blank class="other-link">Discord</a></li>
      </ul>
    </nav>
  </div>

  <div class="column-span">

    <main id="content" >

      <p id="backlink"><a href="./">&lt; 返回</a></p>
      <h1 id='example-name'>example name placeholder</h1>
      <p id='example-desc'>example description placeholder</p>

      

      <div id="exampleDisplay">

        

        <div class="edit_space">
          <button id="toggleTextOutput" class="sr-only">toggle text output</button>
          <button id="runButton" class="edit_button">run</button>
          <button id="resetButton" class="reset_button">reset</button>
          <button id="copyButton" class="copy_button">copy</button>
        </div>
        <div id="exampleEditor"></div>


        <iframe id="exampleFrame" src="../../assets/examples/example.html" aria-label="example arialabel placeholder" ></iframe>
      </div>

      <p><a style="border-bottom:none !important;" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target=_blank><img src="https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png" alt="creative commons license" style="width:88px"/></a></p>

    </main>

    
    <footer>
      <h2 class="sr-only">归功于</h2>
      <p>
        p5.js 目前由<a href='http://qianqian-ye.com/' target="_blank">Qianqian Ye</a>与<a href='http://www.outofambit.com/' target="_blank">evelyn masso</a>领导，原创者为<a href='https://lauren-mccarthy.com' target="_blank">Lauren Lee McCarthy</a>。p5.js 是在<a href="https://processingfoundation.org/" target="_blank">Processing Foundation</a>和<a href="https://itp.nyu.edu/itp/" target="_blank">NYU ITP</a>的支持下由其合作社群所开发。形象及平面设计<a href="https://jereljohnson.com/" target="_blank">Jerel Johnson</a>。<a href="/zh-Hans/copyright.html">&copy; 版权信息</a>。
      </p>
    </footer>

  </div> <!-- end column-span -->

  
  <!-- outside of column for footer to go across both -->
  
  <p class="clearfix"> &nbsp; </p>
  
  <object type="image/svg+xml" data="../../assets/img/thick-asterisk-alone.svg" id="asterisk-design-element" aria-hidden="true">
  </object>

  <!-- <script src="../../assets/js/vendor/ace-nc/ace.js"></script>
  <script src="../../assets/js/examples.js"></script> -->
  <script>
    window._p5jsExample = '../../assets/examples/zh-Hans/10_Interaction/21_Follow2.js';
    window.addEventListener('load', function() {
      // examples.init('../../assets/examples/zh-Hans/10_Interaction/21_Follow2.js');
      if (false) {
        var isMobile = window.matchMedia("only screen and (max-width: 767px)");
        // isMobile is true if viewport is less than 768 pixels wide
        document.getElementById('exampleFrame').style.display = 'none';
        if (isMobile.matches) {
          document.getElementById('notMobile-message').style.display = 'none';
          document.getElementById('isMobile-displayButton').style.display = 'block';
        } else {
          document.getElementById('notMobile-message').style.display = 'block';
          document.getElementById('isMobile-displayButton').style.display = 'none';
          document.getElementById('runButton').style.display = 'none';
          document.getElementById('resetButton').style.display = 'none';
          document.getElementById('copyButton').style.display = 'none';
        }
      }
    }, true);
  </script>

</div><!-- end id="get-started-page"  -->

<script src="/../../assets/js/examples.js"></script>


    </div> <!-- close class='container'-->

    
    <nav id="family" aria-labelledby="processing-sites-heading">
      <h2 id="processing-sites-heading" class="sr-only">Processing Sister Sites</h2>
      <ul id="processing-sites" aria-labelledby="processing-sites-heading">
        <li><a href="https://processing.org">Processing</a></li>
        <li><a class="here" href="/zh-Hans/">p5.js</a></li>
        <li><a href="https://py.processing.org/">Processing.py</a></li>
        <li><a href="https://android.processing.org/">Processing for Android</a></li>
        <li><a href="https://pi.processing.org/">Processing for Pi</a></li>
        <li><a href="https://processingfoundation.org/">Processing Foundation</a></li>
      </ul>
      <a tabindex="1" href="#content" id="skip-to-content">Skip to main content</a>
    
    
    </nav>
    <script>
    var langs = ["en","es","hi","ko","zh-Hans"];

      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-53383000-1', 'auto');
    ga('send', 'pageview');

    $(window).ready(function() {
      if (window.location.pathname !== '/' && window.location.pathname !== '/index.html') {
        $('#top').remove();
      } else {
        $('#top').show();
      }
    });
    </script>


  </body>
</html>
