<commit_before>---
title: get started
slug: get-started/
---

<div id="get-started-page">

  {{> sidebar}}

  <div class="column-span">

    <main id="content" >

      <h1>{{#i18n "get-started-title"}}{{/i18n}}</h1>

      <p>{{#i18n "get-started1"}}{{/i18n}} {{#i18n "get-started2"}}{{/i18n}} <a href="https://editor.p5js.org" target="_blank">{{#i18n "get-started3"}}{{/i18n}}</a>{{#i18n "get-started4"}}{{/i18n}} <a href="#sketch">{{#i18n "get-started5"}}{{/i18n}}</a>{{#i18n "get-started6"}}{{/i18n}} <a href="#settingUp">{{#i18n "get-started7"}}{{/i18n}}</a>.
      </p>



      <h2 class="start-element" id="sketch">{{#i18n "your-first-sketch-title"}}{{/i18n}}</h2>

      <div class="info">
        <h3 class="sr-only">{{#i18n "first-sketch-heading1"}}{{/i18n}}</h3>
        <p>{{#i18n "your-first-sketch-intro1"}}{{/i18n}}<a href='{{#i18n "your-first-sketch-intro2"}}{{/i18n}}'>{{#i18n "your-first-sketch-intro3"}}{{/i18n}}</a>{{#i18n "your-first-sketch-intro4"}}{{/i18n}}</p>

<pre id="first-sketch1"><code class="language-javascript">
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

</code></pre>
        <div class="edit_space">
          <button id="copy_sketch1" class="copy_button">{{#i18n "get-started-button"}}{{/i18n}}</button>
        </div>
        <p>{{#i18n "your-first-sketch1"}}{{/i18n}}<code class="language-javascript">background(220);</code>{{#i18n "your-first-sketch2"}}{{/i18n}}<code class="language-javascript">ellipse(50,50,80,80);</code>.</p>

        <p>{{#i18n "your-first-sketch3"}}{{/i18n}}</p>
        <h3 class="sr-only">{{#i18n "first-sketch-heading1"}}{{/i18n}}</h3>

<pre id="first-sketch2"><code class="language-javascript">
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(50,50,80,80);
}

</code></pre>
        <div class="edit_space">
          <button id="copy_sketch2" class="copy_button">{{#i18n "get-started-button"}}{{/i18n}}</button>
        </div>
        <p style="margin-top: 1.5em;">{{#i18n "your-first-sketch4"}}{{/i18n}}</p>
        <p>{{#i18n "your-first-sketch5"}}{{/i18n}}</p>
        <h3 class="sr-only">{{#i18n "first-sketch-heading2"}}{{/i18n}}</h3>
        <p>{{#i18n "your-first-sketch6"}}{{/i18n}}<a href="../learn/p5-screen-reader.html" target="_blank">{{#i18n "your-first-sketch7"}}{{/i18n}}.</a>
        </p>
        <p>{{#i18n "your-first-sketch8"}}{{/i18n}}</p>

        <img src="{{assets}}/img/get-started/first-sketch.png" alt='{{#i18n "your-first-sketch9"}}{{/i18n}}'/>

        <p>{{#i18n "your-first-sketch10"}}{{/i18n}}</p>

        <p>{{#i18n "your-first-sketch11"}}{{/i18n}}</p>

        <h3 class="sr-only">{{#i18n "first-sketch-heading3"}}{{/i18n}}</h3>
        <p>{{#i18n "your-first-sketch12"}}{{/i18n}}</p>

<pre id="first-sketch3"><code class="language-javascript"><commit_msg>Added space between text and link<commit_after>---
title: get started
slug: get-started/
---

<div id="get-started-page">

  {{> sidebar}}

  <div class="column-span">

    <main id="content" >

      <h1>{{#i18n "get-started-title"}}{{/i18n}}</h1>

      <p>{{#i18n "get-started1"}}{{/i18n}} {{#i18n "get-started2"}}{{/i18n}} <a href="https://editor.p5js.org" target="_blank">{{#i18n "get-started3"}}{{/i18n}}</a>{{#i18n "get-started4"}}{{/i18n}} <a href="#sketch">{{#i18n "get-started5"}}{{/i18n}}</a>{{#i18n "get-started6"}}{{/i18n}} <a href="#settingUp">{{#i18n "get-started7"}}{{/i18n}}</a>.
      </p>



      <h2 class="start-element" id="sketch">{{#i18n "your-first-sketch-title"}}{{/i18n}}</h2>

      <div class="info">
        <h3 class="sr-only">{{#i18n "first-sketch-heading1"}}{{/i18n}}</h3>
        <p>{{#i18n "your-first-sketch-intro1"}}{{/i18n}}<a href='{{#i18n "your-first-sketch-intro2"}}{{/i18n}}'>{{#i18n "your-first-sketch-intro3"}}{{/i18n}}</a>{{#i18n "your-first-sketch-intro4"}}{{/i18n}}</p>

<pre id="first-sketch1"><code class="language-javascript">
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

</code></pre>
        <div class="edit_space">
          <button id="copy_sketch1" class="copy_button">{{#i18n "get-started-button"}}{{/i18n}}</button>
        </div>
        <p>{{#i18n "your-first-sketch1"}}{{/i18n}}<code class="language-javascript">background(220);</code>{{#i18n "your-first-sketch2"}}{{/i18n}}<code class="language-javascript">ellipse(50,50,80,80);</code>.</p>

        <p>{{#i18n "your-first-sketch3"}}{{/i18n}}</p>
        <h3 class="sr-only">{{#i18n "first-sketch-heading1"}}{{/i18n}}</h3>

<pre id="first-sketch2"><code class="language-javascript">
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(50,50,80,80);
}

</code></pre>
        <div class="edit_space">
          <button id="copy_sketch2" class="copy_button">{{#i18n "get-started-button"}}{{/i18n}}</button>
        </div>
        <p style="margin-top: 1.5em;">{{#i18n "your-first-sketch4"}}{{/i18n}}</p>
        <p>{{#i18n "your-first-sketch5"}}{{/i18n}}</p>
        <h3 class="sr-only">{{#i18n "first-sketch-heading2"}}{{/i18n}}</h3>
        <p>{{#i18n "your-first-sketch6"}}{{/i18n}} <a href="../learn/p5-screen-reader.html" target="_blank">{{#i18n "your-first-sketch7"}}{{/i18n}}.</a>
        </p>
        <p>{{#i18n "your-first-sketch8"}}{{/i18n}}</p>

        <img src="{{assets}}/img/get-started/first-sketch.png" alt='{{#i18n "your-first-sketch9"}}{{/i18n}}'/>

        <p>{{#i18n "your-first-sketch10"}}{{/i18n}}</p>

        <p>{{#i18n "your-first-sketch11"}}{{/i18n}}</p>

        <h3 class="sr-only">{{#i18n "first-sketch-heading3"}}{{/i18n}}</h3>
        <p>{{#i18n "your-first-sketch12"}}{{/i18n}}</p>

<pre id="first-sketch3"><code class="language-javascript">
{'fraction_non_alphanumeric': 0.2864137086903305, 'fraction_numerical': 0.07413883546074489, 'mean_word_length': 4.102586975914362, 'pattern_counts': {'":': 0, '<': 145, '<?xml version=': 0, '>': 147, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '920934', 'n_tokens_mistral': 2741, 'n_tokens_neox': 2422, 'n_words': 259}