Jupyter at Bryn Mawr College
Public notebooks: /services/public/dblank / CS110 Intro to Computing / 2017-Fall / Notebooks

Notes from Sep 7, 2017, CS110 Introduction to Computing, Bryn Mawr College. Douglas Blank.

1. What can you do with Processing?

Some examples:

Now, let's see what you can do!

2. Jupyter and Processing

2.1 Jupyter

Jupyter is the name of the system that you log into. It is running on a server at Bryn Mawr College. It allows you to run code in a variety of programming languages inside things called "notebooks." Each notebook is made up of cells. Cells can have text (called "markdown", like this text).

You can turn on Spell-checking and the in-class exercise Submit by:

  1. Turning on the Spell-check and Submit extension in the Nbextensions Tab.
  2. Clicking the button in the toolbar.

You can control how a cell is treated (code or markdown) by selecting from the picklist in the toolbar. You can select Markdown (like this cell), or Code. You can edit a markdown cell by double-clicking it, editing it, and then Shift+Enter.

New function:

text("String in double quotes", x, y);

NOTE: On your Lab1, make sure you put your name on your art using the Text() function.

You can put code in a cell, like this:

In [1]:
fill(0);
text("This is a sketch", 10, 15);
text("You can write", 10, 30);
text("and draw:", 10, 45);
fill(255, 0, 0);
ellipse(50, 75, 25, 25);
Sketch #1:

Sketch #1 state: Loading...

Cells should be run sequentially, from top to bottom. You can get information on how to use the notebook for writing here: Jupyter Notebook Users Manual.

Tips:

  • You can press SHIFT+TAB after a name to get help on it
  • you can press TAB after a few letters to complete the variable or function

You can create text with headings, styles, and even create equations, like:

$$ \left(\! \begin{array}{c} n \\ r \end{array} \!\right) = \frac{n!}{r!(n-r)!} $$

2.2 Processing

Processing is a programming language. You write programs as "sketches." Each sketch goes into a Jupyter cell.

The syntax of the Processing language is a subset of the Java programming language.

3. Functions

Functions to explore:

  • size(width, height)
  • point(x, y)
  • line(x1, y1, x2, y2)
  • triangle(x1, y1, x2, y2, x3, y3)
  • rect(x, y, w, h)
  • quad(x1, y1, x2, y2, x3, y3, x4, y4)
  • ellipse(x, y, w, h)

All of the shapes are listed at processingjs.org/reference

When done, Save the Sketch, and click on the Submit button in the toolbar. Select dsblank, and CS110-Practice-Sep-7.

You can also click on the Publish . That will give you a URL that you can share with friends and family.

4. Workflow

  1. Before you login (or after you logout), go to jupyter.brynmawr.edu
  2. Click the link for this, opening in a new tab
  3. Go back to the login page and login