Skip to Navigation

Muffinlabs!

Home ›

processing

line burst

17
Jun 2010
  1. /**
  2.  * Draw lines over time in a neat pattern.
  3.  * Derived from http://processingjs.org/learning/basic/random
  4.  */
  5.  
  6. /**
  7. * This JS figures out the height/width we want to use for the sketch
  8. * <script>
  9. *   var divWidth = $("#header").width();
  10. *   var divHeight = 200;
  11. *   var doDraw = true;
  12. *</script>
  13. **/
  14.  
  15. int i = 0;
  16. float targetX, targetY;
  17. int shiftDelay = 2500;
  18. int lastReset = 0;
  19.  
  20. void setup() {
  21.   size(divWidth, divHeight);  
  22.   background(0);  
  23.   strokeWeight(10);  
  24.  
  25.   targetX = random(divWidth * 0.2, divWidth - divWidth * 0.2);
  26.   targetY = random(divHeight * 0.2, divHeight - divHeight * 0.2);
  27.   frameRate(20);
  28. }
  29.  
  30. void draw() {
  31.   if ( ! doDraw ) {
  32.         noLoop();
  33.         return;
  34.   }
  35.   noStroke();
  36.   fill(0, 0, 0, 2);
  37.   rect(0, 0, width, height);
  38.  
  39.   float r = random(255);  
  40.  
  41.   lastReset += frameRate;
  42.   if ( lastReset + shiftDelay < frameCount ) {
  43.     targetX += random(5) - 10;
  44.     targetY += random(5) - 10;
  45.    
  46.     if ( targetX < 0 ) {
  47.       targetX = 0;
  48.     }
  49.     if ( targetX > width ) {
  50.       targetX = width;
  51.     }
  52.     if ( targetY > height ) {
  53.       targetY = height;
  54.     }
  55.    
  56.     lastReset = frameCount;
  57.   }
  58.  
  59.   if ( random(0, 100) > 92 ) {
  60.     stroke(r, 0, 0, 40 + random(60));    
  61.   }
  62.   else {
  63.     stroke(r, 20 + random(80));
  64.   }
  65.  
  66.   float foo = random(0, 1);
  67.   float startX = 0;
  68.   float startY = 0;
  69.   float wiggle = random(10) - 20;
  70.  
  71.   if ( foo < 0.25 ) {
  72.         startX = random(0, width);
  73.   }
  74.   else if ( foo < 0.5 ) {
  75.         startX = random(0, width);
  76.     startY = height;    
  77.   }
  78.   else if ( foo < 0.75 ) {
  79.         startY = random(0, height);    
  80.   }
  81.   else {
  82.         startY = random(0, height);    
  83.     startX = width;
  84.   }
  85.  
  86.   line(startX, startY, targetX + wiggle,  targetY + wiggle);    
  87. }
Categories:
 

Processing.js

17
Jun 2010

I have a processing script running in the header of my site, because that's how I play. I've rotated them manually a few times over the months, sometime soon I will automate that. Click the 'hide' link to disable them.

Categories:
 

Truchet

08
Aug 2009

Been playing with Truchet tiles in Processing:

Bezier Tiles

This is pretty random and messy but can be interesting. I plan on doing something a little cleaner and more tile-esque next.

Roughly speaking, a Truchet tile is a single tile that will match up with it's surrounding tiles regardless of it's position.  For example, this is a very basic one, rotated through all four possible angles:

Also, this:

See Sebastien Truchet on Wikipedia for more info, or Wolfram.

Some people have played with this concept to make some really amazing works, such as this on Flickr:

Categories:
 

Bezier Tiles in Processing

26
Apr 2009

I haven't had much time to really focus on anything, but I have spent more time playing with Processing. My latest sketch involves repeating patterns of Bezier curves in interesting fashions. I'm trying to make something along the line of Truchet tiles, but I'm a long ways from that.

Bezier Tiles

Categories:
 
Syndicate content