Skip to content

Instantly share code, notes, and snippets.

@nataliefreed
nataliefreed / bezierCodeGenerator
Created October 2, 2014 00:28
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.
//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 September 28, 2016 20:46
Pick a random color from an array in P5
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 September 1, 2020 00:26
project template
/*
Title:
Imagined, Designed, and Programmed by:
Date:
Description:
@nataliefreed
nataliefreed / turtle.pde
Last active June 6, 2020 10:39
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.
// 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
/*
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;
//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 January 24, 2019 13:49
P5.js version of turtle graphics program
// 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 December 20, 2018 15:42
curveBetween example in P5.js: function that draws symmetrical bezier curves between two points
/*
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 September 28, 2016 02:06
Example of choosing a random function in P5
/*
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
//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();