Loading...
Logo
Processing Forum

How can i create image like this ?

in General Discussion  •  Other  •  2 months ago  
subj:



Do you know best practice or any techniques ?

Thanks!

Replies(10)

The basic technique behind these kind of drawings is:
  • Single moving semi-transparent line
  • Aggregate drawing (aka no background call)

Below is a basic example of this technique. Obviously it can be much further tweaked.

Code Example

Copy code
  1. int numPoints = 5;
  2. float x, speed = 0.05;
  3.  
  4. void setup() {
  5.   size(1200, 400);
  6.   background(0);
  7.   frameRate(2000);
  8.   noFill();
  9.   stroke(255, 5);
  10. }
  11.  
  12. void draw() {
  13.   float fc1 = frameCount*0.0005;
  14.   float fc2 = frameCount*0.001;
  15.   if (x<0) { speed = abs(speed); }
  16.   if (x>width) { speed = -abs(speed); }
  17.   x += speed;
  18.   beginShape();
  19.   curveVertex(x, 0);
  20.   for (int i=0; i<numPoints; i++) {
  21.     float xp = x+sin(i+fc2)*100;
  22.     float yp = noise(i+fc1)*height;
  23.     curveVertex(xp, yp);
  24.   }
  25.   curveVertex(x, height);
  26.   endShape();
  27. }
Wow, it was so easy. I'll play in this way... Thanks!

What you think about this:





Hi guys!
Really interesting topic. I was wondering how is it possible to use this kind of drawing starting with a "predefined" path.
For example this kind of effect:



Any ideas?

Thanks in advance! 

guys, you are amazing!

kles4enko.andrey, can you post your code too plz?

Greetings, Chrisir

@Chrisir, @kles4enko

if you're into this kind of generated art images then this book would be of an interest for you. it explains how to make thouse things.



And some sample chapters with code  http://www.manning.com/pearson/GenArt-Sample-Chapter-6.pdf
my attempt, reusing some old bezier curve code i had lying around:



http://www.flickr.com/photos/31962137@N00/9485739654/

thanks amnon.owned 8)
@amnon

thank you for the code.
 I also added colors and put it to sketchpad: 

here's result


UPDATE:
I also tried to render lines into transparent PGraphics so that it is possible to put some image or animation underneath, it kinda works except that color is always black... some kind of problem converting between HSB and RGB .... 


And just by chance stumbled upon this tool:

 which can be used for creation of such images. 
If you play around with it, it gives pretty good understanding of how to create those lines and effect in WYSIWYG style.

ps. when running as Applet it will scare you with warnings.