breathing-halftone icon indicating copy to clipboard operation
breathing-halftone copied to clipboard

how to remove halftone

Open petrospap opened this issue 9 years ago • 2 comments

Hello, i use your script in my website to create halftone effect in https://simply4all.net/pop-corn/ how to delete halftone after successfully added a lum!

petrospap avatar Sep 08 '15 11:09 petrospap

Sorry, removing or stopping the halftone animation is not currently supported.

desandro avatar Sep 08 '15 20:09 desandro

Thank you desandro for this amazing script For my needs I have make some modifications in breathing-halftone.js So on Halftone.prototype.create I add

this.canvas.id = "idh";

I remove

this.bindEvents();

Also I remove

mousedown
touchstart
mousemove
touchmove
touchend
Halftone.prototype.bindEvents
Halftone.prototype.unbindEvents

finally in the Halftone.prototype.destroy become

Halftone.prototype.destroy = function(){
this.isActive = false;
this.img.style.visibility = '';
this.img.style.display = '';
};

Those changes happen because I need only the halftone and a lighter js I want to change colors by click, so I add this simple function

function addHalftone(n){
    var img = document.querySelector('#dragcp');
    halftone = new BreathingHalftone(
    img,{
        dotSize:1/100,
        oscAmplitude:0,
        initVelocity:1,
        isAdditive:true,
        channels:[n]
        });
    }

The problem with this was that memory is not released, so, by changing any color the CPU goes very high. I end up with this function

function removeHalftone(){
    if($('#idh').length!==0){
    $('#idh').remove();halftone.destroy();delete halftone;
    }
};

the whole test you can see it at https://simply4all.net/test/halftone.php

I don't know if is the proper way ( I'm not that good in javascript), but it seems to work for me. Hope those changes to help someone. :)

petrospap avatar Sep 09 '15 15:09 petrospap