Skip to content

Instantly share code, notes, and snippets.

Natalie Freed nataliefreed

View GitHub Profile
@nataliefreed
nataliefreed / turtle.pde
Last active Jun 6, 2020
Turtle Graphics in Processing: This program shows another way to think about moving through Processing's coordinate system, inspired by Logo. Instead of placing points on a grid, you can imagine yourself as being somewhere on the grid, facing a direction. You can move forward or turn. The drawn line follows behind you.
View turtle.pde
// Turtle Graphics in Processing
// Natalie Freed, February 2013
// This program shows another way to think about moving
// through Processing's coordinate system. Instead of placing
// points on a grid, you can imagine yourself as being somewhere
// on the grid, facing a direction. You can move forward or turn.
// The drawn line follows behind you.
PVector loc; //current location
float orientation; //current orientation
View buttons_and_sliders_export.pde
/*
Export buttons and sliders template/example.
Requires the ControlP5 library http://www.sojamo.de/libraries/controlP5/
*/
import processing.pdf.*;
import java.util.Date;
import controlP5.*;
ControlP5 cp5;
View vector_bitmap_star.pde
//This example saves out two images of a star,
//a PNG (bitmap/raster) and a SVG (vector)
//SVG export: http://processing.org/reference/libraries/svg/
import processing.svg.*;
size(300, 300);
//begin creating the SVG
@nataliefreed
nataliefreed / turtle.js
Created Jan 24, 2019
P5.js version of turtle graphics program
View turtle.js
// About turtle graphics: This program uses another way to think
// about moving through Processing's coordinate system. Instead of placing
// points on a grid, you can imagine yourself as being somewhere
// on the grid, facing a direction. You can move forward or turn.
// The drawn line follows behind you.
var loc; //current location
var orientation; //current orientation
var notch_height = 20;
var notch_width = 10;
@nataliefreed
nataliefreed / curveBetween.js
Last active Dec 20, 2018
curveBetween example in P5.js: function that draws symmetrical bezier curves between two points
View curveBetween.js
/*
CurveBetween function by Natalie Freed, 9/22/16
Draws symmetrical bezier curves between two points,
includes example of use
*/
function setup() {
createCanvas(600, 600);
/*
@nataliefreed
nataliefreed / randomFunction.js
Created Sep 28, 2016
Example of choosing a random function in P5
View randomFunction.js
/*
Example of choosing a random function
Notice this program re-randomizes the row of shapes every time it's run!
*/
function setup() {
createCanvas(800, 400);
background(50);
//draw some shapes to test. These aren't randomized
View videoFilterStartingPoint.js
//Modified from P5 example at: https://p5js.org/examples/dom-video-capture.html
var capture;
function setup() {
createCanvas(320, 240);
capture = createCapture(VIDEO);
capture.size(320, 240);
capture.hide();
View imageFilterStartingPoint.js
//Cat photo used in class example by Nick Nunns on Flickr: https://www.flickr.com/photos/neeb/334265966/
var img;
//preload will load before setup runs
function preload() {
//this relative file path starts in the same folder as your sketch.
//In other words, in this example, make a folder called images in the same
//folder as your sketch file (sketch.js) and then put the image file ("kittens.jpg")
//inside of that.
img = loadImage("images/kittens.jpg");
@nataliefreed
nataliefreed / radial-helper.js
Last active Sep 30, 2017
Wrapper function to make a radial version of a shape in P5
View radial-helper.js
/*
Radial Shape Wrapper Function
Natalie Freed September 2016
*/
function setup() {
createCanvas(600, 600);
//draw a shape
arrow(width/2+20, height/2, 20, color(0));
@nataliefreed
nataliefreed / randomColorFromArray.js
Created Sep 28, 2016
Pick a random color from an array in P5
View randomColorFromArray.js
function setup() {
createCanvas(600, 600);
var listOfColors = [color('#aabf12'), color('#33ab12'), color('#165512'), color('#fe3fa2'), color('#a345cd')];
var stripeWidth = 20;
strokeWeight(stripeWidth);
for(var i=0;i<=width/stripeWidth;i++) {
stroke(listOfColors[int(random(0, listOfColors.length))]);
You can’t perform that action at this time.