Draw() not drawing when using pixels to fade image

p5.js
1

Hi all, I’m trying to implement a fade effect. The basic idea is to draw something on the canvas that fades overtime. I draw multiple times, and call fade after every draw, to create an effect where old drawings eventually disappear. My problem is that after the first “fade”, the drawing function stops showing anything in the canvas, even when messages in the console will indicate that is executing. Here is a simplified version of my sketch:

var q = function(sketch) {
    var backColor = sketch.color(255,255,255);
    var colorStep = 5;
      
    sketch.setup = function() {
        console.log("In setup");
        sketch.createCanvas(500,500);
        sketch.background(backColor);
        sketch.strokeWeight(0.8);
        sketch.frameRate(10);
        sketch.smooth();
                
    }

    sketch.draw = function() {
        randomLines();
        fadeImage();  
           
    }

   
    function randomLines() {
        sketch.stroke(sketch.random(200), sketch.random(200), sketch.random(200));
        sketch.line(sketch.random(200), sketch.random(200), 300+sketch.random(100), 300+sketch.random(100));
    }

    function fadeImage() {
        sketch.loadPixels();
        
        for (var i = 0; i < sketch.pixels.length; i+=4) {
            var r = sketch.pixels[i];
            var g = sketch.pixels[i+1];
            var b = sketch.pixels[i+2];
                        
            if (r < sketch.red(backColor)) {
                r += colorStep;
               // console.log("adjusted red");
            } 
            if (g < sketch.blue(backColor)) {
                g += colorStep;
               // console.log("adjusted green");
            } 
            if (b < sketch.green(backColor)) {
                b += colorStep;
               // console.log("adjusted blue");
            }
            sketch.pixels[i] = r;
            sketch.pixels[i+1] = g;
            sketch.pixels[i+2] = b;
        }
        sketch.updatePixels();
    }

     
}

var fadeSample = new p5(q, 'fadeSampleCanvas');

and the html file:

<!doctype html>
<html lang="en">
  <head>
	
	<!-- Processing p5.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
	
	
  </head>
  <body>
	  <div class="container">
		<div id='fadeSample'>
			<h2>Fade Sample</h2>
			<div id='fadeSampleCanvas' style="border:1px solid black; align-content: center">
			</div>
			<div>
				<p>Fading sample</p>
			</div>
		</div>
	  </div>
	  
	 
	  <!-- sketches-->
	  <script src="fadeSample.js"></script>
	</body>
</html>

I only get 1 line that fades overtime, when I should get multiple lines with different degrees of fading. This works in P3.

Any ideas?

Thanks.

2

Hi
I ran the code below in the p5js web editor and to me it seems it is working.
Notice i modified your sketch slightly. I changed from red(background) to 255 and I noticed an improvement.

Kf

//noprotect

var backColor ;
var colorStep = 5;

function setup() {
console.log("In setup");
createCanvas(500,500);
backColor = color(255,255,255);
background(backColor);
strokeWeight(0.8);
frameRate(30);
smooth();

}

function draw() {
randomLines();
fadeImage();  

}


function randomLines() {
stroke(random(200), random(200), random(200));
line(random(200), random(200), 300+random(100), 300+random(100));
}

function fadeImage() {
loadPixels();

for (var i = 0; i < pixels.length; i+=4) {
	 var r = pixels[i];
	 var g = pixels[i+1];
	 var b = pixels[i+2];
	 
	 if (r < 255) {
	 r += colorStep;
	 // console.log("adjusted red");
	 } 
	 if (g < 255) {
	 g += colorStep;
	 // console.log("adjusted green");
	 } 
	 if (b < 255) {
	 b += colorStep;
	 // console.log("adjusted blue");
	 }
	
	 pixels[i] = r;
	 pixels[i+1] = g;
	 pixels[i+2] = b;
	 }
	 updatePixels();	 

}
3

Hi kfrajer, I ran your code in the web editor and only drew one line. Is that what you see as well? I was expecting to see multiple lines.

I’m running on Chrome Version 68.0.3440.106 (Official Build) (64-bit) on Windows 10.

Thanks,

4

I tried both firefox and chrome

For Chrome: Google Chrome 68.0.3440.106 (Official Build) (64-bit) (cohort: Stable)

Win 10 x64

I get lines.

Kf

p5js-lines
p5js-lines.PNG1147×636 89.5 KB