Skip to content

Commit 3f1f857

Browse files
lmccartlmccart
committed
Merge branch 'master' of github.com:processing/p5.js-website
2 parents 4c174f1 + 1b6a082 commit 3f1f857

35 files changed

+571
-205
lines changed

‎offline-reference/extra/css/main.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@
8989
padding: 0.4em;
9090
margin: 1em 1.75em 0 0;
9191
width: 18.65em;
92+
float: left;
9293
color: #333 !important;
9394
height:7.45em;
9495
position: relative;

‎src/assets/css/main.css

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,7 @@
224224
padding: 0.4em;
225225
margin: 0 1.75em 0 0;
226226
width: 18.65em;
227+
float: left;
227228
color: #333 !important;
228229
height: 7.45em;
229230
position: relative;
@@ -1224,6 +1225,14 @@ img.gallery-img {
12241225
transition: all 0.3s;
12251226
}
12261227

1228+
@media (max-width: 500px) {
1229+
#showcase-page .nominate a,
1230+
#showcase-page .nominate a:visited {
1231+
padding: 0.4em 0.3em;
1232+
font: 1.3rem "Montserrat", sans-serif;
1233+
}
1234+
}
1235+
12271236
#showcase-page .nominate a:hover {
12281237
top: 4px;
12291238
left: 4px;
@@ -2420,18 +2429,39 @@ iframe {
24202429
transition: border-bottom 30ms linear;
24212430
width: 13em;
24222431
}
2423-
.email-octopus-form-row-subscribe button, .email-octopus-form-row-hp {
2432+
2433+
.email-octopus-form-row-hp {
24242434
position: absolute;
24252435
left: -5000px;
24262436
}
2437+
2438+
.email-octopus-form-row button {
2439+
border: 1px solid #ED225D;
2440+
color: #ED225D;
2441+
padding: 0.4em 0.6em;
2442+
margin: 1em 0 0 0;
2443+
font-family: "Montserrat", sans-serif;
2444+
display: block;
2445+
}
2446+
2447+
.email-octopus-form-row button:hover {
2448+
background-color: #ED225D;
2449+
color: white;
2450+
}
2451+
24272452
.email-octopus-email-address::-webkit-input-placeholder { color:#ABABAB; }
24282453
.email-octopus-email-address::-moz-placeholder { color:#ABABAB; }
24292454
.email-octopus-email-address:-moz-placeholder { color:#ABABAB; }
24302455
.email-octopus-email-address:-ms-input-placeholder { color:#ABABAB; }
24312456

24322457
@media (min-width: 720px) {
24332458
.email-octopus-email-address {
2434-
width: 20em;
2459+
width: 16em;
24352460
}
24362461

2462+
.email-octopus-form-row button {
2463+
margin: 0;
2464+
margin-left: 0.5em;
2465+
display: inline;
2466+
}
24372467
}

‎src/data/examples/assets/bubbles.csv

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
x,y,diameter,name
2+
160,103,43.19838,Happy
3+
372,137,52.42526,Sad
4+
273,235,61.14072,Joyous
5+
121,179,44.758068,Melancholy

‎src/data/examples/en/22_Advanced_Data/01_Load_Saved_Table.js

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/*
2+
* @name Load Saved Table
3+
* @description Create a Bubble class, instantiate multiple bubbles using data from
4+
* a csv file, and display results on the screen.
5+
* Because the web browsers differ in where they save files, we do not make use of
6+
*
7+
* Based on Daniel Shiffman's <a href="https://processing.org/examples/loadsavetable.html">LoadSaveTable Example</a> for Processing.
8+
*/
9+
10+
// Bubble class
11+
class Bubble {
12+
constructor(x, y, diameter, name) {
13+
this.x = x;
14+
this.y = y;
15+
this.diameter = diameter;
16+
this.radius = diameter / 2;
17+
this.name = name;
18+
19+
this.over = false;
20+
}
21+
22+
// Check if mouse is over the bubble
23+
rollover(px, py) {
24+
let d = dist(px, py, this.x, this.y);
25+
this.over = d < this.radius;
26+
}
27+
28+
// Display the Bubble
29+
display() {
30+
stroke(0);
31+
strokeWeight(0.8);
32+
noFill();
33+
ellipse(this.x, this.y, this.diameter, this.diameter);
34+
if (this.over) {
35+
fill(0);
36+
textAlign(CENTER);
37+
text(this.name, this.x, this.y + this.radius + 20);
38+
}
39+
}
40+
}
41+
42+
let table; // Global object to hold results from the loadTable call
43+
let bubbles = []; // Global array to hold all bubble objects
44+
45+
// Put any asynchronous data loading in preload to complete before "setup" is run
46+
function preload() {
47+
table = loadTable("assets/bubbles.csv", "header");
48+
}
49+
50+
// Convert saved Bubble data into Bubble Objects
51+
function loadData() {
52+
const bubbleData = table.getRows();
53+
// The size of the array of Bubble objects is determined by the total number of rows in the CSV
54+
const length = table.getRowCount();
55+
56+
for (let i = 0; i < length; i++) {
57+
// Get position, diameter, name,
58+
const x = bubbleData[i].getNum("x");
59+
const y = bubbleData[i].getNum("y");
60+
const diameter = bubbleData[i].getNum("diameter");
61+
const name = bubbleData[i].getString("name");
62+
63+
// Put object in array
64+
bubbles.push(new Bubble(x, y, diameter, name));
65+
}
66+
}
67+
68+
// Create a new Bubble each time the mouse is clicked.
69+
function mousePressed() {
70+
// Create a new row
71+
let row = table.addRow();
72+
73+
let name = "New Bubble";
74+
let diameter = random(40, 80);
75+
76+
// Set the values of that row
77+
row.setNum("x", mouseX);
78+
row.setNum("y", mouseY);
79+
row.setNum("diameter", diameter);
80+
row.setString("name", name);
81+
82+
bubbles.push(new Bubble(mouseX, mouseY, diameter, name));
83+
84+
// If the table has more than 10 rows
85+
if (table.getRowCount() > 10) {
86+
// Delete the oldest row
87+
table.removeRow(0);
88+
bubbles.shift();
89+
}
90+
}
91+
92+
function setup() {
93+
createCanvas(640, 360);
94+
loadData();
95+
}
96+
97+
function draw() {
98+
background(255);
99+
100+
// Display all bubbles
101+
for (let i = 0; i < bubbles.length; i++) {
102+
bubbles[i].display();
103+
bubbles[i].rollover(mouseX, mouseY);
104+
}
105+
106+
// Label directions at bottom
107+
textAlign(LEFT);
108+
fill(0);
109+
text("Click to add bubbles.", 10, height - 10);
110+
}

‎src/data/examples/es/22_Advanced_Data/01_Load_Saved_Table.js

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/*
2+
* @name Load Saved Table
3+
* @description Create a Bubble class, instantiate multiple bubbles using data from
4+
* a csv file, and display results on the screen.
5+
* Because the web browsers differ in where they save files, we do not make use of
6+
*
7+
* Based on Daniel Shiffman's <a href="https://processing.org/examples/loadsavetable.html">LoadSaveTable Example</a> for Processing.
8+
*/
9+
10+
// Bubble class
11+
class Bubble {
12+
constructor(x, y, diameter, name) {
13+
this.x = x;
14+
this.y = y;
15+
this.diameter = diameter;
16+
this.radius = diameter / 2;
17+
this.name = name;
18+
19+
this.over = false;
20+
}
21+
22+
// Check if mouse is over the bubble
23+
rollover(px, py) {
24+
let d = dist(px, py, this.x, this.y);
25+
this.over = d < this.radius;
26+
}
27+
28+
// Display the Bubble
29+
display() {
30+
stroke(0);
31+
strokeWeight(0.8);
32+
noFill();
33+
ellipse(this.x, this.y, this.diameter, this.diameter);
34+
if (this.over) {
35+
fill(0);
36+
textAlign(CENTER);
37+
text(this.name, this.x, this.y + this.radius + 20);
38+
}
39+
}
40+
}
41+
42+
let table; // Global object to hold results from the loadTable call
43+
let bubbles = []; // Global array to hold all bubble objects
44+
45+
// Put any asynchronous data loading in preload to complete before "setup" is run
46+
function preload() {
47+
table = loadTable("assets/bubbles.csv", "header");
48+
}
49+
50+
// Convert saved Bubble data into Bubble Objects
51+
function loadData() {
52+
const bubbleData = table.getRows();
53+
// The size of the array of Bubble objects is determined by the total number of rows in the CSV
54+
const length = table.getRowCount();
55+
56+
for (let i = 0; i < length; i++) {
57+
// Get position, diameter, name,
58+
const x = bubbleData[i].getNum("x");
59+
const y = bubbleData[i].getNum("y");
60+
const diameter = bubbleData[i].getNum("diameter");
61+
const name = bubbleData[i].getString("name");
62+
63+
// Put object in array
64+
bubbles.push(new Bubble(x, y, diameter, name));
65+
}
66+
}
67+
68+
// Create a new Bubble each time the mouse is clicked.
69+
function mousePressed() {
70+
// Create a new row
71+
let row = table.addRow();
72+
73+
let name = "New Bubble";
74+
let diameter = random(40, 80);
75+
76+
// Set the values of that row
77+
row.setNum("x", mouseX);
78+
row.setNum("y", mouseY);
79+
row.setNum("diameter", diameter);
80+
row.setString("name", name);
81+
82+
bubbles.push(new Bubble(mouseX, mouseY, diameter, name));
83+
84+
// If the table has more than 10 rows
85+
if (table.getRowCount() > 10) {
86+
// Delete the oldest row
87+
table.removeRow(0);
88+
bubbles.shift();
89+
}
90+
}
91+
92+
function setup() {
93+
createCanvas(640, 360);
94+
loadData();
95+
}
96+
97+
function draw() {
98+
background(255);
99+
100+
// Display all bubbles
101+
for (let i = 0; i < bubbles.length; i++) {
102+
bubbles[i].display();
103+
bubbles[i].rollover(mouseX, mouseY);
104+
}
105+
106+
// Label directions at bottom
107+
textAlign(LEFT);
108+
fill(0);
109+
text("Click to add bubbles.", 10, height - 10);
110+
}

‎src/data/examples/zh-Hans/05_Image/00_Load_and_Display_Image.js

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
/*
2-
* @name Load and Display Image
3-
* @description Images can be loaded and displayed to the screen at their
4-
* actual size or any other size.
5-
* <p><em><span class="small"> To run this example locally, you will need an
6-
* image file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">
7-
* local server</a>.</span></em></p>
2+
* @name 加载(Load)和显示(Display)图像
3+
* @description 图像可以以原图大小或自定义大小被加载和显示。
4+
* <p><em><span class="small">要在本地运行此范例，您需要一个图像文件，并运行在<a href="https://github.com/processing/p5.js/wiki/Local-server">
5+
* 本地伺服器</a>上。</span></em></p>
86
97
*/
10-
let img; // Declare variable 'img'.
8+
let img; // 声明变量 'img'
119

1210
function setup() {
1311
createCanvas(720, 400);
14-
img = loadImage('assets/moonwalk.jpg'); // Load the image
12+
img = loadImage('assets/moonwalk.jpg'); // 加载图像
1513
}
1614

1715
function draw() {
18-
// Displays the image at its actual size at point (0,0)
16+
// 在坐标(0, 0)，显示原图大小的图像
1917
image(img, 0, 0);
20-
// Displays the image at point (0, height/2) at half size
18+
// 在坐标(0, 高度/2)，显示一半原图大小的图像
2119
image(img, 0, height / 2, img.width / 2, img.height / 2);
2220
}

‎src/data/examples/zh-Hans/05_Image/01_Background_Image.js

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
/*
2-
* @name Background Image
3-
* @description This example presents the fastest way to load a
4-
* background image. To load an image as the background,
5-
* it must be the same width and height as the program.
6-
* <p><em><span class="small"> To run this example locally, you will need an
7-
* image file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">
8-
* local server</a>.</span></em></p>
2+
* @name 背景图像
3+
* @description 此范例展示了最快加载背景图像的方法。
4+
* 若需将一张图像作为背景，它必须和程序有相同的宽度和高度。
5+
* <p><em><span class="small">要在本地运行此示例，您需要一个图像文件，并运行在<a href="https://github.com/processing/p5.js/wiki/Local-server">
6+
* 本地伺服器</a>上。</span></em></p>
97
*/
108
let bg;
119
let y = 0;
1210

1311
function setup() {
14-
// The background image must be the same size as the parameters
15-
// into the createCanvas() method. In this program, the size of
16-
// the image is 720x400 pixels.
12+
// 背景图像的大小必须和 createCanvas() 函数中的参数一样。
13+
// 该图像大小为 720x400 像素。
1714
bg = loadImage('assets/moonwalk.jpg');
1815
createCanvas(720, 400);
1916
}

‎src/data/examples/zh-Hans/05_Image/02_Transparency.js

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
11
/*
2-
* @name Transparency
3-
* @description Move the pointer left and right across the image to change its
4-
* position. This program overlays one image over another by modifying the
5-
* alpha value of the image with the tint() function.
6-
* <p><em><span class="small"> To run this example locally, you will need an
7-
* image file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">
8-
* local server</a>.</span></em></p>
2+
* @name 透明度
3+
* @description 左右移动指针（光标）来改变图像位置
4+
* 此程序为一张图像叠加在另一张上，通过tint() 函数来改变它的透明度值(alpha value)。
5+
* <p><em><span class="small">要在本地运行此范例，您需要一个图像文件，并运行在<a href="https://github.com/processing/p5.js/wiki/Local-server">
6+
* 本地伺服器</a>上。</span></em></p>
97
*/
108
let img;
119
let offset = 0;
1210
let easing = 0.05;
1311

1412
function setup() {
1513
createCanvas(720, 400);
16-
img = loadImage('assets/moonwalk.jpg'); // Load an image into the program
14+
img = loadImage('assets/moonwalk.jpg'); // 加载图像
1715
}
1816

1917
function draw() {
20-
image(img, 0, 0); // Display at full opacity
18+
image(img, 0, 0); // 完全不透明
2119
let dx = mouseX - img.width / 2 - offset;
2220
offset += dx * easing;
23-
tint(255, 127); // Display at half opacity
21+
tint(255, 127); // 半透明
2422
image(img, offset, 0);
2523
}

0 commit comments

Comments
 (0)