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: src/data/en.yml
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -665,5 +665,5 @@ showcase:
665
665
credit-casey-louise: "Casey Conchinha, Louise Lessél"
666
666
description-casey-louise: "A resource for learning the what, why, and how of using shaders in p5.js."
667
667
project-moon-xin: "Moving Responsive Posters"
668
-
credit-moon-xin: "Moon Jang, Xin Xin"
668
+
credit-moon-xin: "Moon Jang, Xin Xin, and students"
669
669
description-moon-xin: "Browser-based moving posters that use graphical systems, transformation methods, and p5.js to address the connotations of a word less than 8 letters. Designed by students for a graphic design course (Visual Narrative Systems) at the University of Georgia."
Copy file name to clipboardExpand all lines: src/data/es.yml
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -667,5 +667,5 @@ showcase:
667
667
credit-casey-louise: "Casey Conchinha, Louise Lessél"
668
668
description-casey-louise: "A resource for learning the what, why, and how of using shaders in p5.js."
669
669
project-moon-xin: "Moving Responsive Posters"
670
-
credit-moon-xin: "Moon Jang, Xin Xin"
670
+
credit-moon-xin: "Moon Jang, Xin Xin, and students"
671
671
description-moon-xin: "Browser-based moving posters that use graphical systems, transformation methods, and p5.js to address the connotations of a word less than 8 letters. Designed by students for a graphic design course (Visual Narrative Systems) at the University of Georgia."
Copy file name to clipboardExpand all lines: src/data/zh-Hans.yml
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -665,5 +665,5 @@ showcase:
665
665
credit-casey-louise: "Casey Conchinha, Louise Lessél"
666
666
description-casey-louise: "A resource for learning the what, why, and how of using shaders in p5.js."
667
667
project-moon-xin: "Moving Responsive Posters"
668
-
credit-moon-xin: "Moon Jang, Xin Xin"
668
+
credit-moon-xin: "Moon Jang, Xin Xin, and students"
669
669
description-moon-xin: "Browser-based moving posters that use graphical systems, transformation methods, and p5.js to address the connotations of a word less than 8 letters. Designed by students for a graphic design course (Visual Narrative Systems) at the University of Georgia."
<li><ahref="https://bit.ly/p5shadersexamples"target="_blank">Glitch collection of p5.js shader examples</a></li>
37
+
</ul>
38
+
</section>
39
39
</section>
40
40
41
41
<section>
42
42
<h2id="qa">Q&A</h2>
43
43
44
-
<pclass='project-q'>What are you up to?</p>
44
+
<h3class='project-q'>What are you up to?</h3>
45
45
<pclass='project-a'>Casey: I'm a student at NYU ITP who's interested in computer graphics and interactive spaces, physical and digital.</p>
46
46
<pclass='project-a'>Louise: I'm a student at NYU ITP who's interested in computer graphics and interactive spaces based on sensor technologies.</p>
47
47
48
-
<pclass='project-q'>How did you get started with p5.js?</p>
48
+
<h3class='project-q'>How did you get started with p5.js?</h3>
49
49
<pclass='project-a'>Casey: I started learning p5.js in 2018 in my first semester at ITP, though I had been dabbling in <ahref="https://processing.org/"target="_blank">Processing</a> since 2012. I was introduced to Processing by my friend Pedro while I was studying graphic design, and it blew my mind. The idea of making my own tools for creating graphics and interactive art piqued my interest, but once I actually tried it, I was hooked. The first project I can remember was an eye that followed you around the screen, and it was sad when you left it alone.</p>
50
50
<pclass='project-a'>Louise: I initially learned p5.js to make a website I was creating more playful. I’m a C# programmer, so this was a good segway into JavaScript for me.</p>
51
51
52
-
<pclass='project-q'>How did you use p5.js in this project?</p>
52
+
<h3class='project-q'>How did you use p5.js in this project?</h3>
53
53
<pclass='project-a'>Casey: I was putting off learning shaders for a long time, and I was also curious if I could use them in p5.js. Then I heard about a grant for open source, storytelling, and learning resource projects at ITP called <ahref="https://www.itpxstory.com/"target="_blank">xStory</a>. Since I wasn't finding much in the way of p5.js + shader documentation, I decided to figure out how they're implemented in p5.js and create a resource for others to learn. When I told Louise about the project, she was immediately excited about learning and teaching shaders in p5.js. She's been great about making sure the project is a learning resource and not just a collection of examples.</p>
54
54
55
-
<pclass='project-q'>What's your favorite p5.js feature?</p>
55
+
<h3class='project-q'>What's your favorite p5.js feature?</h3>
56
56
<pclass='project-a'>Casey: Does <ahref="https://thecodingtrain.com/"target="_blank">Shiffman</a> count as a feature? I also love having the ability to share my programs on the web so that people don't have to install special software or come to NYC to see my work.</p>
57
57
<pclass='project-a'>Louise: My favorite feature is <code><ahref="https://p5js.org/reference/#/p5/push"target="_blank">push()</a></code> and <code><ahref="https://p5js.org/reference/#/p5/pop"target="_blank">pop()</a></code> for transformation of the coordinate system to make generative visuals.</p>
58
58
59
-
<pclass='project-q'>Did you face any challenges working on this project? If so, how did you overcome them?</p>
59
+
<h3class='project-q'>Did you face any challenges working on this project? If so, how did you overcome them?</h3>
60
60
<pclass='project-a'>Casey: The beginning of the project (figuring out how things work) was us reaching out to amazing people, asking questions, and asking for permission to use their examples in our project. <ahref="https://github.com/aferriss/p5jsShaderExamples"target="_blank">Adam Ferriss' GitHub repo</a> really laid the groundwork for us in understanding how shaders work in p5.js and provided a framework of approachable examples for us to build on. For some specific p5.js-related issues we were having, we reached out to <ahref="http://www.katehollenbach.com/"target="_blank">Kate Hollenbach</a> and <ahref="https://stalgiagrigg.name/"target="_blank">Stalgia Grigg</a> (who worked on the <ahref="https://github.com/processing/p5.js/issues?q=is%3Aissue+is%3Aopen+webgl+label%3Aarea%3Awebgl"target="_blank">WebGL implementation in p5.js</a>), and they were super helpful.</p>
61
61
<pclass='project-a'>Louise: The learning curve was pretty steep for getting shaders into p5. Luckily, there were some very well-documented examples on GitHub by Adam Ferriss. Our aim was to do so in a way that a complete beginner can understand how to implement it, so it was as much a technical challenge as it was a challenge in teaching code to strangers and beginners. Here we drew inspiration from the way the <ahref="https://openframeworks.cc/ofBook/chapters/foreword.html"target="_blank">openFrameworks book</a> is written. A fun “hey, it’s not hard and you can do it too” approach is what we believe in.</p>
62
62
63
-
<pclass='project-q'>What's a cool thing we should check out?</p>
63
+
<h3class='project-q'>What's a cool thing we should check out?</h3>
64
64
<pclass='project-a'>Check out the <ahref="https://github.com/ITP-xStory"target="_blank">xStory GitHub</a> to see our peers' amazing grant projects!</p>
65
65
66
-
<pclass='project-q'>Where can people learn more about you?</p>
66
+
<h3class='project-q'>Where can people learn more about you?</h3>
0 commit comments