<!DOCTYPE html>
<html class="no-js" lang="ko">
  <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=db3be6">
    <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=af215d"></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>
      </ul>
    </div>    <!-- .container -->
    <div class="container">

      <!-- logo -->
      <header id="lockup">
        <a href="/ko/">
          <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="/ko/">홈</a></li>
        <li><a href="https://editor.p5js.org">에디터</a></li>
        <li><a href="/ko/download/">다운로드</a></li>
        <li><a href="/ko/download/support.html">후원하기</a></li>
        <li><a href="/ko/get-started/">시작하기</a></li>
        <li><a href="/ko/reference/">레퍼런스</a></li>
        <li><a href="/ko/libraries/">라이브러리</a></li>
        <li><a href="/ko/learn/">배우기</a></li>
        <li><a href="/ko/examples/">예제</a></li>
        <li><a href="/ko/books/">출판물</a></li>
        <li><a href="/ko/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>
      </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" ></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='https://github.com/mcturner1995' target="_blank">Moira
          Turner</a> 가 리드하며, 로렌 맥카시 <a href='http://lauren-mccarthy.com' target="_blank">Lauren
          McCarthy</a> 가 창안하고 협력자 커뮤니티와 함께 개발하였습니다. 지원: 프로세싱 재단 <a href="http://processing.org/foundation/" target="_blank">Processing
          Foundation</a> 과 
        <a href="http://itp.nyu.edu/itp/" target="_blank">NYU ITP</a>.  아이덴티티 및 그래픽 디자인: <a
          href="http://jereljohnson.com/" target="_blank">Jerel Johnson</a>. <a href="/ko/copyright.html">&copy;
          Info.</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/ko/00_Structure/08_Create_Graphics.js';
    window.addEventListener('load', function() {
      // examples.init('../../assets/examples/ko/00_Structure/08_Create_Graphics.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="http://processing.org">Processing</a></li>
        <li><a class="here" href="/ko/">p5.js</a></li>
        <li><a href="http://py.processing.org/">Processing.py</a></li>
        <li><a href="http://android.processing.org/">Processing for Android</a></li>
        <li><a href="http://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>
    
      <!-- <a id="promo-link" href="https://donorbox.org/supportpf2019-fundraising-campaign" target="_blank"><div id="promo">This season, we need your help! Click here to #SupportP5!</div></a> -->
    </nav>    <script>
    var langs = ["en","es","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>
