# Sketching - "Processing" using Racket as the base language

**URL:** https://discourse.processing.org/t/sketching-processing-using-racket-as-the-base-language/32010
**Category:** Development
**Created:** [August 30, 2021, 5:01pm UTC](https://discourse.processing.org/t/sketching-processing-using-racket-as-the-base-language/32010 "2021-08-30T17:01:39Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![soegaard](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/soegaard/32/13657_2.png) [@soegaard](https://discourse.processing.org/u/soegaard)
#### Post date: [August 30, 2021, 5:01pm UTC](https://discourse.processing.org/t/sketching-processing-using-racket-as-the-base-language/32010/1 "2021-08-30T17:01:39Z")

</div>

Hi All,

My summer project this year was to make a version of Processing that uses Racket as its base language.  
Comments are welcome.

Check the documentation here:

```
https://soegaard.github.io/sketching/

```

The Github repo is here:

```
https://github.com/soegaard/sketching

```

/Jens Axel

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [August 30, 2021, 5:52pm UTC](https://discourse.processing.org/t/sketching-processing-using-racket-as-the-base-language/32010/2 "2021-08-30T17:52:40Z")

</div>

Thanks for sharing this great project, @soegaard.

I have a question about the [examples](https://soegaard.github.io/sketching/Examples.html). They contain interactive web embeds that look like p5.js. Is that transpiled from Sketching – can racket sketches be exported for the web? Or is it more like the Processing (Java) manual, where .js versions are for illustrative purposes only, but not automatically derived from the source language.

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [August 30, 2021, 5:55pm UTC](https://discourse.processing.org/t/sketching-processing-using-racket-as-the-base-language/32010/3 "2021-08-30T17:55:07Z")

</div>

This is so cool! Nice work 😉

Was [Fluxus](https://www.pawfal.org/fluxus/) (another library to do creative coding in Racket) an inspiration by any means?

I am also interested in how you did the examples, are they p5js? Because it reminds me of [ClojureScript](https://clojurescript.org/) that can transpile Clojure to JS.

---

<div class="post-metadata">

### Author: ![soegaard](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/soegaard/32/13657_2.png) [@soegaard](https://discourse.processing.org/u/soegaard)
#### Post date: [August 30, 2021, 6:00pm UTC](https://discourse.processing.org/t/sketching-processing-using-racket-as-the-base-language/32010/4 "2021-08-30T18:00:06Z")

</div>

Hi @jeremydouglass

> I have a question about the [examples](https://soegaard.github.io/sketching/Examples.html). They contain interactive web embeds that look like p5.js. Is that transpiled from Sketching – can racket sketches be exported for the web? Or is it more like the Processing (Java) manual, where .js versions are for illustrative purposes only, but not automatically derived from the source language.

In the Examples section, it is the same examples as in the Processing (Java) manual.  
I included them in order to make the manual more interactive.

The images in the reference part are generated by directly by Sketching code.  
Each time the manual is updated, the images are regenerated.

If you are interested in using something Racket-like in the browser, the options today is  
RacketScript or Urlang.

/Jens Axel

---

<div class="post-metadata">

### Author: ![soegaard](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/soegaard/32/13657_2.png) [@soegaard](https://discourse.processing.org/u/soegaard)
#### Post date: [August 30, 2021, 6:06pm UTC](https://discourse.processing.org/t/sketching-processing-using-racket-as-the-base-language/32010/5 "2021-08-30T18:06:54Z")

</div>

Hi @josephh ,

I know of Fluxus (I have seen a couple of videos), but I haven’t tried it.

The examples are the same p5js examples as used in the Processing (Java) docs.  
It was simpler reuse the same examples than start from scratch.

However, many examples are trivial to port.

Compare the Sketching version:

```auto
#lang sketching
(define bar-width 20)
(define last-bar -1)

(define (setup)
  (size 640 360)  
  (color-mode 'hsb height height height)
  (background 0)
  (no-stroke))

(define (draw)
  (define which-bar (quotient mouse-x bar-width))
  (unless (= which-bar last-bar)
    (define bar-x (* which-bar bar-width))
    (fill mouse-y height height)
    (rect bar-x 0 bar-width height)
    (:= last-bar which-bar)))

```

And the Processing version:

```auto
int barWidth = 20;
int lastBar = -1;

void setup() 
{
  size(640, 360);
  colorMode(HSB, height, height, height);  
  noStroke();
  background(0);
}

void draw() 
{
  int whichBar = mouseX / barWidth;
  if (whichBar != lastBar) {
    int barX = whichBar * barWidth;
    fill(mouseY, height, height);
    rect(barX, 0, barWidth, height);
    lastBar = whichBar;
  }
}

```

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [August 30, 2021, 7:28pm UTC](https://discourse.processing.org/t/sketching-processing-using-racket-as-the-base-language/32010/6 "2021-08-30T19:28:31Z")

</div>

Thanks for the details! Learning a LISP/Scheme like language is on my to-do list 😋

Are you planning to actively develop this project and make it grow?

---

<div class="post-metadata">

### Author: ![soegaard](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/soegaard/32/13657_2.png) [@soegaard](https://discourse.processing.org/u/soegaard)
#### Post date: [August 30, 2021, 8:01pm UTC](https://discourse.processing.org/t/sketching-processing-using-racket-as-the-base-language/32010/7 "2021-08-30T20:01:47Z")

</div>

Yes, I plan to add bits and pieces - and make some larger examples.

The next thing planned is to add `noise` (Perlin noise).

Then I’d like to make it easy to save animations as movies.  
Luckily there are existing bindings for ffmpeg I can use.

If you need some ideas to try out, I have a list of Processing examples not yet ported.

> **[Port Examples from Processing to Sketching · soegaard/sketching](https://github.com/soegaard/sketching/projects/1)**
>
> A Racket library inspired by Processing. Contribute to soegaard/sketching development by creating an account on GitHub.

Also, visit the Racket Slack if you want to chat about Racket/Sketching.
