Skip to content

Commit 506317c

Browse files
author
Lauren McCarthy
committed
adding web editor to site
1 parent e2e50ad commit 506317c

File tree

121 files changed

+17764
-184
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

121 files changed

+17764
-184
lines changed

‎dist/assets/learn/curves/bezier/embed.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<head>
2+
<script language="javascript" src="../../../js/p5.min.js"></script>
3+
<!-- uncomment lines below to include extra p5 libraries -->
4+
<script language="javascript" src="../../../js/p5.dom.min.js"></script>
5+
<!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
6+
<script language="javascript" src="sketch.js"></script>
7+
<!-- this line removes any default padding and style. you might only need one of these values set. -->
8+
<style>
9+
body {
10+
padding: 0;
11+
margin: 0;
12+
}
13+
</style>
14+
</head>
15+
16+
<body>
17+
</body>

‎dist/assets/learn/curves/bezier/sketch.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
var x1 = 100;
2+
var y1 = 150;
3+
var x2 = 200;
4+
var y2 = 150;
5+
var x3 = 50;
6+
var y3 = 50;
7+
var x4 = 250;
8+
var y4 = 50;
9+
var d1 = false;
10+
var d2 = false;
11+
var d4 = false;
12+
var d3 = false;
13+
14+
function setup() {
15+
createCanvas(400, 400);
16+
}
17+
18+
function draw() {
19+
background(255);
20+
ellipse(x1, y1, 10, 10); // endpoints of curve
21+
ellipse(x2, y2, 10, 10);
22+
fill(255, 0, 0);
23+
ellipse(x3, y3, 10, 10); // control points
24+
ellipse(x4, y4, 10, 10);
25+
noFill();
26+
stroke(0);
27+
bezier(x1, y1, x3, y3, x4, y4, x2, y2);
28+
29+
noStroke();
30+
31+
fill(0, 0, 255, 100);
32+
text('(' + x1 + ',' + y1 + ')', x1, y1);
33+
text('(' + x2 + ',' + y2 + ')', x2, y2);
34+
text('(' + x3 + ',' + y3 + ')', x3, y3);
35+
text('(' + x4 + ',' + y4 + ')', x4, y4);
36+
37+
if (d1) {
38+
x1 = mouseX;
39+
y1 = mouseY;
40+
}
41+
if (d2) {
42+
x2 = mouseX;
43+
y2 = mouseY;
44+
}
45+
if (d3) {
46+
x3 = mouseX;
47+
y3 = mouseY;
48+
}
49+
if (d4) {
50+
x4 = mouseX;
51+
y4 = mouseY;
52+
}
53+
}
54+
55+
function mouseDragged() {
56+
if (dist(mouseX, mouseY, x1, y1) < 10) {
57+
d1 = true;
58+
}
59+
if (dist(mouseX, mouseY, x2, y2) < 10) {
60+
d2 = true;
61+
}
62+
if (dist(mouseX, mouseY, x3, y3) < 10) {
63+
d3 = true;
64+
}
65+
if (dist(mouseX, mouseY, x4, y4) < 10) {
66+
d4 = true;
67+
}
68+
}
69+
70+
function mouseReleased() {
71+
d1 = false;
72+
d2 = false;
73+
d3 = false;
74+
d4 = false;
75+
}

‎dist/assets/learn/curves/bezier_with_lines/bezier_with_lines.png

2.85 KB
Loading

‎dist/assets/learn/curves/curve_ex/embed.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<head>
2+
<script language="javascript" src="../../../js/p5.min.js"></script>
3+
<!-- uncomment lines below to include extra p5 libraries -->
4+
<script language="javascript" src="../../../js/p5.dom.min.js"></script>
5+
<!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
6+
<script language="javascript" src="sketch.js"></script>
7+
<!-- this line removes any default padding and style. you might only need one of these values set. -->
8+
<style>
9+
body {
10+
padding: 0;
11+
margin: 0;
12+
}
13+
</style>
14+
</head>
15+
16+
<body>
17+
</body>

‎dist/assets/learn/curves/curve_ex/sketch.js

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
var x1 = 80;
2+
var y1 = 80;
3+
var x2 = 160;
4+
var y2 = 120;
5+
var x3 = 200;
6+
var y3 = 200;
7+
var x4 = 120;
8+
var y4 = 240;
9+
var d1 = false;
10+
var d2 = false;
11+
var d4 = false;
12+
var d3 = false;
13+
var d5 = false;
14+
15+
function setup() {
16+
createCanvas(300, 300);
17+
}
18+
19+
function draw() {
20+
background(255);
21+
stroke(0);
22+
curve(x1, y1, x2, y2, x3, y3, x4, y4);
23+
noStroke();
24+
fill(255, 0, 0);
25+
ellipse(x1, y1, 10, 10);
26+
fill(0, 0, 255, 192);
27+
ellipse(x3, y3, 10, 10);
28+
ellipse(x2, y2, 10, 10);
29+
fill(255, 0, 0);
30+
ellipse(x4, y4, 10, 10);
31+
32+
noStroke();
33+
text('(' + x1 + ',' + y1 + ')', x1, y1);
34+
text('(' + x2 + ',' + y2 + ')', x2, y2);
35+
text('(' + x3 + ',' + y3 + ')', x3, y3);
36+
text('(' + x4 + ',' + y4 + ')', x4, y4);
37+
38+
if (d1) {
39+
x1 = mouseX;
40+
y1 = mouseY;
41+
}
42+
if (d2) {
43+
x2 = mouseX;
44+
y2 = mouseY;
45+
}
46+
if (d3) {
47+
x3 = mouseX;
48+
y3 = mouseY;
49+
}
50+
if (d4) {
51+
x4 = mouseX;
52+
y4 = mouseY;
53+
}
54+
}
55+
56+
function mouseDragged() {
57+
if (dist(mouseX, mouseY, x1, y1) < 10) {
58+
d1 = true;
59+
}
60+
if (dist(mouseX, mouseY, x2, y2) < 10) {
61+
d2 = true;
62+
}
63+
if (dist(mouseX, mouseY, x3, y3) < 10) {
64+
d3 = true;
65+
}
66+
if (dist(mouseX, mouseY, x4, y4) < 10) {
67+
d4 = true;
68+
}
69+
if (dist(mouseX, mouseY, x5, y5) < 10) {
70+
d5 = true;
71+
}
72+
}
73+
74+
function mouseReleased() {
75+
d1 = false;
76+
d2 = false;
77+
d3 = false;
78+
d4 = false;
79+
d5 = false;
80+
}

‎dist/download/index.html

Lines changed: 12 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -170,44 +170,26 @@ <h4>CDN</h4>
170170
</div>
171171

172172
<!-- EDITOR -->
173-
<!-- <div class="link_group">
174-
<a name="editor" class="anchor">
175-
<h2>Editor</h2></a>
173+
<div class="link_group">
174+
<a name="editor" class="anchor"><h2>Editor</h2></a>
176175

177-
<p>The p5.js editor is currently in development, try out a beta version of it now. Help out by posting
178-
<a href="https://github.com/processing/p5.js-editor/issues">
179-
feedback and bugs</a>.
180-
</p>
176+
<a class='support_link' href="https://editor.p5js.org">
177+
<div class="download_box">
181178

182-
<a class="editor_link" href="https://github.com/processing/p5.js-editor/releases/download/v[editor_version]/p5-mac.zip">
183-
<div class="download_box half_box">
184-
<h4>Mac OS X</h4>
185-
<p>p5 editor
186-
<br>Version
187-
<span class="editor_version"></span></p>
188-
</div>
189-
</a>
179+
<h4>p5.js Web Editor</h4>
190180

191-
<a class="editor_link" href="https://github.com/processing/p5.js-editor/releases/download/v[editor_version]/p5-win.zip">
192-
<div class="download_box half_box">
193-
<h4>Windows</h4>
194-
<p>p5 editor
195-
<br>Version
196-
<span class="editor_version"></span></p>
197-
</div>
198-
</a>
181+
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
182+
width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve"><path stroke-miterlimit="10" d="M16.909,10.259l8.533-2.576l1.676,5.156l-8.498,2.899l5.275,7.48
183+
l-4.447,3.225l-5.553-7.348L8.487,26.25l-4.318-3.289l5.275-7.223L0.88,12.647l1.678-5.16l8.598,2.771V1.364h5.754V10.259z"/>
184+
</svg>
185+
186+
<p>Start coding using the p5.js Web Editor, no setup required!</p>
199187

200-
<a class="editor_link" href="https://github.com/processing/p5.js-editor/releases/download/v[editor_version]/p5-linux.zip">
201-
<div class="download_box half_box">
202-
<h4>Linux</h4>
203-
<p>p5 editor
204-
<br>Version
205-
<span class="editor_version"></span></p>
206188
</div>
207189
</a>
208190

209191
<div class="spacer"></div>
210-
</div> -->
192+
</div>
211193

212194
<!-- ETC -->
213195
<div class="link_group">

‎dist/es/download/index.html

Lines changed: 12 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -170,44 +170,26 @@ <h4>CDN</h4>
170170
</div>
171171

172172
<!-- EDITOR -->
173-
<!-- <div class="link_group">
174-
<a name="editor" class="anchor">
175-
<h2>Editor</h2></a>
173+
<div class="link_group">
174+
<a name="editor" class="anchor"><h2>Editor</h2></a>
176175

177-
<p>El editor de p5.js se encuentra en desarrollo, prueba una versión beta ahora. Ayuda con
178-
<a href="https://github.com/processing/p5.js-editor/issues">
179-
retroalimentación y reportando errores</a>.
180-
</p>
176+
<a class='support_link' href="https://editor.p5js.org">
177+
<div class="download_box">
181178

182-
<a class="editor_link" href="https://github.com/processing/p5.js-editor/releases/download/v[editor_version]/p5-mac.zip">
183-
<div class="download_box half_box">
184-
<h4>Mac OS X</h4>
185-
<p>Editor de p5
186-
<br>Versión
187-
<span class="editor_version"></span></p>
188-
</div>
189-
</a>
179+
<h4>p5.js Web Editor</h4>
190180

191-
<a class="editor_link" href="https://github.com/processing/p5.js-editor/releases/download/v[editor_version]/p5-win.zip">
192-
<div class="download_box half_box">
193-
<h4>Windows</h4>
194-
<p>Editor de p5
195-
<br>Versión
196-
<span class="editor_version"></span></p>
197-
</div>
198-
</a>
181+
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
182+
width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve"><path stroke-miterlimit="10" d="M16.909,10.259l8.533-2.576l1.676,5.156l-8.498,2.899l5.275,7.48
183+
l-4.447,3.225l-5.553-7.348L8.487,26.25l-4.318-3.289l5.275-7.223L0.88,12.647l1.678-5.16l8.598,2.771V1.364h5.754V10.259z"/>
184+
</svg>
185+
186+
<p>Start coding using the p5.js Web Editor, no setup required!</p>
199187

200-
<a class="editor_link" href="https://github.com/processing/p5.js-editor/releases/download/v[editor_version]/p5-linux.zip">
201-
<div class="download_box half_box">
202-
<h4>Linux</h4>
203-
<p>Editor de p5
204-
<br>Versión
205-
<span class="editor_version"></span></p>
206188
</div>
207189
</a>
208190

209191
<div class="spacer"></div>
210-
</div> -->
192+
</div>
211193

212194
<!-- ETC -->
213195
<div class="link_group">

‎dist/es/get-started/index.html

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -113,10 +113,7 @@ <h1 class='visuallyhidden'>Language Settings</h1>
113113

114114
<h1>Empezar</h1>
115115

116-
<p>Esta página te guía a través del proceso de configuración de un proyecto con p5.js y hacer tu primer bosquejo.
117-
Los usuarios de Processing pueden revisar el
118-
<a href= https://github.com/processing/p5.js/wiki/Transici%C3%B3n-desde-Processing>
119-
Tutorial de transición desde Processing</a>.
116+
<p>Esta página te guía a través del proceso de configuración de un proyecto con p5.js y hacer tu primer bosquejo. If you'd like to start with the new <a href="https://editor.p5js.org" target="_blank">p5.js Web Editor</a>, you can jump down to <a href="#sketch">Your First Sketch</a>.
120117
</p>
121118

122119
<a class="anchor" href="#file-setup">
@@ -189,8 +186,8 @@ <h2 class="start-element tutorial-btn" id="environment">
189186
<h2 class="start-element tutorial-btn" id="sketch">Tu primer bosquejo</h2>
190187
</a>
191188

192-
<div class = "info" id = "sketch">
193-
189+
<div class="info" id="sketch">
190+
<p>Los usuarios de Processing pueden revisar el <a href=https://github.com/processing/p5.js/wiki/Transici%C3%B3n-desde-Processing>Tutorial de transición desde Processing</a>.</p>
194191
<p>En tu editor, escribe lo siguiente:</p>
195192

196193
<pre><code class="language-javascript">

‎dist/es/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -108,15 +108,15 @@ <h1 class='visuallyhidden'>Language Settings</h1>
108108
<div id="content">
109109
<section id="home" role="region" label="main content">
110110
<p>
111-
¡Hola! p5.js es una biblioteca de JavaScript creada con el objetivo original de <a href = "http://processing.org">Processing</a>, hacer la programación accesible a artistas, diseñadores, educadores y principiantes, reinterpretándola para la web actual.
111+
¡Hola! p5.js es una biblioteca de JavaScript creada con el objetivo original de <a href ="http://processing.org" target="_blank">Processing</a>, hacer la programación accesible a artistas, diseñadores, educadores y principiantes, reinterpretándola para la web actual.
112112
</p>
113113

114114
<p>
115115
Usando la metáfora original de bosquejar con software, p5.js posee un conjunto completo de funcionalidades para dibujar. Sin embargo, no estás limitado solo a dibujar en tu lienzo, puedes tomar la página completa de tu navegador como tu bosquejo. Para esto, p5.js posee <a href="libraries/"> bibliotecas </a> adicionales que hacen sencillo
116-
<a href="http://hello.p5js.org">interactuar </a> con otros objetos HTML5, incluyendo texto, entrada del usuario, video, cámara y sonido. </p>
116+
<a href="examples/">interactuar </a> con otros objetos HTML5, incluyendo texto, entrada del usuario, video, cámara y sonido. </p>
117117
<p>
118118

119-
<p>p5.js es una nueva interpretación, no una emulación o un puerto, y está en activo desarrollo. Un ambiente oficial de edición será lanzado pronto, ¡además de muchas otras características adicionales!</p>
119+
<p style="margin-bottom:2em">p5.js es una nueva interpretación, no una emulación o un puerto, y está en activo desarrollo. <a href="https://editor.p5js.org" target="_blank">Try it out now in the new p5.js Web Editor!</a></p>
120120

121121
</section>
122122
</div>

0 commit comments

Comments
 (0)