-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcreatingacolorpaletteOLD.html
165 lines (151 loc) · 6.26 KB
/
creatingacolorpaletteOLD.html
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
<!DOCTYPE html>
<html>
<head>
<script src="borerv104/js/block.js"></script>
<script src="borerv104/js/borer.js"></script>
<script src="borerv104/js/codex_basic.js"></script>
<script src="borerv104/js/codex_scan.js"></script>
<script src="borerv104/js/codex_touch.js"></script>
<script src="borerv104/js/color.js"></script>
<script src="borerv104/js/pixel.js"></script>
<script src="borerv104/js/scanner.js"></script>
<script src="borerv104/js/script.js"></script>
<script language="Javascript">
/*29, 6, 2, 11, 15, 28, 2, 22, 23, 27, 6, 25, 17, 29, 2, 30, 7, 23, 17, 28, 10, 29, 4, 26, 22, 26, 24, 9, 1, 27, 24, 15, 4, 27, 9, 30, 8, 10, 19, 13, 12, 7, 8, 17, 8, 1, 12, 19, 7, 6, 28, 26, 23, 29, 31, 29, 11, 4, 27, 28, 24, 21, 27, 13*/
</script>
</head>
<body>
<div style="width:700px; display:flex;">
<div style="width:300px;">
<img src="picture1.jpg">
</div>
<div style="padding:5px;">
<h2>turtledna</h2>
<div style="float:left;">
I am a hobbyist programmer working with 2d and 3d graphics and researching DNA
exploration using bio-programming; the formation of artificial life using computer
technologies.
</div>
</div>
<div style="width:200px;">
<a href="https://neocities.org/site/turtledna"><img src="myneocities.jpg"></a>
<div style="padding:5px;">
<a href="https://github.com/turtledna/borer" alt="My Github page!"><img src="mygithub.jpg"></a>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div style="width:100%; background: #ccff99;">
<h2>Guide</h2>
<a href="index.html">An introduction</a>
<a href="theorigin.html">Using an origin</a>
<a href="thescanner.html">The scanner</a>
<a href="the2nddimension2d.html">The second dimension 2d</a>
<a href="ontoanimage.html">Onto an image</a>
</div>
</div>
<div style="clear:both;"></div>
<h1 style="margin-bottom:5px;">Borer Explorer v1.0.3</h1>
<canvas id="image"></canvas>
<div id="numbers">
</div>
<!--<h2>The sequence</h2>
<div style="margin-left:15px;">
<textarea style="width:100%; height:60px; padding:5px; border:1px solid red; " id="bexSequence">1, 23, 14, 23, 19, 22, 19, 6, 15, 18, 23, 16, 8, 16, 4, 26, 1, 23, 16, 16, 14, 15, 15, 14, 6, 2, 12, 27, 3, 15, 5, 1, 1, 18, 3, 7, 21, 20, 24, 20, 12, 5, 29, 2, 14, 16, 16, 9, 15, 20, 3, 24, 15, 15, 10, 17, 9, 11, 2, 13, 28, 17, 0, 7, 25, 2, 5, 11, 7, 5, 25, 15, 11, 27, 12, 28, 30, 23, 15, 15, 28, 21, 15, 28, 17, 13, 22, 30, 0, 2, 29, 30, 16, 18, 11, 14, 21, 18, 23, 31
</textarea>
</div>
<div>
<input type="button" id="bexSequenceUpdate" value="Update">
</div>
-->
<div style="width: 320px; height:320px; margin:15px; position: relative; float:left;">
<canvas id="script" width="320" height="320" style="position:absolute;"></canvas>
<canvas id="borer0" width="500" height="500" style="position:absolute;"></canvas>
<canvas id="borer1" width="500" height="500" style="position:absolute;"></canvas>
</div>
<div style="padding:25px;">
<h2>Onto an image</h2>
Hooray! My borer works on a full size image. My first image sampler and it's crawling with insects. You can see the limitations of the program, it doesn't move up and down much despite my efforts, and it doesn't touch all of the pixels. I'm left scratching my head, a few coffees and we'll try and take that further.
</div>
<script language="Javascript">
var codex = new Array();
for ( var i = 0; i < codex_basic.length; i++ )
codex.push( codex_basic[ i ] );
for ( var i = 0; i < codex_scan.length; i++ )
codex.push( codex_scan[ i ] );
for ( var i = 0; i < codex_touch.length; i++ )
codex.push( codex_touch[ i ] );
var c = document.getElementById("script");
var ctx = c.getContext("2d");
var script = new bexScript();
script.ctx( ctx );
script.unit( 1, 1 );
//script.generate( 32, 32, 10, 10 );
var colors = [
[ 0, 0, 0, 255 ]
];
//var data = getImageData( 'hulkhogan.jpg' );
//script.image( 0, 0, 32, 32, 'hulkhogan.jpg' );
//script.randomize( 0, 0, 32, 32, colors );
script.log();
var borers = new Array();
var sequence = [ 32, 9, 15, 2, 7, 29, 33, 11, 16, 26, 0, 16, 19, 9, 0, 7, 6, 11, 30, 2, 9, 12, 18, 18, 13, 17, 18, 5, 33, 32, 27, 2, 10, 23, 10, 2, 17, 22, 3, 9, 19, 27, 21, 21, 6, 17, 15, 12, 18, 8, 30, 25, 0, 20, 0, 8, 5, 2, 30, 25, 1, 11, 28, 18, 34, 17, 34, 20, 16, 14, 2, 9, 15, 17, 11, 36, 5, 1, 21, 19, 26, 31, 15, 2, 26, 17, 32, 35, 1, 35, 32, 14, 31, 2, 5, 1, 8, 1, 36, 5, 24, 31, 14, 36, 33, 3, 33, 17, 34, 21, 0, 17, 3, 33, 24, 5, 32, 28, 15, 31, 29, 24, 26, 18, 17, 34, 12, 30, 18, 1, 34, 24, 13, 7, 7, 28, 5, 31, 18, 4, 35, 5, 29, 33, 28, 23, 35, 8, 23, 23, 15, 31, 34, 29, 26, 30, 18, 15, 22, 6, 32, 28, 6, 35, 3, 33, 6, 23, 24, 3, 22, 0, 16, 12, 2, 7, 17, 19, 32, 32, 6, 13, 9, 19, 23, 15, 26, 22, 0, 29, 2, 6, 16, 23, 13, 10, 18, 10, 23, 16, 23, 36, 7, 20, 22, 25, 29, 24, 8, 0, 20, 22, 25, 15, 31, 8, 15, 14, 26, 10, 20, 17, 31, 13, 26, 17, 19, 32, 35, 7, 9, 7, 30, 16, 8, 35, 22, 1, 6, 2, 4, 24, 6, 35, 0, 18, 15, 2, 14, 6 ];
var borer;
borer = new bexBorer();
borer.attach( script );
borer.canvas( 'borer0' );
borer.from( 30150 );
borer.feed( sequence );
borer.program( codex );
borers.push( borer );
setTimeout( frame, 30 );
function frame()
{
for ( var x = 0; x < borers.length; x++ )
{
var b = borers[ x ];
for ( var i = 0; i < 500; i++ )
b.play();
b.paint();
console.log( b );
}
//console.log( 'script=', script );
if ( script.changed )
script.paint();
//console.log( 'script after paint=', script );
setTimeout( frame, 30 );
}
loadimage();
function loadimage()
{
var canvas = document.getElementById( 'image' ),
base_image = new Image();
base_image.src = "picture4.jpg";
base_image.onload = function(){
console.log( base_image );
canvas.width = base_image.naturalWidth;
canvas.height = base_image.naturalHeight;
context = canvas.getContext('2d');
context.drawImage( base_image, 0, 0 );
var data = context.getImageData( 0, 0, base_image.naturalWidth, base_image.naturalHeight );
context.clearRect( 0, 0, base_image.naturalWidth, base_image.naturalHeight );
canvas.width = 0;
canvas.height = 0;
script.image( 0, 0, 300, 200, data );
//script.paint();
/*
//console.log( data );
var scaleX = 200;
var scaleY = 300;
canvas.width = 200;
canvas.height = 300;
context.drawImage( base_image,
0, 0,
200,
300 );
*/
}
}
</script>
</body>
</html>