• fullscreen
  • sketch74380.pde
  • //first, make divs from openprocessing.org under canvas transparent
    var csslink = document.getElementsByTagName("link")[0];
    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++) {
        for (int i=0;i<nb;i++) {
    void mousePressed() {
        for(int i=0; i<nb; i++){
    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) {
        void initSlash() {
            tMax= (int) random(60, 150);
            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) {
                if (timer>tMax) {
                    x1=ease(x1, tarX1, easing);//
                    y1=ease(y1, tarY1, easing);
                    if (abs(x1-tarX1)<=1) {
            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;


    tweaks (29)



    Report Sketch

    Report for inappropriate content

    Please provide details if possible:

    Your have successfully reported the sketch. Thank you very much for helping to keep OpenProcessing clean and tidy :)

    Make a Copyright Infringement claim


    Transparent canvas

    Add to Faves Me Likey@! 165
    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.

    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.
    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...?
    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
    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:


    (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).
    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.
    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?
    17 Nov 2013
    Probably, by selecting elements and then overwriting css properties...
    Ronald McMeekin
    27 Nov 2014
    Thanking you for sterling work.
    Hi Makio135!
    I think you know much more javaScript than I do. I'm trying to make p5.js (not processing.js) sketches run in openprocessing. I still missing something, because I can see the sketch running in the following link

    but, it's not visible in the main sketch page:

    Any clue what I'm making wrong?

    8 May 2015
    Thanks and nice work !
    Anastasia Dunbar
    23 Jan 2016
    Reminds me of dmas3's artworks.
    how to make this run on my processing application.... I am a student trying to learn it.... It shows me unexpected token (
    You need to login/register to comment.