Skip to content

Commit 503d31e

Browse files
tyler-yintyler-yin
authored
Merge pull request #5863 from Malayvasa/main
Add Entry for GSoC 2022 Wrapup
2 parents 85acfd7 + 23ac737 commit 503d31e

File tree

2 files changed

+122
-0
lines changed

2 files changed

+122
-0
lines changed

‎contributor_docs/project_wrapups/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ This folder contains wrap-up reports from p5.js related [Google Summer of Code](
1010
* [p5xr Immersive Session Process and Controller API update](https://github.com/processing/p5.js/blob/main/contributor_docs/project_wrapups/smrghsh_gsoc_2022.md) by Samir Ghosh, 2022
1111
* [Improving p5.js WebGL functionality](https://github.com/processing/p5.js/blob/main/contributor_docs/project_wrapups/shubham_sharma_gsoc_2022.md) by Shubham Kumar Sharma, 2022
1212
* [Expanded WebGL Tutorials](https://github.com/processing/p5.js/blob/main/contributor_docs/project_wrapups/slominski_gsoc_2022.md) by Austin Slominski, 2022
13+
* [Reworked and New Examples](https://github.com/processing/p5.js/blob/main/contributor_docs/project_wrapups/malayvasa_gsoc_2022.md) by Malay Vasa, 2022
1314

1415
### Google Summer of Code 2021
1516
* [Adding Alt Text to the p5.js Website](https://github.com/processing/p5.js/blob/main/contributor_docs/project_wrapups/katiejliu_gsoc_2021.md) by Katie Liu, 2021

‎contributor_docs/project_wrapups/malayvasa_gsoc_2022.md‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
## Reworked and New Examples - GSoC 2022
2+
3+
This year with my mentor @tyler-yin, I’ve worked on updating the examples section of the p5js website. My goal with the project was to introduce examples which focus on programming constructs alongside concepts of art & design. My hope is that by showcasing how the tool can be used visually, I can bridge the gap that beginners often face between conceptualising an artwork and coding it.
4+
5+
I also propose a set of layout and functionality changes to the website that enhance the user experience. I believe the way the examples is currently structured can intimidate a lot of beginners from exploring and learning.
6+
7+
You can find my full proposal [here](https://summerofcode.withgoogle.com/media/user/bad5e07f0969/proposal/gAAAAABjD1624v_zls-M-HNtpmsqjHRz0xzwXQuSzMLP3JgcdJ2uEMqJ5r4URH1Gk4qmJFMhS3f2zuuAvFglM-TFS2VWbtQGjccnF3FzmW6FwG1T4l6Y9I4=.pdf).
8+
9+
## Current Progress
10+
11+
I have so far been working on 5 of the 25+ categories present in the examples section.
12+
13+
These mainly involve : Color, Math, Image, Motion, Drawing, and Input.
14+
15+
I have structured my work in this notion document ([https://malayvasa.notion.site/GSoC-2022-Examples-Project-ffee1e56ab1a4d7bb27b40ea7a145555](https://www.notion.so/GSoC-2022-Examples-Project-ffee1e56ab1a4d7bb27b40ea7a145555)) where you can view it category wise. There are two broad categories :
16+
17+
## Reworked Examples
18+
These are existing examples that I felt needed to be simplified or modified to make them easy to understand and inviting beginners to play with the code.
19+
20+
### Color
21+
- Saturation : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/D_diJGx3z)
22+
- Hue : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/cp-vOyVaN)
23+
- Brightness : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/ePCMD0Qva)
24+
- Lerp Color HSB : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/MXJuQ6PXQ)
25+
- Radial Gradient HSB : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/oLbAZAYiu)
26+
27+
### Math
28+
- Random : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/q4UHuGgOf)
29+
- Noise 2D : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/vMJrphk9M)
30+
- Noise 3D : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/lk1oVQzbx)
31+
- Arctangent (Simple) : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/jaiw_N5sb)
32+
- Arctangent (Advanced) : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/2yRK0w1q6)
33+
- Distance 1D : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/UL3NmUPa6)
34+
- Sine Cosine : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/pGHOS_8ks)
35+
- Sine : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/fP-4RSNHR)
36+
- Parametric Equations (Simple) : [Editor Link](https://editor.p5js.org/malayvasa/sketches/7oeYm1cPy)
37+
- Additive Wave : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/O_mktBiqU)
38+
39+
### Others
40+
41+
- Image
42+
Transparency : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/FHFm3jHQv)
43+
Alpha Mask : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/CARbnWpzw)
44+
- Motion
45+
Reflection (Simple) : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/jtmKm8sRx)
46+
- Input
47+
Keyboard : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/Pi2EyKvlg)
48+
- Form
49+
Lines : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/MgithbMo6)
50+
- Text
51+
Rotation : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/QkPp1hvsd)
52+
53+
54+
## New Examples
55+
These are the examples that are not on the website, but I feel should be there. They broadly introduce new concepts that I’ve myself encountered.
56+
57+
### Color
58+
- Color Wheel : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/9K5GEkGT9)
59+
- Monochromatic Color Sceme : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/lomRnGCUd)
60+
- Responsive Text Fill : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/wAO-2_vcL)
61+
62+
### Image
63+
- Pixel Array Manipulation : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/YTy8LlSFq)
64+
- Dot Matrix Animation : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/nDxraaJ8u)
65+
66+
### Motion
67+
- Circular : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/vpNF676Z5)
68+
- Wave Maker : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/zNeDx6t7M)
69+
70+
### Text
71+
- Lyric Poem : [Editor Link](https://editor.p5js.org/malayvasa2001/sketches/aC1oUxpAo)
72+
73+
## Guidelines for a great example
74+
Working on these I’ve developed guidelines to write a great example that anyone can follow as well :
75+
76+
### Be Correct
77+
Example code is an opportunity to directly influence how your users write code. Therefore, examples should showcase the best way to use your product
78+
79+
Example code should meet the following criteria:
80+
1. Free of any errors.
81+
2. Perform the task it claims to perform.
82+
3. Be as production-ready as possible.
83+
4. Follow language-specific conventions.
84+
85+
### Be General
86+
Examples should focus on explaining or demonstrating concepts that can be applied to a wide variety of scenarios. If you find writing a super specific example, ask yourself if writing a tutorial would be a better way to address it.
87+
88+
Examples are not tutorials. People already know what they are seeking from a tutorial, examples instead introduce people to what's possible.
89+
90+
#### Be Simple
91+
As a beginner, seeing a page full of code can be very intimidating. To avoid this, examples should be kept as simple as possible.
92+
93+
Try and keep the pre-requisite knowledge to a minimum. Since an example is ideally being used to introduce a new concept or framework, the reader shouldn't have the added burden of figuring out other stuff which could be avoided.
94+
95+
In some cases, an example will require more complexity. Break it down further into three separate examples that address different experience levels Beginner, Intermediate & Advanced.
96+
97+
#### Be Well Commented
98+
In the case of examples, comments almost form a dialogue with the code. This gives the reader a sense that someone is explaining the code to them.
99+
100+
Comments are also extremely helpful in introducing additional context. Clarity and understanding of the purpose of a particular line of code are important to avoid unwanted confusion.
101+
102+
Moreover, since the reader is exposed to well-documented code this will encourage them to add comments to their code as well.
103+
104+
#### Be Inviting
105+
This one is pretty simple, the example should invite the user to play around with the code.
106+
107+
This can be achieved by :
108+
1. Making the example intriguing, to invoke the thought "How did it do that?!"
109+
2. Using easy to understand variable names, although they might seem a bit verbose at times.
110+
3. Making the example editable, without the need of setting up a coding environment.
111+
112+
#### Be Discoverable
113+
It doesn't matter how great your example is, if it isn't easy for the reader to find it. There are a few things you can do to improve discoverability :
114+
115+
1. Have a descriptive name, it is possible many beginners aren't aware of a concept at all and using a technical name might hinder the process of discovery.
116+
2. Link your examples to the relevant sections of the documentation, and to other similar examples.
117+
3. Have a thumbnail, if contextually applicable.
118+
119+
## Acknowledgements
120+
121+
I would like to thank Tyler, Saber and Qianqian. The project would not have reached this stage without the amazing guidance and support from them.

0 commit comments

Comments
 (0)