Hi all. I am having what appears to be a strange bug, but I'm sure I'm doing something stupid.
![]()
I have a "HeatPoint" class which is basically a point that is assigned a color value. From that color value I am creating a fading circle around that point if a pixel is within a certain distances from the point. Essentially I want to draw a heatmap, which I'm still wrapping my head around. To fade, I am just mapping my min/max distance onto an alpha value and drawing a square 8 pixel width/height) as my 'pixels' for a fading circle. The problem is that when there are multiple HeatPoint objects, the alpha channels for the fading circle are rendering as black.
Attached is a screenshot. The HeatPoint is being drawn as a 200x200 ellipse and you can see the fading circle behind it. There are 2 in the screenshot.
I would actually love to do this by coloring the pixel[] array, but alpha seems to get completely ignored. I have searched the forums with nothing that solves my issue.
I appreciate any help you have to offer. Code below:
- int numHeatPoints = 2;
- HeatPoint[] heatPoints = new HeatPoint[numHeatPoints];
- void setup(){
- size(1280,800);
- smooth();
- for(int i=0;i<numHeatPoints;i++){
- heatPoints[i] = new HeatPoint(random(0,width),random(0,height));
- }
- noStroke();
- rectMode(CENTER);
- }
- float[] colorPixel(float x,float y){
- float[] c = new float[4];
- for(int i=0;i<numHeatPoints;i++){
- if(distanceBetween(x,y,heatPoints[i].x,heatPoints[i].y) < 200){
- float alph = map(distanceBetween(x,y,heatPoints[i].x,heatPoints[i].y),0,200,175,0);
- c[0] = heatPoints[i].rgba[0];
- c[1] = heatPoints[i].rgba[1];
- c[2] = heatPoints[i].rgba[2];
- c[3] = alph;
- }
- }
- return c;
- }
- float distanceBetween(float x1, float y1, float x2, float y2){
- float a = abs(x1-x2);
- float b = abs(y1-y2);
- return sqrt((a*a)+(b*b));
- }
- void draw(){
- background(0);
- //loadPixels();
- for(int i=0;i<numHeatPoints;i++){
- heatPoints[i].drawHeatPoint();
- }
- for(int x=0;x<width;x++){
- if(x%4==0){
- for(int y=0;y<height;y++){
- if(y%4==0){
- //pixels[y*width+x] = colorPixel(x,y);
- float[] c = colorPixel(x,y);
- fill(c[0],c[1],c[2],c[3]);
- rect(x,y,8,8);
- }
- }
- }
- }
- //updatePixels();
- }
- class HeatPoint{
- float x,y;
- float val;
- float[] rgba = new float[4];
- HeatPoint(float myX, float myY){
- x = myX;
- y = myY;
- updateHeatPointVal(random(0.0,1.0));
- println(val);
- }
- void updateHeatPointVal(float v){
- val = v;
- rgba[0] = map(val,0,1,0,255);
- rgba[1] = map(val,0,1,255,0);
- rgba[2] = 0;
- rgba[3] = 255;
- }
- void drawHeatPoint(){
- fill(rgba[0],rgba[1],rgba[2],rgba[3]);
- //fill(red(c),green(c),0,alpha(c));
- ellipse(x,y,255,255);
- }
- }