Deconcept Weeds

Back in 2001 I was obsessed with deconcept.com by Geoff Stearns. I learned so many great techniques from the downloadable source code available there. I felt like making something with canvas today so I thought it would be nice to do a deconcept tribute and recreate “weeds” by Geoff Stearns. (It’s worth noting that Geoff Stearns is the creator of swfobject).



Here is the javascript source:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
// original version by Geoff Stearns of deconcept.com
// http://www.deconcept.com/v2/ (flash experiments)
// http://www.deconcept.com/v2/01/02/018/018_weeds.swf
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
var TWO_PI = Math.PI * 2;
 
var mouseX = 0,
    mouseY = 0;
document.onmousemove = function(e){
  mouseX = e.clientX;
  mouseY = e.clientY;
}
document.onclick = function(e){
    for (var i = 0; i<weedNum; i++){
      weeds[i].randomize(); 
    }
}
 
var weedNum = 10,
    weeds = [];
for (var i = 0; i<weedNum; i++){
  weeds.push(new Weed());
}
 
c.fillStyle = "#666633";
c.fillRect(0,0,canvas.width, canvas.height);
 
setInterval(function(){
  c.fillStyle = "#666633";
  c.fillRect(0,0,canvas.width, canvas.height);
  for (var i = 0; i<weedNum; i++){
    weeds[i].render(); 
  }
}, 30);
 
function Weed(){
 
  var x, y;
 
  this.randomize = function(){
    x = Math.random() * (canvas.width-100)+50;
    y = Math.random() * (canvas.height-100)+50; 
  }
  this.randomize();
 
  var x0 = x,
      y0 = y,
      dx = x,
      dy = y,
      bx = 0, 
      by = 0,
      x1 = Math.random() * (canvas.width-100)+50,
      y1 = canvas.height,
      alpha = 0,
      alphaDest = 0,
      theta = 0;
 
  this.render = function(){
    x0 -= bx;
    bx = ((x0 - dx) / 7 + bx) / 1.2;
    y0 -= by;
    by = ((y0 - dy) / 7 + by) / 1.2;
 
    var diffX = mouseX - x;
    var diffY = mouseY - y;
    if (Math.sqrt(diffX * diffX + diffY * diffY) < 100){
      dx = mouseX;
      dy = mouseY;  
      alpha += (Math.abs(Math.cos(theta))/4 - alpha) / 4;
      theta += 0.05;
    }else{
      dx = x;
      dy = y; 
      if (alpha > 0){
        alpha -= 0.1; 
      }
    }
 
    c.lineWidth = 2;
    c.lineCap = "round";
    c.strokeStyle = "rgba(255,255,255,0.5)";
 
    c.beginPath();
    c.moveTo(x0, y0);
    c.bezierCurveTo((x0 + x1)/2, y0-50, x1, (y0 + y1)/2.5, x1, y1);      
    c.stroke();
 
    c.fillStyle = c.strokeStyle;
 
    c.beginPath();
    c.arc(x0, y0, 8, 0, TWO_PI, true);
    c.closePath();
    c.fill();
 
    c.strokeStyle = "rgba(255, 255, 255, " + alpha + ")";
    c.lineWidth = 1;
 
    c.beginPath();
    c.arc(x0, y0, 13, 0, TWO_PI, true);
    c.closePath();
    c.stroke();
 
    c.beginPath();
    c.arc(x0, y0, 18, 0, TWO_PI, true);
    c.closePath();
    c.stroke();
  }
}


 
 
 

4 Responses to “Deconcept Weeds”

  1. Geoff Stearns
    18. January 2011 um 17:38

    This is fantastic! I’ve been wanting to update some of my old stuff to canvas/javascript for a while now, but never seem to find the time…

    Thanks for sharing :)

  2. ashley
    18. January 2011 um 18:22

    aw yay, I love Geoff’s old Flash experiments! & I have to say as a Flash developer that this is one of the more direct and understandable Flash-to-Canvas examples I’ve seen. Thanks!

  3. Zevan
    18. January 2011 um 19:09

    It would be awesome if you updated some of your old stuff to canvas… I’ve been thinking about coding up walker v2 and spider đŸ˜‰

    I’ll take this opportunity to say THANK YOU man, your flash experiments are extremely inspiring to me and I learned so much from your source code. Cheers!

  4. Zevan
    18. January 2011 um 19:12

    thanks ashley. It might look even more direct flash-to-canvas had I used document.addEventListener(“mousemove”… instead of document.onmousemove = …. đŸ˜‰

Leave a Reply

Spam protection by WP Captcha-Free