-
Notifications
You must be signed in to change notification settings - Fork 0
/
learn.html
204 lines (188 loc) · 8.17 KB
/
learn.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
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
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generative Art using p5.js</title>
<link rel="stylesheet" type="text/css" href="css/learn_styles.css">
<script src="js/jquery/jquery-3.5.1.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="css/indexStyles.css"> -->
</head>
<body>
<div class="starfield">
</div>
<section class="et-hero-tabs">
<div class="et-hero-tabs-container">
<a class="et-hero-tab" href="#gen-tab">Generative Art.js</a>
<a class="et-hero-tab" href="#weave-tab">Weave.js</a>
<a class="et-hero-tab" href="#p5-tab">P5.js</a>
<a class="et-hero-tab" href="#random-tab">Randomness</a>
<a class="et-hero-tab" href="#noise-tab">Noise</a>
<a class="et-hero-tab" href="#pnoise-tab">Perlin Noise</a>
<a class="et-hero-tab-link" href="index.html">Home</a>
<span class="et-hero-tab-slider"></span>
</div>
</section>
<section class="inf-section" id="gen-tab">
<div id="container">
<div class="product-details">
<h1>What is Generative Art?</h1>
<p class="information"><strong style="color: #ddd;">Generative Art</strong> is basically programming a computer
to create a piece of art using rules and
formulas with a pinch of <i>"controlled randomness" </i> to make it unique.<br> In this project we use <a href="p5-tab">p5.js</a>
as a platform to create art. Feel free to explore the
different aspects this project revolves around.
<br><br><a href="weave.html">Try Weave.js Here</a></p>
</div>
<div class="product-image">
<img src="images/genart.jpg">
<!-- <div class="info">
<h2>The Description</h2>
<ul>
<li><strong>Sun Needs: </strong>Full Sun</li>
<li><strong>Soil Needs: </strong>Damp</li>
<li><strong>Zones: </strong>9 - 11</li>
<li><strong>Height: </strong>2 - 3 feet</li>
<li><strong>Blooms in: </strong>Mid‑Summer - Mid‑Fall</li>
<li><strong>Features: </strong>Tolerates heat</li>
</ul>
</div> -->
</div>
</div>
</section>
<section class="inf-section" id="weave-tab">
<div id="container">
<div class="product-details">
<h1>Weave.js</h1>
<p><strong style="color: #ddd;">Weave.js</strong> is a sketch from scratch using p5.js heavily inspired by <a
href="www.weavesilk.com">WeaveSilk</a>. This sketch is the main feature of this project as it uses and
utilizes almost all of the subtopics that are discussed below.
<br>This sketch is a <a href="index.html#tab-kscope">kaleidoscope</a> that uses <a href="index.html#tab-bezier">bezier curves</a>
as the brush and are generated using <a href="index.html#tab-pnoise">noise</a> for smooth transitions in-between frames
which as a result creates unique and beautiful patterns.</p>
</div>
<div class="product-image" style="padding-top:3%;">
<img src="images/weaveGif.gif">
<!-- <div class="info">
<h2>The Description</h2>
<ul>
<li><strong>Sun Needs: </strong>Full Sun</li>
<li><strong>Soil Needs: </strong>Damp</li>
<li><strong>Zones: </strong>9 - 11</li>
<li><strong>Height: </strong>2 - 3 feet</li>
<li><strong>Blooms in: </strong>Mid‑Summer - Mid‑Fall</li>
<li><strong>Features: </strong>Tolerates heat</li>
</ul>
</div> -->
</div>
</div>
</section>
<section class="inf-section" id="p5-tab">
<div id="container">
<div class="product-details">
<h1>What is p5.js</h1>
<p>p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive
for artists, designers, educators, beginners, and anyone else!. We can create all type of generative art
design using p5.js.
<br><br><a href="https://p5js.org/download/">Download p5.js</a></p>
</div>
<div class="product-image" style="padding-top:8%;">
<img src="images/pFive.jpg">
</div>
</div>
</section>
<section class="inf-section" id="random-tab">
<div id="container">
<div class="product-details">
<h1>Randomness</h1>
<p>"Controlled" randomness eh? It may sound contradictory, but if you are an artist or an art historian,
you know that artists have always sought ways to introduce randomness into their work to stimulate their
creativity. You can see the result of using random() function in the image. We dont user random() for generative art <br>
That's where Noise comes in the play. More about noise below.</p>
</div>
<div class="product-image" style="padding-top:12%;">
<img src="images/random.png">
<!-- <div class="info">
<h2>The Description</h2>
<ul>
<li><strong>Sun Needs: </strong>Full Sun</li>
<li><strong>Soil Needs: </strong>Damp</li>
<li><strong>Zones: </strong>9 - 11</li>
<li><strong>Height: </strong>2 - 3 feet</li>
<li><strong>Blooms in: </strong>Mid‑Summer - Mid‑Fall</li>
<li><strong>Features: </strong>Tolerates heat</li>
</ul>
</div> -->
</div>
</div>
</section>
<section class="inf-section" id="noise-tab">
<div id="container">
<div class="product-details" >
<h1>Noise</h1>
<p>If you have used random() function, you must be familiar to how random it can get. Noise is also a random
function but it remains smooth and organic.
<br> The noise() function in p5.js utilizes perlin noise. More about perlin noise below.
</p>
</div>
<div class="product-image" style="padding-top:8%;">
<img src="images/perlin.png">
<!-- <div class="info">
<h2>The Description</h2>
<ul>
<li><strong>Sun Needs: </strong>Full Sun</li>
<li><strong>Soil Needs: </strong>Damp</li>
<li><strong>Zones: </strong>9 - 11</li>
<li><strong>Height: </strong>2 - 3 feet</li>
<li><strong>Blooms in: </strong>Mid‑Summer - Mid‑Fall</li>
<li><strong>Features: </strong>Tolerates heat</li>
</ul>
</div> -->
</div>
</div>
</section>
<section class="inf-section" id="pnoise-tab">
<div id="container">
<div class="product-details">
<h1>What is perlin noise?</h1>
<p>Created by <a href="https://en.wikipedia.org/wiki/Ken_Perlin">Ken Perlin</a>, Perlin noise was invented for
applications which required semi-random variations with continuous and smooth trajectories. It's used in all
sorts of applications, such as creating terrains and realistic looking textures for video games.
<br><br><a href="https://genekogan.com/code/p5js-perlin-noise/">See how perlin noise works</a></p>
</div>
<div class="product-image" style="padding-top:8%;">
<img src="images/perlin1.png">
<!-- <div class="info">
<h2>The Description</h2>
<ul>
<li><strong>Sun Needs: </strong>Full Sun</li>
<li><strong>Soil Needs: </strong>Damp</li>
<li><strong>Zones: </strong>9 - 11</li>
<li><strong>Height: </strong>2 - 3 feet</li>
<li><strong>Blooms in: </strong>Mid‑Summer - Mid‑Fall</li>
<li><strong>Features: </strong>Tolerates heat</li>
</ul>
</div> -->
</div>
</div>
</section>
<script>
(function drawStars() {
var boxShadow = '';
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight * 8;
console.log(windowWidth + ', ' + windowHeight);
for (var x = 0; x < 800; x++) {
let rW = Math.random();
let rH = Math.random();
let w = windowWidth * rW;
let h = windowHeight * rH;
boxShadow += w + 'px ' + h + 'px 0 0 #fff, ';
}
boxShadow = boxShadow.slice(0, -2);
$('.starfield').css('box-shadow', boxShadow);
})();
</script>
<script src="js/nav-bar.js"></script>
</body>
</html>