star-like shinning effect

edited November 2016 in GLSL / Shaders

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

shiny_star_3

maxresdefault

images

Star Shine

Tagged:

Answers

  • 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

  • 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

  • edited November 2016 Answer ✓

    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

  • 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

  • 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();
    }
    

    ShiningEffects-screenshot

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

Sign In or Register to comment.