pompomatic_3000_activity.pde

/*    
  
  Pompomatic 3000 version 1.0
  Natalie Freed, September 10, 2014: initial version including outer slider, percent slider, export button, and on-screen pompom maker preview.
  _____________, __________________: ________________________________________________________________________________.
  
  To add yourself as a contributor, please add your name, the date, and a description of your changes/additions. If you add code or ideas
  from any other source, include a link and description to give the creator credit, and so others can learn from it too!
  
  Inspired by and created for Becca Rose Glowacki's "Pompomology" project, a series of 
  custom lasercut pompom-makers in different sizes and inner/outer ratios created for 
  purposes of data collection on various aspects of the pompom production process.  
  
  Feature requests:

    * additional parameters with sliders requested by the Pompomology project: inner diameter in pixels (keep proportions the same), 
    diameter in inches or mm rather than pixels, yarn thickness, time to make (minutes), diameter of expected pompom, weight of pompom, 
    volume of pompom, density of pompom, number of yarn rotations around pompom maker, length of yarn needed.
    * labels displaying parameters to be engraved on pompom maker (eg. size).
    * toggle between inches and mm.
    * more visually appealing user interface design / layout
    * pompom preview: show a rendering of the expected pompom for a particular set of parameters.
      Possible inspiration: http://www.openprocessing.org/sketch/12399
*/

/*
  Art and Science of Computing Fall 14 Activity:
    1. Download, save, and run this code to check out what it does.
   
    2. Take some time to read through the code and comments.
    
    3. Add a new button to this code to export a bitmap image (eg "pompom.png").
    
    4. Add a slider to this code to control any one of the following parameters: diameter in inches or mm rather than pixels, 
    diameter of expected pompom, weight of pompom, volume of pompom, density of pompom, time to make (minutes),
    number of yarn rotations around pompom maker, length of yarn needed.

    5. Choose another one of the requested features from below, or make up your own, and add it.
    
  This video walks you through adding a slider: https://vimeo.com/106860129
  
   
   If you're working on interface design, you'll need to dive into the controlP5 documentation: http://www.sojamo.de/libraries/controlP5/
   
   If you're interested in adding inch/mm conversion, here is a starting point: By default, PDF export from Processing is at 72 dpi (dots per inch).
   To go from pixels to inches, you could use a function similar to this:
   
   float dpi = 72; //this is a global variable, since you'll probably use dpi more than once
   
   float pixelsToInches(float pixels)
   {
     return pixels / dpi;
   }
   
   Then you might call it like this:
   println(pixelsToInches(400));
*/ 

import controlP5.*;
import processing.pdf.*;

ControlP5 cp5;

int canvasWidth = 1000;
int canvasHeight = 600;

float outer_diameter = 200.0; //starting value for pompom maker diameter
float innerPercentOfOuter = 0.5; //starting value for the inner diameter's percentage of the outer diameter

void setup()
{
  size(canvasWidth, canvasHeight);
  
  //create a ControlP5 object to draw sliders and buttons
  cp5 = new ControlP5(this);
  
  //call the function that adds the buttons and sliders (at the bottom)
  addButtonsAndSliders();
}

void draw()
{
  background(200);
  drawPompomMaker();
}

void drawPompomMaker()
{
  ellipse(width/2-100, height/2, outer_diameter, outer_diameter);
  ellipse(width/2-100, height/2, outer_diameter*innerPercentOfOuter, outer_diameter*innerPercentOfOuter);
}

//this function is automatically called whenever the slider with the same name ("diameterSlider") is moved
void diameterSlider(int val)
{
  outer_diameter = val;
}

//this function is automatically called whenever the slider with the same name ("percentSlider") is moved
void percentSlider(float val)
{
  innerPercentOfOuter = val;
}

//this function is automatically called whenever the button with the same name ("exportButton") is pressed
void exportButton()
{
  beginRecord(PDF, "pompom with outer diameter " + outer_diameter + " px and inner " + innerPercentOfOuter * 100 + " percent of outer.pdf"); 
  drawPompomMaker();
  endRecord();
}

//add buttons and sliders to the ControlP5 object, which takes care of automatically calling their corresponding functions.
void addButtonsAndSliders()
{
  //position and size for export button
  //since they are declared inside a function, these variables are not global, 
  //but exist only where they are needed, inside the 
  int buttonWidth = 150; 
  int buttonHeight = 50;
  int buttonX = canvasWidth - buttonWidth - 20;
  int buttonY = canvasHeight - buttonHeight - 20;
  
  //add the export button (note that the name in quotes is the same as the name of the exportButton function, linking the two together).
  cp5.addButton("exportButton")
    .setBroadcast(false)
    .setPosition(buttonX, buttonY)
    .setSize(buttonWidth, buttonHeight)
    .setLabel("Export PDF (cut file)")
    .setBroadcast(true)
    .getCaptionLabel().setFont(createFont("Arial", 14)).toUpperCase(false).align(CENTER, CENTER)
    ;
  
  //add the outer diameter slider
  cp5.addSlider("diameterSlider")
     .setBroadcast(false)
     .setPosition(width-250, 20)
     .setSize(15, 400)
     .setRange(0, 550)
     .setValue(outer_diameter)
     .setLabel("Outer diameter in pixels")
     .setSliderMode(Slider.FLEXIBLE)
     .setBroadcast(true)
     .getCaptionLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingX(0).setFont(createFont("Arial", 12)).toUpperCase(false).setColor(0)
     ;   
     
   //add the percent slider
   cp5.addSlider("percentSlider")
     .setBroadcast(false)
     .setPosition(width-150, 20)
     .setSize(15, 400)
     .setRange(0.0, 1.0)
     .setValue(innerPercentOfOuter)
     .setLabel("Inner as percent of outer")
     .setSliderMode(Slider.FLEXIBLE)
     .setBroadcast(true)
     .getCaptionLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingY(20).setFont(createFont("Arial", 12)).toUpperCase(false).setColor(0)
     ;   
}