Sketching - "Processing" using Racket as the base language

Processing Development
1

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

3 Likes
2

Thanks for sharing this great project, @soegaard.

I have a question about the examples. 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.

1 Like
3

This is so cool! Nice work :wink:

Was 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 that can transpile Clojure to JS.

4

Hi @jeremydouglass

I have a question about the examples. 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

1 Like
5

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:

#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:

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;
  }
}
2 Likes
6

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

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

7

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.

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

2 Likes