Skip to content

Instantly share code, notes, and snippets.

@nataliefreed
nataliefreed / bezierCodeGenerator
Created Oct 2, 2014
Bezier curve code generator (move the points around and it will update a line of Processing code). Yay! No more figuring out points by hand.
View bezierCodeGenerator
//Bezier curve code generator
//Natalie Freed Oct. 2014
DraggableHandler points;
void setup()
{
size(600, 600);
points = new DraggableHandler(this);
points.addToEnd(new DraggableCircle(30, height/2, 10, color(0, 100, 0, 150)));
@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))]);
@nataliefreed
nataliefreed / template.pde
Last active Sep 1, 2020
project template
View template.pde
/*
Title:
Imagined, Designed, and Programmed by:
Date:
Description:
@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();