star-like shinning effect

kfrajer

I am trying to create a shinning effect like the ones shown below. I think you can do this with shaders but I do not have experience with them. I have a logo competition with an deadline of about 6 hrs. Could anyone share some code or point me to an example in processing where I could get started? I am working in P3D mode if that makes any difference. No experience here, just looking for little help or maybe if somebody could share some code of something similar. It will be great to add this touch to my design.

Kf

jeremydouglass

One effect you are looking for is sometime called "radial lines".

https://www.openprocessing.org/sketch/5259

if you only have 6 hours and this is for a background image you could just hand-create an effect in Photoshop and then load it as an image().

https://m.youtube.com/watch?v=TbMjNDJM24w

kfrajer

Thxs @jeremydouglass. I ended up using an old post from GoToLoop to try to simulate an effect but it was not close to what I ideally wanted. It was hard to work on it while traveling. Thanks for your comment. I will explore the idea as time permits.

Kf

georgehenryrowe

Hey @kfrajer you could use a guassianBlur filter and some coloured lines to achieve a similar effect, that is how I created the below.

https://www.instagram.com/p/BJLcO0wDr6b/?taken-by=georgehenryrowe

I used the blur filter from here: https://github.com/SableRaf/Filters4Processing

Thanks

G

kfrajer

I haven't advanced much on this front. However I wanted to include this link as it is relevant to this topic:

https://forum.processing.org/two/discussion/18781/multipass-shader-example#latest

Kf

jeremydouglass

Here is are two simple examples. The radial shine is based on atan2() -- the glow is based on overlapping semi-transparent ellipse().

/**
 * Shining Effects
 * 2016-12-13 Processing 3.2.3
 */

void setup() {
  size(640, 360);
}
void draw() {
  radialShine(16);
  translate(width/2,height/2);
  radialGlow(192, 10);
}

void radialGlow(int size, int steps){
  pushStyle();
  noStroke();
  for(int i=0;i<size;i=i+steps){
    fill(255,i);
    ellipse(0,0,size-i,size-i);
  }
  popStyle();
}

// based on Graphing 2D Equations by Daniel Shiffman
// processing.org/examples/graphing2dequation.html
void radialShine(int spokes){
  loadPixels();
  float w = 16.0;         // 2D space width
  float h = 16.0;         // 2D space height
  float dx = w / width;    // Increment x this amount per pixel
  float dy = h / height;   // Increment y this amount per pixel
  float x = -w/2;          // Start x at -1 * width / 2
  for (int i = 0; i < width; i++) {
    float y = -h/2;        // Start y at -1 * height / 2
    for (int j = 0; j < height; j++) {
      float theta = atan2(y,x);         // Convert cartesian to polar
      // Compute 2D polar coordinate function
      float val = sin(spokes * theta);           // Results in a value between -1 and 1
      // float r = sqrt((x*x) + (y*y));    // Convert cartesian to polar
      // float val2 = cos(r);
      // Map resulting vale to grayscale value
      pixels[i+j*width] = color((val + 1.0) * 255.0/2.0);     // Scale to between 0 and 255
      y += dy;                // Increment y
    }
    x += dx;                  // Increment x
  }
  updatePixels();
}

jeremydouglass

@kfrajer -- another recent example of code producing a radial color-banding effect (although it is animated, with an epilepsy warning) was just posted here:

• https://forum.processing.org/two/discussion/20365/how-to-remove-odd-white-lines-glare