• fullscreen
  • sketch74380.pde
  • //first, make divs from openprocessing.org under canvas transparent
    var csslink = document.getElementsByTagName("link")[0];
    csslink.parentNode.removeChild(csslink);
    parent.document.getElementById("appletAjaxContainer").setAttribute("style", "background-color:transparent; border:0px;");// we call parent.document 'cause canvas are displayed in an ifram
    Slash[] slash;
    int nb=20;
    color[] colors = {color(0), color(0, 158, 224), color(244, 229, 0)};
    
    void setup() {
        size(1000, 600);
        
        slash=new Slash[nb];
        for(int i=0; i<nb; i++){
            slash[i]=new Slash(colors[i%3]);
        }
    }
    
    void draw() { 
        externals.context.clearRect(0,0,width,height);// part of the canvasAPI that creates a clear rect
        
        for (int i=0;i<nb;i++) {
            slash[i].draw();
        }
        for (int i=0;i<nb;i++) {
            slash[i].draw();
        }
    }
    
    void mousePressed() {
        for(int i=0; i<nb; i++){
            slash[i].initSlash();
        }
    }
    
    class Slash {
        float x1, x2, y1, y2, tarX1, tarX2, tarY1, tarY2, easing = random(0.01,0.1);
        int timer, tMax, taille=35, delta=240;
        boolean vertical;
        color c;
    
        Slash(color _c) {
            c=_c;
            initSlash();
        }
    
        void initSlash() {
            timer=0;
            tMax= (int) random(60, 150);
            vertical=random(1)>.5;
    
            x1=x2=(int)random(1, int(width/40)-1)*40;
            y1=y2=(int)random(1, int(height/40)-1)*40;
    
            if(x1<width/2) tarX2=x1+delta;
            else tarX2=x1-delta;
    
            if(y1<height/2) tarY2=y1+delta;
            else tarY2=y1-delta;
        }
    
        void draw() {
            x2=ease(x2, tarX2, easing);
            y2=ease(y2, tarY2, easing);
            if (abs(x2-tarX2)<=1) {
                timer++;
    
                if (timer>tMax) {
                    tarX1=tarX2;
                    tarY1=tarY2;
                    x1=ease(x1, tarX1, easing);//
                    y1=ease(y1, tarY1, easing);
    
                    if (abs(x1-tarX1)<=1) {
                        initSlash();
                    }
                }
            }
    
            noStroke();
            fill(c,200);
            if (vertical) quad(x1, y1-taille, x1, y1+taille, x2, y2+taille, x2, y2-taille);
            else quad(x1-taille, y1, x1+taille, y1, x2+taille, y2, x2-taille, y2);
        }
    
        // a snippet function i often use for animation easing
        float ease(float value, float target, float easingVal) {
            float d = target - value;
            if (abs(d)>1) value+= d*easingVal;
            return value;
        }
    }

    code

    tweaks (3)

    about this sketch

    This sketch is running in HTML5 using Processingjs.

    license

    advertisement

    Makio135

    Transparent canvas

    Add to Faves Me Likey@! 116
    You must login/register to add this sketch to your favorites.

    Another small tip showing how to have a transparent canvas using HTML5 canvas API.
    -> externals.context.clearRect(0,0,width,height);

    Including a snippet method for easing animation.

    "Tudd"
    16 Oct 2012
    No way! That is *awesome*.
    It seems I need to dig more in processingjs, those features are much more browser-friendly. Thanks for sharing, really nice one.
    Marius Watz plus+
    25 Oct 2012
    Very cool, thanks for posting. (Just scheduled a tweet about it.)
    Scott Murray
    25 Oct 2012
    Clever! Very nice. Could see lots of great uses for this.
    peripecio
    30 Oct 2012
    Cool thing and good example. Thanks for share.
    Marcus Morba
    3 Apr 2013
    Really great !!!
    This is one of these "I have to try that!" scripts!

    I have copied your code into Processing in JavaScript mode but I get this error for the second line (first noncomented):

    "unexpected token: ("

    I have no idea why the processing IDE treats this JavaScript code as buggy...?
    Makio135
    26 Jun 2013
    I read that you can't write pure javascript in the Processing IDE even in JavascriptMode unless you put it in a .js file alongside your .pde file &#40;it will be automatically loaded in a new tab when opening the .pde file in Processing&#41;.
    So that'it for for the error.

    BUT, you don't need this line because i wrote it specifically for the openProcessing website that loads the canvas in an iframe, so you can just comment this line and it should work fine
    Makio135
    26 Jun 2013
    Thanks everybody for your nice feedbacks!
    Marc Gilb
    2 Jul 2013
    Super coolvery impressive
    Abhishek Nandy
    3 Jul 2013
    Totally Cool!! Awesome man!!
    Chee! Man! Thanks for this reply, I have not been understanding the JavaScript, but you shed some light on it...

    Based on your work I have created this:

    http://www.openprocessing.org/sketch/102466

    (PS. I see that sometimes on OpenProcessing sketches load as thin, small rectangle, where nothing can be seen - in such case you need to reload a page).
    scopesofter
    1 Sep 2013
    the transparency rules (why didn't I think of that)
    Seems like OpenProcessing update has broken transparency... I try to track, which element is white now, but I can't find it...
    I found that document loaded from iframe has new style for body tag:

    body {
    background:url(/assets/images/icons/iconLoader.gif) center no-repeat #fff;
    }

    Can I change this from JS? I don't know, how to access elements loaded from iframe.
    Makio135
    11 Nov 2013
    Broken transparency issue due to openprocessing.org's update
    -> FIXED
    (fixed the hard way by removing css link from the iframe...)
    Yeah, hard way, but I am glad to see it working!
    BTW - is there a way to access this style directly, not removal of the link?
    Makio135
    17 Nov 2013
    Probably, by selecting elements and then overwriting css properties...
    You need to login/register to comment.