-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy paththe_sun001.html
81 lines (66 loc) · 1.62 KB
/
the_sun001.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
<!DOCTYPE html>
<html>
<head>
<title>A p5.js sketch</title>
<link rel = "stylesheet" type = "text/css" href = "style/style_sketch.css">
</head>
<body>
<script src = "p5/p5.min.js"></script>
<script src = "javascript/p5utilities.js"></script>
<!-- here is the javascript code using p5.js for the sketch: -->
<script>
//THE SUN 001
//GLOBAL VARS
var radius = 50;
var layers = 5;
var lines_each = 200;
var weight = 1;
var origin_set = [0, 0]
//SETUP
function setup() {
// initialize the canvas & graphics state:
canvas = createCanvas(windowWidth, windowHeight);
translate(width/2, height/2); //this is what (0,0) is considered to be
background(255);
strokeWeight(weight);
strokeCap(SQUARE);
stroke(0);
fill(0);
origin_set = [width/2, height/2];
drawImage(0,0);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
origin_set = [width/2, height/2]
background(255);
drawImage(origin_set[0], origin_set[1]);
}
//FUNCTIONS
//(x,y) is for the desired center position of this generated image
function drawImage(x,y){
//this loop is for each LAYER
for(let q=0; q<layers; q++){
//this loop is for each LINE
for(let w=0; w<lines_each; w++){
//randomize a new angle for the next line
let theta = random(TWO_PI);
//draw the next line
line(
//from
q * radius * sin(theta) + x,
q * radius * cos(theta) + y,
//to
(q+1) * radius * sin(theta) + x,
(q+1) * radius * cos(theta) + y
);
}
}
}
function mouseReleased(){
//if the mouse is pressed down and then released, re-draw the image
background(255);
drawImage(origin_set[0], origin_set[1]);
}
</script>
</body>
</html>