Draw a Sketch

Tutorial Info

  • Author: tpltnt
  • Required Knowledge:
  • Reading Time: 5 minutes

Nannou is a framework for creative coding in Rust. A framework can be thought of as a collection of building blocks to help accomplish a goal. A sketch is the smallest/fastest way to get results with nannou. Here is one example which just yields a blue window:

use nannou::prelude::*;

fn main() {
    nannou::sketch(view).run();
}

fn view(app: &App, frame: Frame) {
    // get canvas to draw on
    let draw = app.draw();

    // set background to blue
    draw.background().color(BLUE);

    // put everything on the frame
    draw.to_frame(app, &frame).unwrap();
}

You can exit the sketch by pressing ESC.

Explaining the Code

A sketch consists of at least two functions: main() and view(). First we import some building blocks:

#![allow(unused_imports)]
use nannou::prelude::*;
fn main() {}

After this import the actual sketching code starts. The main() functions is where all your logic starts. The code

use nannou::prelude::*;

fn main() {
    nannou::sketch(view).run();
}
fn view(_app: &App, _frame: Frame) {}

calls a function to draw on the single window (view() in this case). This function has the signature fn(_: &App, _: Frame);. Don't worry if you don't know what a function signature is. Just copy the main() function and you will be fine.

Within the view() function, what we draw to the Frame will be presented in our window.

#![allow(unused_imports)]
use nannou::prelude::*;
fn main() {
   nannou::sketch(view).run();
}
fn view(app: &App, frame: Frame) {
    let draw = app.draw();

    draw.background().color(BLUE);

    draw.to_frame(app, &frame).unwrap();
}

This function follows the same scheme. First some setup is done. The line

#![allow(unused_imports, unused_variables)]
use nannou::prelude::*;
fn main() {
   nannou::sketch(view).run();
}
fn view(app: &App, _frame: Frame) {
let draw = app.draw();
}

lets us assign a canvas-like datatype to the variable draw. We can now paint on the this canvas by setting the background to blue.

#![allow(unused_imports)]
use nannou::prelude::*;
fn main() {
   nannou::sketch(view).run();
}
fn view(app: &App, _frame: Frame) {
let draw = app.draw();
draw.background().color(BLUE);
}

Now we have a canvas with only a blue background. We take this canvas and create a computer graphics frame from it to display in the main window.

#![allow(unused_imports)]
use nannou::prelude::*;
fn main() {
   nannou::sketch(view).run();
}
fn view(app: &App, frame: Frame) {
let draw = app.draw();
draw.to_frame(app, &frame).unwrap();
}

If you find the desire to respond to other kinds of events, interact with other kinds of input/output, track some state, or need more flexibility in general, you might be interested in creating a nannou app instead! You can also learn more about the difference between sketches and apps here.