{% extends "base.html" %}

{% block metatags %}
<meta property="og:title" content="Sketchingpy" />
<meta property="og:type" content="article" />
<meta property="og:description" content="Creative coding and interactive science everywhere for everyone: web, desktop, mobile, Jupyter, and more. Open source!">
<meta property="og:url" content="https://sketchingpy.org/" />
<meta property="og:image" content="https://sketchingpy.org/img/home_screen.png" />

<meta name="twitter:title" content="Sketchingpy">
<meta name="twitter:description" content="Creative coding and interactive science everywhere for everyone: web, desktop, mobile, Jupyter, and more. Open source!">
<meta name="twitter:image" content="https://sketchingpy.org/img/home_screen.png">
<meta name="twitter:card" content="summary_large_image">

<meta name="description" content="Creative coding and interactive science everywhere for everyone: web, desktop, mobile, Jupyter, and more. Open source!">
<meta name="keywords" content="open source, open science, interactive science, data visualization, creative coding, game design">
{% endblock %}

{% block style %}
<link rel="stylesheet" href="/css/index.css?v={{ version }}" />
{% endblock %}

{% block main %}
<div class="catch">
    Creative coding library for <span class="word" id="use-case">everyone</span> in Python targeting <span class="word" id="platform">all platforms</span>.
    <div class="control">
        <span id="countdown">Refreshing in 7 seconds...</span> <a href="#pause" id="pause-link">Pause</a> / <a href="#shuffle" id="shuffle-link">Shuffle Now</a>
    </div>
</div>
<section class="elevator">
    <h2>Purpose</h2>
    Sketchingpy offers flexible and portable creative coding tools for Python. This free community resource empowers all skill levels to develop programs and, with minimal to no modification needed, deploy them to desktop, web, mobile, Jupyter notebooks, servers, and more. Offering a beginner-friendly experience but packing enough power for seasoned experts, this open source library supports diverse projects such as data visualization, interactive science, and digital art. <a href="/guides/start.html">Install</a> or <a href="/guides.html">learn more</a>.
</section>
<section>
    <h2>Try it</h2>
    <div class="split-view">
        <section class="code-holder">
            <div class="controls">
                <span class="loading" id="loading-msg">Please wait...</span>
                <span class="loading" id="loaded-msg"><button class="button" id="run-button">Run in Browser</button></span>
                <span><a href="/guides/start.html">Install</a></span>
                <span><a href="/guides.html">Learn</a></span>
            </div>
            <div>
                <div id="editor">import sketchingpy
import time

# Make the sketch
sketch = sketchingpy.Sketch2D(500, 500)
sketch.clear('#F0F0F0')
sketch.clear_fill()
sketch.set_angle_mode('degrees')
start_time = time.time()

def draw(sketch):
  """Draw sketch"""
  mouse = sketch.get_mouse()
  x = mouse.get_pointer_x()
  y = mouse.get_pointer_y()
  
  # Draw from center to the user's mouse (or location of tap on mobile)
  sketch.set_stroke_weight(1)
  sketch.set_stroke('#33333350')
  sketch.draw_line(x, y, 250, 250)
  
  # Draw arc
  sketch.set_stroke_weight(10)
  sketch.set_stroke('#A0A0C010')
  start_angle = (time.time() - start_time) * 30
  sketch.draw_arc(250, 250, 200, 200, start_angle, start_angle + 2)

# Register the draw method and show
sketch.on_step(draw)
sketch.show()</div>
            </div>
        </section>
        <section class="canvas-holder" id="canvas-holder">
            <div class="sketch-load-message" id="sketch-load-message">
                <span id="sketch-load-message-content">Click run to execute the example code.</span>
                <progress id="sketch-load-progress" style="display: none" max="20" value="0"></progress>
            </div>
            <canvas class="home-canvas" id="sketch-canvas" tabindex="1"></canvas>
        </section>
    </div>
</section>
<div id="main-script"></div>
<pre id="runtime-error-display"></pre>
{% endblock %}

{% block script %}
<script src="/third_party_site/ace.min.js?v={{ version }}"></script>
<script src="/third_party_site/theme-textmate.js?v={{ version }}"></script>
<script src="/third_party_site/theme-textmate-css.js?v={{ version }}"></script>
<script src="/js/index.js"></script>
{% endblock %}
