![]() |
Jupyter at Bryn Mawr College |
|
|
Public notebooks: /services/public/dblank / CS110 Intro to Computing / 2015-Spring / Notes |
Notes from Jan 26, 2015, CS110 Introduction to Computing, Bryn Mawr College. Douglas Blank.
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 by 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 also put code in a cell, like this:
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);
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:
SHIFT+TAB
after a name to get help on itTAB
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)!} $$
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. After you write a sketch (a program) in Processing, there are a number of things that you can do with it:
We are doing number 2 here. Note that there are some differences between these two methods:
There are two special functions: draw()
and setup()
:
setup()
that is to be run once, at the start of your program. draw()
that is to be run many times a secondYou don't have to use those two methods. For now, you can simply put code in the sketch outside of any function.
Functions to explore:
Here we will draw a circle in the draw() function by using the ellipse function.
What is a function?
void draw() {
ellipse(50, 50, 80, 80);
}
We can make the canvas larger by using the size() function inside the setup() function. size takes a width and a hight as arguments.
void setup() {
size(500, 500);
}
void draw() {
ellipse(50, 50, 80, 80);
}
It would be nice to make the circle draw in the center with a size proportional to the size of the canvas.
int width = 500;
int height = 500;
void setup() {
size(width, height);
}
void draw() {
ellipse(width/2, height/2, width, height);
}
Team up with a partner and create a sketch that is a joint work. Don't cut and paste an example, but create the whole thing from scratch.
When done, click on the Publish button in the toolbar. That will give you a URL that you can share with friends and family.