Monatsarchiv für March 2011

 
 

Image Map & Canvas

I had an interesting idea a few days…. make a canvas element, put a transparent gif over it, create an image map with some shapes and then read the coords property of the area elements to draw to the canvas. I whipped it up a day or two ago and am posting it now at 2 in the morning.

click here if you don’t know what an image map is…

Here is the slightly boring result, just roll over the shapes… code is below:

This is just an interesting experiment. Having mouse events in canvas is not necessary more most of the time. This code is a bit rough, but it’s a solid proof of concept:

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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8" />
    <title>Canvas Map</title> 
    <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
 
    <script>
      $(function(){
 
        var TWO_PI = Math.PI * 2;
 
        var map = $("#map");
        var areas = $("#areas");
        var canvas = $("#canvas")[0];
        canvas.width = 500;
        canvas.height = 500;
        var c = canvas.getContext("2d");
 
        $.fn.render = function(){ 
          this.data.apply(this, arguments);
          render();
        }
 
        function clear(){    
          c.fillStyle = "black";
          c.fillRect(0, 0, canvas.width, canvas.height);
        }
 
        // create a rectangle
        $('<area />', {
          shape : "rect",
          coords : "10, 10, 100, 100",
          href :  "#",
          alt : "rect"
        }).data({
 
          fillStyle: "red",
          strokeStyle : "white"
 
        }).mouseenter(function(){
          $(this).render("fillStyle", "orange");
 
        }).mouseleave(function(){
          $(this).render("fillStyle", "red");
 
        }).click(function(){
          alert("hello");
        }).appendTo(areas);
 
 
        // create a circle
        $('<area />', {
          shape : "circle",
          coords : "100, 300, 50",
          href :  "#",
          alt : "circ"
        }).data({
 
          fillStyle: "#a3bcd6",
          strokeStyle : "white",
          lineWidth : 5
 
        }).mouseenter(function(){
          $(this).render("strokeStyle", "red");
 
        }).mouseleave(function(){
          $(this).render("strokeStyle", "white");
 
        }).appendTo(areas);
 
        // create a poly
        $('<area />', {
          shape : "poly",
          coords : "300, 200, 350,250, 250, 350, 200, 250, 260, 280",
          href :  "#",
          alt : "poly"
        }).data({
 
          fillStyle: "#bf9c82",
          strokeStyle : "#ebce59",
          lineWidth : 2
 
        }).mouseenter(function(){
          $(this).render({strokeStyle: "#ede1b0",
                          fillStyle : "white"});
          render();
        }).mouseleave(function(){
          $(this).render({strokeStyle: "#ebce59",
                          fillStyle : "bf9c82"});
 
        }).appendTo(areas);
 
 
        render();
 
 
        function setStyle(fillStyle, strokeStyle, lineWidth){
          if (fillStyle){
            c.fillStyle = fillStyle; 
 
          }
          if (strokeStyle){
            if (lineWidth){
              c.lineWidth = lineWidth; 
            }
            c.strokeStyle = strokeStyle;   
          }
        }
 
        function fillStroke(fillStyle, strokeStyle){
          if (fillStyle) c.fill();
          if (strokeStyle) c.stroke();
        }
 
        function render(noClear){
          if (!noClear){
            clear();
          }
 
          areas.children().each(function(i){
            var area = $(this);
            var shape = area.attr("shape");
            var coords = area.attr("coords").split(",");
            var fillStyle = area.data("fillStyle");
            var strokeStyle = area.data("strokeStyle");
            var lineWidth = area.data("lineWidth");
 
            if (shape == "rect"){
 
              if (fillStyle){
                c.fillStyle = fillStyle; 
                c.fillRect(coords[0], coords[1], coords[2] – coords[0], coords[3] – coords[1]);
              }
              if (strokeStyle){
                if (lineWidth){
                  c.lineWidth = lineWidth; 
                }
                c.strokeStyle = strokeStyle; 
                c.strokeRect(coords[0], coords[1], coords[2] – coords[0], coords[3] – coords[1]);
              }
 
            }else if (shape == "circle"){
 
              setStyle(fillStyle, strokeStyle, lineWidth);
 
              c.beginPath();
              c.arc(coords[0], coords[1], coords[2], 0, TWO_PI, false);
              c.closePath();
 
              fillStroke(fillStyle, strokeStyle);
 
            }else if (shape == "poly"){
 
              if (fillStyle){
                c.fillStyle = fillStyle; 
 
              }
              if (strokeStyle){
                if (lineWidth){
                  c.lineWidth = lineWidth; 
                }
                c.strokeStyle = strokeStyle;   
              }
 
 
              c.beginPath();
              var leng = coords.length;
              c.moveTo(coords[0], coords[1]);
              for (var i = 2; i < leng; i+=2){
                c.lineTo(coords[i], coords[i+1]); 
              }
              c.closePath();
 
              fillStroke(fillStyle, strokeStyle);
 
            }
 
            c.lineWidth = 1;
          });
        }
      });
    </script>
    <style>
      .canvasMap{
        position : absolute;
        top : 0px;
        left : 0px;
        width : 500px;
        height : 500px;
      }
    </style>
  </head> 
 
  <body> 
 
    <div id="container">
      <map name="map">
        <div id="areas"> 
        </div>
      </map>
      <canvas class="canvasMap" id="canvas"></canvas>
      <img id="image" class="canvasMap" src="trans.gif" usemap="#map"/>
 
    </div>
 
  </body> 
</html>

30. March 2011 | canvas, html, html5, javascript, jquery | Comments (4)

Interpret Photo

Every month or two I do a DVD backup – I backup all my administrative stuff… including estimates, invoices and finished project source code – I also backup weird experiments from a folder called shapevent. I’ve been doing these backups for years and for some reason I decided to dig through them today.I’ve only scratched the surface and I’ve found some interesting stuff that I had completely forgotten about.

The below experiment uses pure code to draw an image inspired by a photo. It doesn’t sample any colors or use any of the image data, the idea was to do everything by “painting” with code. If your feeling impatient, scroll to the bottom to see what kind of image this produces, otherwise sit back and watch:

This movie requires Flash Player 9

Here are two examples of the kinds of images it will generate:

There is some really fun stuff going on in this code. I wrote a mini library when bitmapdata first came out that treated things sort of like photoshop layers, you could make new layers, flatten layers, apply filters and blendmodes to layers – it was pretty nice, surprised I didn’t use it more. I made most of these using it.

The brush motion is a randomly generated bezier path, I wrote weird functions like zigZag() that would aid in the creation of certain types of paths. I remember that you could create any kind of shape and then distort it, so you could do something like :

circle(x, y, radius, smooth, distortion amount).

That’s how the little blobs that make up the brush were created. Looking forward to digging into the source a bit more and maybe porting it to AS3.

18. March 2011 | ActionScript, old stuff | Comments (0)

AS2 Tennis

In 2005 I was planning on starting up some programming tennis with someone – pass some code back and forth and see what happens. For some reason the game of tennis never got off the ground and I was left with the first thing I wrote for the game. It’s interesting to see how my code style has changed in ~6 years… Maybe I’ll recode this one and really compare the styles… Anyway have a look:


Den ganzen Beitrag lesen…

18. March 2011 | ActionScript, misc, old stuff | Comments (0)

« Ältere Beiträge