Processing Drop

Drop curve breathes. 2015-07-28

by schrodingers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.13/processing.min.js"></script>
<canvas></canvas>

CSS

</style> <script type="text/javascript"> window.addEventListener('load', function() {
    var scripts=document.body.getElementsByTagName('script');
    var canvases=document.body.getElementsByTagName('canvas');
    new Processing(canvases[0], scripts[0].text);
}
, false);
 // Here prevent javascript in body from throwing error </script> <style>

JavaScript

/* 
 title: Drop curve
 date: 2015-07-28
 */

color violet = color(58, 48, 66);
color yellow = color(237, 230, 35);
color cyan = color(5, 190, 255);

float easing = 0.05;
float angle = 0.0;
float x = 100;
float y = 100;
x = constrain(x, 0, width);
y = constrain(y, 0, height);

void setup() {
    size(700, 600);
    smooth();
    background(violet);
    noStroke();
}

void draw() {
    fill(violet, 50);
    rect(0, 0, width, height);

    fill(cyan);
    tear(x, y, 50);
    y += 0.4;

    beginShape(RECT);
    fill(cyan);
    rect(width - 60, height - 50, 50, 50);

    fill(yellow);
    rect(width, height - 50, 50, 50);
    endShape(CLOSE);
}

void tear(float xpos, float ypos, float r) {
    //http://mathworld.wolfram.com/TeardropCurve.html
    pushMatrix();
    translate(xpos, ypos);
    rotate(-HALF_PI);

    float mx = 0.02;

    float a = map(sin(angle), -1, 1, 1.05, 2.5);


    beginShape();
    for (int i = 0; i < 360; i++) {
        float x = cos(radians(i)) * r;
        //The exponent a controls the shape of the curve
        float y = sin(radians(i)) * pow(sin(radians(i) / 2), a) * r;

        vertex(x, y);
    }
    endShape();
    popMatrix();
    fill(250);
    ellipse(xpos - 10, ypos, 7, 15);
    ellipse(xpos + 10, ypos, 7, 15);
    angle += mx;
}