You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: _curriculum/00-01_Intro.md
+2-1Lines changed: 2 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -21,11 +21,12 @@ gallery: # Below is for including an image gallery
21
21
22
22
## What is Creative Coding?
23
23
24
-
Computer code is a set of directions we give a computer to carry out commands. When working on a website, a computer programmer tells the computer where to put a button and what that button should do when we click on it. What we code doesn’t only have to be functional; it can make us feel, think, and connect. We can make art with code.
24
+
Computer code is a set of directions we give a computer to carry out commands. When working on a website, a computer programmer tells the computer where to put a button and what that button should do when we click on it. What we code doesn’t only have to be functional; it can make us feel, think, and connect. We can make art with code.
25
25
26
26
We call this creative coding. Coding is a powerful tool for artistic expression because it is dynamic. If you want the colors on the screen to change when the user clicks a button or if you want an animated scene, code can help you bring those ideas to life.
27
27
28
28
With creative coding, artists can:
29
+
29
30
- Draw pictures that move and react
30
31
- Make art that changes when people interact with it
31
32
- Use 3D printers to turn digital art into real objects
Close-up view of *Precarious*, interactive digital drawing.
29
+
Close-up view of _Precarious_, interactive digital drawing.
28
30
29
31
This artwork uses cameras to detect how people move. The program draws an outline around that human motion and connects it with other people’s outlines as a series of dots. These dots connect and dance with other people’s dots, creating a constantly changing picture.
Installation view of *Possible, Plausible, Potential*, pen plotter drawing.
45
+
Installation view of _Possible, Plausible, Potential_, pen plotter drawing.
42
46
43
47
This artist wrote code that lets the computer make some creative choices on its own. He told the computer the basic rules (like “stay inside these lines”), but let it decide where to draw each line, making each piece more of a “conversation” between the artist and the computer.
44
48
45
49
> Nóbrega understands his process as one of defining the boundaries in which experiments will take place. The outcomes of these experiments are sometimes unpredictable, which will most likely add up to the process in a feedback loop. The role of the artist ends up being to interpret the results and based on them to redefine the boundaries of the program.
46
50
>
47
51
> \- Filip Visnjic, Creative Applications
48
52
49
-
In other words, the artist sets the rules. The computer follows them, but its choices aren’t always predictable. That creates surprises the artist can respond to.
53
+
In other words, the artist sets the rules. The computer follows them, but its choices aren’t always predictable. That creates surprises the artist can respond to.
- What parts of the art were controlled by the artist? What parts were random?
55
-
- In what way is the computer acting like a collaborator in the creative process?
60
+
- In what way is the computer acting like a collaborator in the creative process?
56
61
57
-
**Tip:**[p5.plotSvg](https://github.com/golanlevin/p5.plotSvg) is a tool that supports p5.js artists to download their sketches as SVG files, making it possible to connect p5.js with pen plotters.
58
-
{: .notice--success}
62
+
**Tip:**[p5.plotSvg](https://github.com/golanlevin/p5.plotSvg) is a tool that supports p5.js artists to download their sketches as SVG files, making it possible to connect p5.js with pen plotters.
Copy file name to clipboardExpand all lines: _curriculum/01-01_Lessons.md
+40-31Lines changed: 40 additions & 31 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,14 +6,17 @@ published: true
6
6
7
7
gallery: # Below is for including an image gallery
8
8
---
9
-
# Lesson Plans & Technical Steps
9
+
10
+
# Getting Started
11
+
10
12
## 1. Setting Up Your Environment
11
13
12
-
To begin writing code using [p5.js](https://p5js.org/), you need to set up the coding environment to write and save your programs. [Processing Foundation](https://processingfoundation.org/) provides the [p5.js Editor](https://editor.p5js.org/), a website where programmers can write, test, share, and remix p5.js programs without needing to download or install a code editor on a computer.
14
+
To begin writing code using [p5.js](https://p5js.org/), you need to set up the coding environment to write and save your programs. [Processing Foundation](https://processingfoundation.org/) provides the [p5.js Editor](https://editor.p5js.org/), a website where programmers can write, test, share, and remix p5.js programs without needing to download or install a code editor on a computer.
13
15
14
16
<iframewidth="560"height="315"src="https://www.youtube.com/embed/MXs1cOlidWs?si=h8uilatDVzeLCl_a"title="YouTube video player"frameborder="0"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"referrerpolicy="strict-origin-when-cross-origin"allowfullscreen></iframe>
15
17
16
18
### What you will need
19
+
17
20
- Access to the internet and the latest version of a desktop browser such as:
18
21
- Chrome (recommended)
19
22
- Firefox (recommended)
@@ -22,65 +25,71 @@ To begin writing code using [p5.js](https://p5js.org/), you need to set up the c
22
25
- A desktop computer, laptop, or Chromebook
23
26
24
27
### 1A. Opening the p5.js Editor
25
-
1. Open the latest version of Chrome or Firefox browser on your computer and visit the [p5.js Editor](https://editor.p5js.org/) website.
28
+
29
+
1. Open the latest version of Chrome or Firefox browser on your computer and visit the [p5.js Editor](https://editor.p5js.org/) website.
26
30
1. Click the “Sign up” link on the top right of the web page.
1. Now that you’ve created an account, which allows you to save and share your work, we’re ready to take a deeper look at [p5.js Editor](https://editor.p5js.org/)’s interface.
54
-
1. You have the option of switching to another language by clicking on "English" in the navigation menu.
55
-
1. You also have the option to make the interface more accessible by clicking on Settings in the toolbar and updating Theme, Text Size, and Accessibility for screen readers.
56
-
1. To view the output of the default code inside the text editor, click the Play button in the top left corner. ![p5.js Editor interface breakdown]({{ "https://github.com/processing/p5.js-website/blob/main/src/content/tutorials/images/introduction/p5_editor_running_a_sketch.png?raw=true" | relative_url }})
61
+
1. You have the option of switching to another language by clicking on "English" in the navigation menu.
62
+
1. You also have the option to make the interface more accessible by clicking on Settings in the toolbar and updating Theme, Text Size, and Accessibility for screen readers.
63
+
1. To view the output of the default code inside the text editor, click the Play button in the top left corner. ![p5.js Editor interface breakdown]({{ "https://github.com/processing/p5.js-website/blob/main/src/content/tutorials/images/introduction/p5_editor_running_a_sketch.png?raw=true" | relative_url }})
57
64
1. After clicking the Play button, you can expect to see a light gray canvas, measuring 400 x 400 pixels, appear in the preview area. We invite you to update one of the “400” numbers inside the text editor to a smaller number, click on the Play button again, and see what happens! 😃
58
65
1. Last but not least, the [p5.js Editor](https://editor.p5js.org/) defaults to using [p5.js](https://p5js.org/) version 1.11.5. However, we will be covering some exciting and new p5.js features in this lesson plan, so please change your settings to switch over to the latest version of p5.js.
59
-
![p5.js Editor version switcher]({{ "/assets/images/ui/version_switcher_1.png" | relative_url }})
60
-
![p5.js Editor version switcher]({{ "/assets/images/ui/version_switcher_2.png" | relative_url }})
61
-
![p5.js Editor version switcher]({{ "/assets/images/ui/version_switcher_3.png" | relative_url }})
66
+
![p5.js Editor version switcher]({{ "/assets/images/ui/version_switcher_1.png" | relative_url }})
67
+
![p5.js Editor version switcher]({{ "/assets/images/ui/version_switcher_2.png" | relative_url }})
68
+
![p5.js Editor version switcher]({{ "/assets/images/ui/version_switcher_3.png" | relative_url }})
62
69
63
70
### 1D. Renaming, saving, and sharing sketches
64
-
1. By default, the [p5.js Editor](https://editor.p5js.org/) will generate a playful name for your first sketch. You can rename your sketch by clicking on the pencil icon above the text editor and typing in a name for your project. ![Renaming a sketch]({{ "https://github.com/processing/p5.js-website/blob/main/src/content/tutorials/images/introduction/p5_editor_naming_a_sketch.png?raw=true" | relative_url }})
65
-
1. Save projects by clicking on File in the top toolbar and selecting Save. Alternatively, you can use the shortcut keys Control+S (PC) or Command+S (Mac). ![Saving a sketch]({{ "https://github.com/processing/p5.js-website/blob/main/src/content/tutorials/images/introduction/p5_editor_saving_a_sketch.png?raw=true" | relative_url }}) ![Saved notification]({{ "https://github.com/processing/p5.js-website/blob/main/src/content/tutorials/images/introduction/p5_editor_saved_sketch_notification.png?raw=true" | relative_url }})
71
+
72
+
1. By default, the [p5.js Editor](https://editor.p5js.org/) will generate a playful name for your first sketch. You can rename your sketch by clicking on the pencil icon above the text editor and typing in a name for your project. ![Renaming a sketch]({{ "https://github.com/processing/p5.js-website/blob/main/src/content/tutorials/images/introduction/p5_editor_naming_a_sketch.png?raw=true" | relative_url }})
73
+
1. Save projects by clicking on File in the top toolbar and selecting Save. Alternatively, you can use the shortcut keys Control+S (PC) or Command+S (Mac). ![Saving a sketch]({{ "https://github.com/processing/p5.js-website/blob/main/src/content/tutorials/images/introduction/p5_editor_saving_a_sketch.png?raw=true" | relative_url }}) ![Saved notification]({{ "https://github.com/processing/p5.js-website/blob/main/src/content/tutorials/images/introduction/p5_editor_saved_sketch_notification.png?raw=true" | relative_url }})
66
74
67
75
**Tip:** Make sure you are logged in to your account, or you will not be able to save the sketch. Saving projects frequently helps ensure that code isn’t lost if something happens to your computer, browser, or internet connection while you're coding.
68
76
{: .notice--success}
69
77
70
78
### 1E. Sharing, downloading, and deleting your sketches
71
-
1. Once your project is saved, you can share it! Click on File in the navigation menu, select Share, and copy one of the links provided to share your project in Embed, Fullscreen, and Edit modes.
72
-
1. If you share your project link with a teacher or classmate, you are giving them the permission to view all of your sketches stored on the [p5.js Editor](https://editor.p5js.org/). This is because all sketches stored in the [p5.js Editor](https://editor.p5js.org/) are publicly viewable. Additionally, it’s also possible for your sketches to show up in search engine results.
79
+
80
+
1. Once your project is saved, you can share it! Click on File in the navigation menu, select Share, and copy one of the links provided to share your project in Embed, Fullscreen, and Edit modes.
81
+
1. If you share your project link with a teacher or classmate, you are giving them the permission to view all of your sketches stored on the [p5.js Editor](https://editor.p5js.org/). This is because all sketches stored in the [p5.js Editor](https://editor.p5js.org/) are publicly viewable. Additionally, it’s also possible for your sketches to show up in search engine results.
73
82
1. There are numerous benefits to projects being shared publicly on the Internet – p5.js programmers can draw inspiration from each other’s creativity and exchange valuable knowledge.
74
83
1. However, there are also risks associated with publicly available projects. You should always be cautious about the kinds of personal information you include in your projects, and avoid saving sensitive data, including but not limited to:
75
-
1. Your name
76
-
1. Location
77
-
1. Phone number
78
-
1. Email address
79
-
1. ID number
80
-
1. Biometric data - this is data that could identify you, like a picture of your face, a sound clip of your voice, etc. Sharing sensitive data like this could put you at risk for dangers like identity theft.
81
-
1. If you’d like to remove a sketch from the public’s view, you can download the sketch to your local computer and delete it from your [p5.js Editor](https://editor.p5js.org/) account. Click on File, select Open, find the sketch you hope to remove, then click on the downward triangle arrow on the right-hand side and select Download.
1. Biometric data - this is data that could identify you, like a picture of your face, a sound clip of your voice, etc. Sharing sensitive data like this could put you at risk for dangers like identity theft.
90
+
1. If you’d like to remove a sketch from the public’s view, you can download the sketch to your local computer and delete it from your [p5.js Editor](https://editor.p5js.org/) account. Click on File, select Open, find the sketch you hope to remove, then click on the downward triangle arrow on the right-hand side and select Download.
1. Once the sketch is downloaded to your computer, select "Delete" from the same menu. And voila! You’re now saving your sketches more securely by creating a physical backup of your files on your computer.
86
-
1. Interested in learning more about using [p5.js](https://p5js.org/) with a desktop code editor? Check out [Processing Foundation](https://processingfoundation.org/)’s [Setting Up Your Environment tutorial](https://p5js.org/tutorials/setting-up-your-environment/).
95
+
1. Interested in learning more about using [p5.js](https://p5js.org/) with a desktop code editor? Check out [Processing Foundation](https://processingfoundation.org/)’s [Setting Up Your Environment tutorial](https://p5js.org/tutorials/setting-up-your-environment/).
0 commit comments