topical media & game development

topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

#javascript-processing-example-topic-drawing-customtool.htm / htm


  <!DOCTYPE html>
  <html><head>
  <script src="javascript-processing-example-processing.js"></script>
  <script src="javascript-processing-example-init.js"></script>
  <link rel="stylesheet" href="javascript-processing-example-style.css">
  </head><body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
  <h2>CustomTool</h2>
  
  <p>Move the cursor across the screen to draw. 
  In addition to creating software tools to simulate pens and pencils, 
  it is possible to create unique tools to draw with.</p>
  
  <p><a href="http://processing.org/learning/topics/customtool.html"><b>Original Processing.org Example:</b> CustomTool</a><br>
  <script type="application/processing">
  int dots = 1000;
  float[] dX = new float[dots];
  float[] dY = new float[dots];
  
  float l_0 = 0.0;
  float h_0 = 0.0;
  
  float legX = 0.0;
  float legY = 0.0;
  float thighX = 0.0;
  float thighY = 0.0;
  
  float l = 30.0; // Length of the 'leg'
  float h = 60.0; // Height of the 'leg'
  
  float nmx, nmy = 0.0;
  float mx, my = 0.0;
  
  float offset;
  
  int currentValue = 0;
  int valdir = 1;
  
  void setup() 
  {
    size(200, 200);
    noStroke();
    fill(102);
    rect(0, 0, width, height);
    offset = width/2;
  }
  
  void draw() 
  {
    // Smooth the mouse
    nmx = mouseX;
    nmy = mouseY;
    if((abs(mx - nmx) > 1.0) || (abs(my - nmy) > 1.0)) { 
      mx = mx - (mx-nmx)/20.0;
      my = my - (my-nmy)/20.0;
      
      // Set the drawing value
      currentValue += 1* valdir;
      if(currentValue > 255 || currentValue <= 0) {
        valdir *= -1;
      }
    }
  
    iKinematics();
    kinematics();
    
    pushMatrix();
    translate(offset, offset);
    stroke(currentValue); 
    line(thighX, thighY, legX, legY);
    popMatrix();
    
    stroke(255);
    point(legX+offset, legY+offset);
  }
  
  void kinematics() 
  {
    thighX = h*cos(h_0);
    thighY = h*sin(h_0);
    legX = thighX + l*cos(h_0 - l_0);
    legY = thighY + l*sin(h_0 - l_0);
  }
  
  void iKinematics()
  {
    float tx = mx - width/2.0;
    float ty = my - height/2.0;
    float c2 = (tx*tx + ty*ty - h*h - l*l)/(2*h*l); //in degrees
    float s2 = sqrt(abs(1 - c2*c2)); // the sign here determines the bend in the joint  
    l_0 = -atan2(s2, c2);
    h_0 = atan2(ty, tx) - atan2(l*s2, h+l*c2);
  }
  </script><canvas width="200" height="200"></canvas></p>
  <div style="overflow: hidden; height: 0px; width: 0px;"><img src="javascript-processing-example-milan.jpg" id="milan.jpg"><img src="javascript-processing-example-paris.jpg" id="paris.jpg"></div>
  
  <pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
  // unless otherwise stated.</b>
  int dots = 1000;
  float[] dX = new float[dots];
  float[] dY = new float[dots];
  
  float l_0 = 0.0;
  float h_0 = 0.0;
  
  float legX = 0.0;
  float legY = 0.0;
  float thighX = 0.0;
  float thighY = 0.0;
  
  float l = 30.0; // Length of the 'leg'
  float h = 60.0; // Height of the 'leg'
  
  float nmx, nmy = 0.0;
  float mx, my = 0.0;
  
  float offset;
  
  int currentValue = 0;
  int valdir = 1;
  
  void setup() 
  {
    size(200, 200);
    noStroke();
    fill(102);
    rect(0, 0, width, height);
    offset = width/2;
  }
  
  void draw() 
  {
    // Smooth the mouse
    nmx = mouseX;
    nmy = mouseY;
    if((abs(mx - nmx) &gt; 1.0) || (abs(my - nmy) &gt; 1.0)) { 
      mx = mx - (mx-nmx)/20.0;
      my = my - (my-nmy)/20.0;
      
      // Set the drawing value
      currentValue += 1* valdir;
      if(currentValue &gt; 255 || currentValue &lt;= 0) {
        valdir *= -1;
      }
    }
  
    iKinematics();
    kinematics();
    
    pushMatrix();
    translate(offset, offset);
    stroke(currentValue); 
    line(thighX, thighY, legX, legY);
    popMatrix();
    
    stroke(255);
    point(legX+offset, legY+offset);
  }
  
  void kinematics() 
  {
    thighX = h*cos(h_0);
    thighY = h*sin(h_0);
    legX = thighX + l*cos(h_0 - l_0);
    legY = thighY + l*sin(h_0 - l_0);
  }
  
  void iKinematics()
  {
    float tx = mx - width/2.0;
    float ty = my - height/2.0;
    float c2 = (tx*tx + ty*ty - h*h - l*l)/(2*h*l); //in degrees
    float s2 = sqrt(abs(1 - c2*c2)); // the sign here determines the bend in the joint  
    l_0 = -atan2(s2, c2);
    h_0 = atan2(ty, tx) - atan2(l*s2, h+l*c2);
  }</pre>
  </body></html>

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.