This draws a house:

function setup()
{
  createCanvas(600, 600);
  background(255);
  
}
 
function draw()
{
  triangle(15, 0, 0, 15, 30, 15);
  rect(0, 15, 30, 30);
  rect(12, 30, 10, 15);
}

We can put the instructions in a function that can be reused multiple times and makes the code more readable:

function setup()
{
  createCanvas(500, 500);
  background(255);
}
 
function draw()
{
  house();
}
 
function house()
{
  triangle(15, 0, 0, 15, 30, 15);
  rect(0, 15, 30, 30);
  rect(12, 30, 10, 15);
}

We can add parameters (aka arguments) to generalize the house drawing function making our code more flexible:

function setup()
{
createCanvas(500, 500);
background(255);
}
 
function draw()
{
background(255);
house(mouseX, mouseY);
}
 
function house(x, y)
{
  triangle(x + 15, y, x, y + 15, x + 30, y + 15);
  rect(x, y + 15, 30, 30);
  rect(x + 12, y + 30, 10, 15);
}

Here’s how to use basic trigonometry to position things in a circle:

var numObjects = 10;
var centerX;
var centerY;
var angle = 0;
var distance = 100;

function setup() {
createCanvas(600, 600);
centerX = width/2;
centerY = height/2;

noStroke();
ellipseMode(CENTER);
}

function draw() {
background(0);

//divide the circle 360 degrees according to the number of objects
var angleObject = 360/numObjects;

for (var i=0;i<numObjects ;i++)
{
//you can have a circular motion if you sum the same angle to all objects
//angle = frameCount;
//and the speed can be also linked to the object number
//angle = frameCount*i / 2;

//fun with trigonometry and oscillations
//distance = sin(radians(frameCount))*150;

//the sin(angle) cos(angle) has to be
//multiplied by the distance from the center
//because trigonometric functions assume a circle with radius=1
//centerX and centerY is the offset from the top left corner
//remember to convert in radians
var posX = centerX + distance *cos( radians(angleObject*i + angle) );
var posY = centerY + distance *sin( radians(angleObject*i + angle) );

fill(255);
ellipse(posX, posY, 10, 10);
}
}

Doing more or less the same without trigonometry and with push/pop transformations

var numObjects = 10;
var centerX;
var centerY;
var angle = 0;
var distance = 100;

function setup() {
createCanvas(600, 600);
centerX = width / 2;
centerY = height / 2;

noStroke();
ellipseMode(CENTER);
}

function draw() {
background(0);
angle++;

var angleObject = 360 / numObjects;
for (var i = 0; i < numObjects; i++) {

push();
translate(centerX, centerY);
rotate(radians(i * angleObject + angle));
//or you can draw at 0,0 and translate again
//translate(distance,0);
ellipse(distance, 0, 10, 10);
pop();
}
}

Make an animated mandala/hypno-disc composition using the rotational symmetry algorithms below.

*You have to use at least two .png images with transparency loaded from an external file.
*You can mix bitmap and processing-generated images.
Bonus: use nested for-loops to give the illusion of a 3D tunnel.

Starting from this simple sketch:

var rows = 9;
var cols = 9;
var circleDiameter = 40;
var distanceX = 60;
var distanceY = 60;

function setup()
{
createCanvas(600,600);
noStroke();
}

function draw()
{
background(0);

for (var r = 1; r<= rows; r++) {
for (var c = 1; c <= cols; c++) {

if( r>5 )
{
fill(200, 0, 0);
}
else
{
fill(0, 200, 0);
}

ellipse(c*distanceX, r*distanceY, circleDiameter, circleDiameter);
}
}

}

 
Reproduce the following outputs by changing only the if condition:

You can load image and audio files in p5.

The files are loaded by the sketch so don’t forget to copy them wherever you want to use your filed.

Find an image and put it in the a folder called “assets” inside your project folder

Loading an image can take some times so it’s good practice to load the image inside a function called preload:

//1- Declare variable for your image
var img; 

//2- Preload the image (replace the name and path with your own)
// preload() runs once before setup
function preload() {  
  img = loadImage("assets/imageName.png");
}

function setup() {
  createCanvas(720, 400);
}

function draw() {
  //3- Displays the image at its actual size at point (0,0)
  image(img, 0, 0);
  
  //You can also resize the image
  // Displays the image at point (0, height/2) at half size
  //image(img, 0, height/2, img.width/2, img.height/2);
}

It works with alpha too!
(How to add an alpha channel in photoshop)

Create a scene with a background and an object following the mouse.

Filters
Try to call the function tint before displaying the image:

image(img, 0, 0);
tint(0, 153, 204);  // Tint blue r,g,b,a (add one parameter for alpha) 
image(img, 50, 0);

You can also use tint to change only the transparency

image(img, 0, 0);
tint(255, 126); 
image(img, 50, 0);

Try some other effects using the filter and blend functions

Transformations
Transformations can be applied to images as well:

//change to center to facilitate rotation
imageMode(CENTER);
 
  push();
    translate(150, 150);
    rotate(radians(45));
    image(img, 0, 0, 200, 200);
  pop();

Try this

translate(30, 20);
rect(0, 0, 55, 55);
translate(14, 14);
rect(0, 0, 55, 55);

What happened?

And this:

translate(width/2, height/2);
rotate(radians(45));
rect(-25, -25, 50, 50);

Example of transformation + scale + rotation.
More info here.

function setup()
{
createCanvas(200, 200);
background(255);
noStroke();
rectMode(CENTER);

// draw the original position in gray
fill(192);
rect(0, 0, 40, 40);

// draw a translucent blue rectangle in the new position
fill(0, 0, 255, 128);

push();
translate(100, 100);
rotate(radians(45));
scale(0.5);
rect(0, 0, 40, 40);
pop();
}

Now try to reproduce the plotter drawing below (or your take on it). (Georg Nees Schotter, 1968)

A possible solution:

function setup() {createCanvas(380, 800);
background(255);
noFill();
rectMode(CENTER);var rows = 25;
var cols = 12;
var side = 30;

for(var r = 0; r < rows; r++)
{
for(var c = 0; c < cols; c++)
{
push();

var scatteringX = random(-r/2, r/2);
var scatteringY = random(-r/2, r/2);

translate(25 + scatteringX + c*side, 25 + r*side + scatteringY);

var randomness = r*2;

var angle = random(-randomness, randomness);

rotate(radians(angle));
rect(0, 0, side, side);
pop();
}
}
}

Draw a vertical line. Now draw two parallel, now three…

Introducing for loops:

for (var i=1; i<=10; i++)
{
print(i);
}

This draws 10 horizontal lines:

for (var i=1; i<=10; i++)
{
line (10, i*10, width, i*10);
}

Change the color gradually using the counter i!
Generalize the formula using variables for the distance and the number of lines!

There can be multiple instructions in the same loop:

for (var i=0; i<50; i++)
{
line (0, i*10, width, i*10);
ellipse(10*i, i*10, 10, 10);
}

Make a more complex pattern using at least 3 for loops or multiple instructions in the same loop!

You can add randomness to the order:

for (var i=0;  i<50; i++)
{
line (0, i*10, width, i*10);
float posX = random(0, width);
ellipse(posX, i*10, 10, 10);
}

Create a composition with 12 randomly generated shapes, using iteration!

<h1>Embedded iteration</h1>

What if you have to iterate on two dimensions?
This is a tiling example using indexes as coordinates.

function setup()
{
background(0);
stroke(18, 255, 233);

for (var x = 0; x <= width; x += 20) {
for (var y = 0; y <= height; y+=20) {
rect(x, y, 10, 10);
}
}
}

This is an example using indexes as number of rows and columns.

In this way you have better control over the number of shapes that are being drawn.

var rows = 8;
var cols = 12;
var circleDiameter = 40;
var distanceX = 30;
var distanceY = 30;

function setup()
{
createCanvas(400,300);
background(0);
stroke(18, 255, 233);

for (var r = 1; r<= rows; r++) {
for (var c = 1; c <= cols; c++) {
ellipse(c*distanceX, r*distanceY, circleDiameter, circleDiameter);
}
}
}

You can control other parameters too:

var box_size = 11;
var box_space = 12;
var margin = 7;

function setup()
{
createCanvas(200, 200);
background(0);
noStroke();

// Draw gray boxes

for (var i = margin; i<height-margin; i += box_space){
if(box_size &gt; 0){
for(var j = margin; j<width-margin; j+= box_space){
fill(255-box_size*10);
rect(j, i, box_size, box_size);
}
box_size = box_size - 0.6;
}
}

<h1>While loop</h1>
Sometimes you don’t know in advance how many times you want to iterate and/or you don’t need an loop counter (variable i). In these cases while loops can be handy. Make sure you exit condition is met at some point:

function setup()
{
createCanvas(200,200);
background(255);
noStroke();

var w = width;

while (w > 0) {
fill(w);
ellipse(width/2,height/2,w,w);
w = w - 20;
}

Let’s add a little bit of uncertainty:

function setup() {
  createCanvas(500, 500);
  frameRate(10);
}

function draw() {
  background(random(255), random(255), random(255));
}

What about creating ellipses in random positions?

Make them appear only in a central square of 300×300! Random can accept a minimum and a maximum value.

random(0, 100);

Add a random fill!

Try to restrict the color range!

Random can be used for triggering events every once in a while:

 var bingo = round(random(1,60));
 print(bingo);
  
  if(bingo == 2)
  {
 	//do something...
  }

Random positioning vs random walk:

function setup() {
  createCanvas (300, 300);
}
 
function draw() {
  background(200);
 
  var rx;
  var ry; 
  rx = width/2;
  ry = height/2;
 
  rx = rx + random(-10, 10);
  ry = ry + random(-10, 10); 
  ellipse(rx, ry, 40, 40);
}

var rx;
var ry; 
 
function setup() {
  createCanvas (300, 300);
  rx = width/2;
  ry = height/2;
}
 
function draw() {
  background(200);
  rx = rx + random(-10, 10);
  ry = ry + random(-10, 10); 
  ellipse(rx, ry, 40, 40);
}

Noise

Perlin noise is an infinite random sequence of values changing harmonically. It is the basis of a lot of special effects and procedural computer graphics and it’s much more interesting than random.

The sequence will appear “natural” if you take contiguous samples (xoff).

var xoff = 0.0;

function draw() {
  background(204);
  xoff = xoff + .01;
  var n = noise(xoff) * width;
  line(n, 0, n, height);
}

Noise example with variable xoff

A variable is a memory location with an associated symbolic name, which contains some kind of value.

A third feature of variables is their type which defines the kind of data they contain: integer number, floating point number, string, object etc.

Javascript is a weakly typed language, meaning it doesn’t require you to specify a type and it won’t generally give you an error if you use a variable of the wrong type (although the results may be incorrect).

Let’s have some fun with variables:

//declaration
var myDiameter = 10;

function setup() 
{
  createCanvas(500, 500); 
  noStroke();  
}

function draw() 
{ 
  background( 0, 0, 0);
  ellipse(250, 250, myDiameter, myDiameter);
}

I use a var for the radius so I don’t have to type the number every time i want to adjust it.

Since it’s a variable it can be changed:

myDiameter = myDiameter+1;

or

myDiameter++;

What if I want the resizing to be slower?

What if I wanted to stop at a 100?

What about the other parameters of the ellipse?
Try to use variables there too!

Give them meaningful names.

Now use that variable to make the circle move from the left to the right!

wrap around the screen! (if)
go back and forth!

Print function
Often variables don’t have a visual representation but you may want to check their content for debugging and testing purposes. print() is the p5.js function to use:

print(myVariable);

print(myVariable+1);
//+-*/%

//this is actually a string concatenation, we'll get into strings later
print("My variable is "+myVariable+1);

The output will be visible only in the browser console and in the p5.js editor, and it’s not meant to be seen by the user.

Scoping

Some “temporary” variables can be declared inside functions and blocks. Note: these variables won’t be “visible” outside that block (scoping).

function draw() 
{ 
  background( 0, 0, 0);
  
  var dx = mouseX - posX;
  var dy = mouseY - posY;
  
  posX += dx/10;
  posY += dy/10;
  
  ellipse(posX, posY, myDiameter, myDiameter);
}

Let’s analyze this.

How can we make the circle faster?

How can you make the circle follow the mouse pointer only when the mouse button is down?

Draw a stylized face in Processing. Requirements:

– A canvas size of 600 x 600

– Front view, not profile

– Use at least 10 graphic elements. Use the drawing functions I covered in class but also try something new from the reference.

– Use colors that don’t suck.
You can steal color palettes from here.
Create a new one with Kuler
Generate one from a picture with this tool

Making faces is easy. We are hardwired to recognize them.

Faces in things twitter

PART 2: Make it Responsive

For this assignment, you’ll add sound-interactivity using the audio add-on.

Include the audio component by adding this line to index.html just after the p5.js inclusion.
<script src="addons/p5.sound.js"></script>

Start from a sketch.js like this (don’t worry if you don’t understand the audio setup part).

var input;
var analyzer;
var volume = 0;

function setup() {
  createCanvas(600, 600);

  // Create an Audio input
  mic = new p5.AudioIn();

  // start the Audio Input.
  // By default, it does not .connect() (to the computer speakers)
  mic.start();
}

function draw() {
  background(200);

  // Get the overall volume (between 0 and 1.0)
  var v = mic.getLevel();
  // "Smooth" the volume variable with an easing function
  volume += (v-volume)/3;
  
  fill(0);
  noStroke();
  
  ellipse(200, 200, 100,100);
  ellipse(400, 200, 100,100);
  
  // Draw an ellipse size proportionally to the volume
  var mouthSize = map(volume, 0, 1, 10, 300);
  
  ellipse(300, 300, mouthSize, mouthSize/2);
}

Or just download the template p5Sound

Let’s make our first interactive sketch

function setup() {
createCanvas(500, 500);
}

function draw() {
background(255, 255, 255);
line(250, 250, mouseX, mouseY);
}

What if we move the background line in the setup function?

function setup() {
createCanvas(500, 500);
background(255, 255, 255);
}

function draw() {
line(250, 250, mouseX, mouseY);
}

Before, the background was filled every frame, which is very fast 60 fps.
With this layering it works like a creative tool.

Change the rectangle with an ellipse (they happen have the same number of parameters)

function draw() {
line(mouseX, mouseY, pmouseX, pmouseY);
}

pmouseX, pmouseY is the last mouse position, they are useful system variables.

Make a circle that follows the mouse!

Try to switch the mouse:

ellipse(mouseY, mouseX, 50, 50);

And try this:

background(255, 255, 255);
ellipse(mouseX, height-mouseY, 50, 50);

height and width are constant representing the size of the canvas.
The expression width-mouseY will be resolved before the ellipse gets drawn.

Draw an ellipse that mirrors the mouse position on both axis!

You can draw more than one object on each draw iteration:

background(255, 255, 255);
ellipse(mouseX, mouseY, 50, 50);
ellipse(width-mouseX, height-mouseY, 50, 50);

A less predictable behavior:

background(255, 255, 255);
ellipse(mouseX, mouseY, 50, 50);
ellipse(width-mouseY, mouseX, 50, 50);

You can create all sorts of complex relationships starting from the mouse coordinate

ellipse(mouseX, height-mouseY, 50, 50);
ellipse(mouseX/2, height-mouseY/2, 50, 50);

Make a complex set of relationships between 5 or more shapes!
(redraw the background at every refresh)

P5 provides two ways to detect the mouse clicks, as an event and as a state variables:

function setup() {
createCanvas(500, 500);
}

function draw() {
background(237, 34, 93);

fill(0);

if (mouseIsPressed)
    ellipse(250, 250, 100, 100);
else
    rect(250, 250, 100, 100);
}

//this function is called every time you press a mouse button
function mousePressed() {
print("mouse has been clicked");
}

//this function is called every time you release a mouse button
function mouseReleased() {
print("mouse has been released");
}

Now we can make a simple drawing application that draw a line only if the mouse is down.

Check the reference for more mouse related functions
mouseMoved()
mouseDragged()
mousePressed()
mouseReleased()
mouseClicked()
mouseWheel()

Let there be line!

function setup() {
  line(10, 10, 40, 60);
}

Run, commands, syntax, parameters / arguments, typography, non alphanumeric characters, parenthesis vs. brackets, semicolon, coordinates…

 

Canvas

createCanvas(800, 600); 
background (255, 255, 255);

 

How do colors work?

2D Primitives

point(300, 300);
triangle(10, 20, 50, 200, 200, 100);

Make it isosceles!
Make it rectangle!

Quadrilateral

quad(10, 10, 120, 20, 100, 150, 10, 100);

Make a square!
Make a butterfly!

Rectangle
rect(100, 100, 200, 100);
Make a square!
Center it!

Ellipse

ellipse(300, 200, 300, 200);

How does it work? Check the Processing reference manual
Inscribe the circle in the canvas!

Comments

//why comments
/*
Because they make you code readable.
(O_o)
*/

 

Attributes
strokeWeight(4);

Camelback convention. keepItInMind.
Processing is case sensitive strokeWeight and strokeweight are not the same.

Pen state

createCanvas(500, 500); 
background (255, 255, 255);
line(10, 10, 360, 50);
stroke(255, 0, 0);
line(10, 30, 360, 70);

The state of your pen and your canvas remains the same until you change it.
If you don’t touch it, processing uses the default.

Colors

//try this
background (255, 255, 255);
//and then try this
//background (0, 0, 0);

Red green blue 0-255.
Make it red!
Try the color picker!

...
strokeWeight(4);
stroke(255, 0, 0);
//noStroke();
fill(0, 255, 0);
//noFill()
triangle(10, 20, 50, 200, 200, 100);

Ok, you are an artist now. Reproduce the Mondrian!

 

Transparency

createCanvas(500,500);
background (255, 255, 255);
smooth();
noStroke();
fill(255,0,0);
rect(100, 100, 100, 100);
fill(0,0,255,127); //255/2
rect(150, 150, 100, 100);

Also known as alpha channel.

 

Drawing mode
Sometimes you want to draw a circle from the top left corner or a square from the center. Here’s how to do it:

createCanvas(500,500);
rectMode(CENTER);
rect(35, 35, 50, 50);
rectMode(CORNER);
fill(102);
rect(35, 35, 50, 50);

createCanvas(500,500);
ellipseMode(CENTER);
ellipse(35, 35, 50, 50);
ellipseMode(CORNER);
fill(102);
ellipse(35, 35, 50, 50);

 

Vertex
You can use this combo to draw any polygon specifying the vertexes.

createCanvas(500,500);
//remember to specify a noFill() if you don't want a fill
beginShape();
vertex(20, 20);
vertex(40, 20);
vertex(40, 40);
vertex(60, 40);
vertex(60, 60);
vertex(20, 60);
endShape(CLOSE);
//if you don't specify CLOSE the outline will left open

Curves
curveVertex is the easiest way to draw continuous curves. It works like vertex (begin, points, end).

noFill();
beginShape();
curveVertex(84,  91);
curveVertex(84,  91);
curveVertex(68,  19);
curveVertex(21,  17);
curveVertex(32, 100);
curveVertex(32, 100);
endShape();

Arcs

createCanvas(500,500);
background (255, 255, 255);
smooth();
fill(142, 199, 242);
arc(150, 150, 300, 300, 0, PI/2);

The beginning and the end are a little tricky.
Remember: 0 is center right, 2*PI is the full circle. PI half circle. PI/2 a quarter etc…

Or just use radians(angleindegrees); to convert:

arc(150, 150, 300, 300, radians(180), radians(360) );

Draw a pacman!
Draw a smiley face!

p5js.org is the manual

Always check the examples

Always consult keep the reference open

P5.js is a javascript library (and a community) that aims to make coding accessible for artists, designers, educators, and beginners.

1) Watch the intro video

2) Download helloP5 an example file which includes the p5 library and all the add ons. Duplicate it when you start a new project.

3) Download the code editor Brakets.io. Copy it on your desktop and open the helloP5 folder you just downloaded.

Organizing your projects

You are going to make a lot of assignments and exercises. It’s crucial that you learn where your files are and how to organize them. This is what I recommend:

1) make a folder for this class

2) backup the folder on a USB stick or external hard drive, andrew space or cloud storage every time

3) make a folder for each p5 project by duplicating the example project and renaming it. Don’t use spaces or strange symbols for filenames

No let’s take a look at a project structure.

-from Katie Rose, reposting here

We’ll be integrating our grammars with Cheap Bots Done Quick, a twitterbot hosting service that uses Tracery. Everyone should be able to get a simple twitterbot running in class. Please take a look through other bots for inspiration, or just to get a good sense of what is possible.

Kate Compton’s Tracery

Tutorial; http://www.crystalcodepalace.com/traceryTut.html

Github (full documention); https://github.com/galaxykate/tracery

Visual editor; http://www.brightspiral.com/tracery/

George Buckenham’s Cheap Bots Done Quick
http://cheapbotsdonequick.com/

Template for Tracery webpage
If you want to generate longer texts and Twitter’s character limit is too constraining you can use Tracery in a web page:
1) Download the template from here
2) Download Brackets or use your favorite code editor.
3) In Brackets set the folder to the template
4) Modify grammar.js according to the tracery format
5) Modify style.css to customize the appearance

Resources for advanced projects
A taxonomy of bots
Darius Kazemi’s Repositories
Various Tutorials
Allison Parrish resources, corpuses, examples (python)

 

twitterbots!
https://twitter.com/godtributes
https://twitter.com/wikishoutouts
https://twitter.com/soft_focuses
https://twitter.com/lichmaze
https://twitter.com/TVCommentBot
https://twitter.com/Deer_ebooks
https://twitter.com/FFD8FFDB
https://twitter.com/CreatureList
https://twitter.com/reverseocr
https://twitter.com/ARealRiver
https://twitter.com/nice_tips_bot
https://twitter.com/artassignbot
https://twitter.com/park_your_car
https://twitter.com/GenerateACat
https://twitter.com/wikisext
https://twitter.com/everywitchword
https://twitter.com/TwoHeadlines
https://twitter.com/pentametron
https://twitter.com/oliviataters
https://twitter.com/MythologyBot
https://twitter.com/poem_exe
https://twitter.com/RestroomGender
https://twitter.com/digital_henge
https://twitter.com/Botgle
https://twitter.com/a_lovely_cloud
https://twitter.com/the_ephemerides
some twitterbots made with cheap bots done quick-

https://twitter.com/tranquilbot
https://twitter.com/memorypoem
https://twitter.com/infinitedeserts
https://twitter.com/unicode_garden
https://twitter.com/cryptbooks
https://twitter.com/CombinationBot
If you’re interested in this type of work, I’ve attached a zip file of some longer-form generated literature below- feel free to download and read through a few. The Policeman’s Beard is Half Constructed is particularly interesting, as it is very early (1984!). There are also several works from the annual NaNoGenMo (the generative answer to NaNoWriMo, where one writes a 50k word novel in November), and some chapbooks (including my own).

Zip file-  generated text (& friends)

Download the variables example here.

Stylesheet

Copy paste this example in the story > edit story stylesheet page

 

@import url(https://fonts.googleapis.com/css?family=Poiret+One);
/* this is a font import see below what it means */

/* Everything between these symbols is a comment and it won't affect the appearance */

/*
Cascading Style Sheets (CSS) is a language for specifying how documents (usually web pages) are presented to users. CSS code doesn't include content, only how parts of a document will appear in the browser.

To set the appearance of certain elements you need to know the names of the HTML elements. In case of twine2 there are only a few of them so it will be easy.
--- This tutorial refers to the Harlowe format ---
*/

/*
In the example below body is the selector, background-color is the property, #0f0f0f; is the value of the property.
The property:value; syntax is mandatory, including the semicolon. 

body is the container for everything else in the page.
*/

body {
background-color: #E2FFED;
}

/*
Multiple properties can defined for each element. Try to copy and paste these lines:

background-image: url("http://mycours.es/gamedesign2015/files/2015/09/colorful-triangles-background_yB0qTG6.jpg");


*/

/*
Color values in CSS can take five different forms: two hexadecimal, and two decimal, and plain-text color names like "black," "red," "pink," etc.

Hexadecimal goes from 0 to F, where A is 10, B is 11, etc. and F is 15. The max value for any color is FF, or 255 in decimal. When used to represent color, each third of the string represents a different color - red, green, and blue, in that order. So the components of a six-length hex string are like so: #ffffff

Here's red in 6-length hex: #ff0000

And here's the same color in 3-length hex, in which each value is effectively doubled (f -> ff, 0->00, etc.), resulting in an identical color value of the above 6-length hex: #f00

The max value for decimal notation is 255. So if we wanted to represent red with decimal notation, it'd look like this:

Here's red in decimal notation: rgb(255, 0, 0) 

You can have a 4th channel too, which is the alpha, i.e. opacity

rgba(255, 0, 0, 0.5)
*/

/* tw-passage is the style of each passage. Here are some common properties */

tw-passage {
background-color: #4FFFB8;
width: 400px;
padding:10px;
border: 5px solid #3CE8B7;
border-radius: 10px;
color:#248F84;
}

/* 
You can use custom fonts from google fonts https://www.google.com/fonts#
Here's how:
1. pick a font you like
2. click "quick use"
3. copy and paste the @import code at the very top of this page
4. copy and paste the font-family code inside the element you want to change (see below)
*/

tw-passage {
font-family: 'Poiret One', cursive;
font-size: 30px;
}

/* Note how you can have multiple selectors pointing at the same element the properties below will override the properties above 
*/

/* offset-x | offset-y | blur-radius | color */
tw-passage {
text-shadow: 1px 1px 2px rgba(0,0,0,0.5); 
}

/* tw-link will change the links' appearance */
tw-link {
color: rgb(255, 0, 215); 
}

/* uncomment this if you want the "undo" arrow to disappear */

/*
tw-icon.undo {
    display:none;
}

tw-icon.redo {
    display:none;
}

*/

/*
You can find a more extensive tutorial here:
http://furkleindustries.com/fictions/twine/twine2_CSS_tutorial/
*/

All CMU students have a personal web space at:

www.andrew.cmu.edu/user/yourusername
(obviously insert your andrew id)

We are going to use this space to publish the assignments.
In order to do from a computer in the lab you simply have to copy all of your files in the directory www of your “home”

And go to the andrew publish page here

Type your id in the field and hit “publish”. Now your files are on the internet for the world to see at the corresponding address:
www.andrew.cmu.edu/user/yourusername/filename.ext

Please create a folder for each assignment or it will get very messy in there!

From your computer

Download Fetch Filezilla or equivalent FTP client.

Install and unpack.
Hostname: unix.andrew.cmu.edu
Insert your andrew id and password
Use: SFTP
Hit connect
Go to the www folder and upload your files and folders

Go to the andrew publish page here

Hopefully your files will be accessible here
www.andrew.cmu.edu/user/yourusername/filename.ext

If something doesn’t work for mysterious reasons, you can just publish on a free neocities website

Twine 2 is the tool we are using for this assignment. You can download it from here.

There are many resources and tutorials online however most of them refer to the previous version of Twine which had a more rudimentary interface. The Twine 2 guide is the best resource. Start from here:

Getting started with Twine 2

*Don’t forget to publish to file (bottom left) when you are done working. If you want to open a project from another computer import the published html file from Twine’s story list.

If you want to add an image to a passage you can use the html tag img specifying the full URL of the image on the internet.

This displays an image I found on the internet:
<img src=”http://www.ms-tech.illinois.edu/_shared/images/current-students.jpg” alt=”” />

This displays an image I uploaded on my personal space
<img src=”http://www.andrew.cmu.edu/user/paolop/tarantula.png” alt=”” />

Advanced option
If you want to use many images or add interactivity beyond simple links you should use Twine 1.4.2. I collected some resources for my advanced class here.