{% extends "base.html" %}

{% block metatags %}
<meta property="og:title" content="Sketching.py" />
<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="Sketching.py">
<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 charset="UTF-8">
<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">data visualization</span> in Python targeting <span class="word" id="platform">web</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>
<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 sketching
import time

# Make the sketch
sketch = sketching.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">
        </div>
        <canvas class="home-canvas" id="sketch-canvas" tabindex="1"></canvas>
    </section>
</div>
<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 %}
