A First Look at PySketch: Python for Fun!
Tags: python, webdev, showdev, gamedev
Published: 2022-04-11 07:17:25

[PySketch.com](https://pysketch.com) is a Python web editor that aims to provide social coding experience to anyone who likes creative coding. You can improve or showcase your Python skills on the web by building fun projects, games, graphics with access to HTML5 and JavaScript libraries or exploring other Python projects from other talented developers. It works on all major mobile and desktop browsers, and you can share your projects and games with your friends or embed them into your blog for your audience.

If you are a Python person, you'll feel at home and enjoy all HTML5 features with [PySketch](https://pysketch.com)!

Check this famous flappy bird game done in pysketch. 

{% codepen https://codepen.io/firat_kiral/pen/rNYWWJm default-tab=result %}


**Get Started: Bouncing Logo**
We'll learn the basics by doing a bouncing logo sketch covering the essential points. It's the most known screen saver, and it'll be fun to build it here. Here is the final sketch, feel free to play with code and run.

{% codepen https://codepen.io/firat_kiral/pen/BamggVb default-tab=result %}

Let's take a closer look at the code:

**Loading modules**
```python
from browser import document, window
from browser.html import CANVAS, IMG
from random import randint
```
`Document` and `window` modules are equivalent to their JavaScript versions. These are for accessing JavaScript properties, global variables, etc.
`browser.html` is a wrapper module for HTML tags. It allows us to create and manipulate dom elements with ease in Python. For all other tags and examples, please check [here.](https://brython.info/static_doc/en/html.html)

**Dom Api**
```python
canvas = CANVAS(width=width, height=height)
document.body <= canvas

ctx = canvas.getContext('2d')
```
Here, we create a canvas element and add it to the body of the HTML page. `ctx` is the context of the canvas where we do our drawing operations. We are not going into detail on canvas API, but you can get more info [here.](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)


**Loading assets**
```python
logo = IMG(src ='logo.png')
logo.onload = lambda e: loop(0)
```

Files are loaded asynchronously, which means that the image is not available on the following line and will take some time to load. So we set an `onload` callback here. Once the logo is loaded, our app will start looping. We'll come to the looping part later.

PySketch provides cloud hosting for assets to be able to use in sketches. Go to Sketch Details -> Files tab and upload your assets for your sketch.

Sketch assets can be loaded by their filenames, as seen in the code snippet above.

![Sketch files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wplto8n3o621j12b4g72.png)

**Draw Function**
```python
def draw():
  global x, y, x_speed, y_speed
  ... does calculations here
  ctx.drawImage(logo, x, y)
```
This is the main draw function, and it calculates the new position by taking speed into account and renders the logo in the canvas context. Please read inline comments on the final sketch to get the idea of drawing on context.

**Main loop**
```python
def loop(t):
  draw()
  window.requestAnimationFrame(loop)
```

This is the heart of most graphical apps. It refers to the overall flow of the program and keeps looping infinitely until manually stopped. Browsers have built-in `requestAnimationFrame` function. It's designed to run smooth animations on the browser without blocking the page. Your animation function is called before the browser performs the next repaint. The number of callbacks is usually 60 times per second if you request a new frame. 

In this loop, we call the `draw` function, and after drawing, we request a new frame recursively. This process repeats forever until we stop the app.

**How is the Python being run by the browser?** 
Several impressive projects bring Python to the browser, such as [Brython](https://brython.info), [Transcrypt](https://transcrypt.org/), [Skulpt](https://skulpt.org/), [Pyodide](https://github.com/iodide-project/pyodide). PySketch uses Brython that compiles Python to JavaScript in the browser. You can take a look at [this article](https://anvil.works/blog/python-in-the-browser-talk) about technologies and comparisons if you want to learn more.

**Conclusion**
We saw how to implement Python-based apps directly into the browser using PySketch. If you have familiarity with JavaScript and web development, you'll enjoy building apps and games using Python.

No doubt that JavaScript can't be replaced in terms of speed, usability, and maintainability, but it's good to know that there are alternative ways to enjoy HTML5.

For more examples and tutorials, visit [pysketch.com](https://pysketch.com)