P5js Flower

[Stayce Cawthorn]

Wehave learned that variables can store one value at a time (a number, string, or Boolean). Arrays can store multiple values in indices. Sometimes, however, we want to store several pieces of related data about one thing together. We can do this using JavaScript objects, which bundle data together by pairing properties and values. Properties are special types of variables or names that are associated with an object. Each property stores a value. For example, if we wanted to create a JavaScript object based on a flower, it could have properties that describe its location (x and y) and emoji symbol.

Try opening the code so far in the p5.js Web Editor. You should see your flower object printed to the console. Notice how you can click on the arrow in the console to show the properties and values for the object.

You can store objects by initializing new variables when you define them. In the code above, you declared a variable named flower. You then initialized the flower variable with an object whose properties represent a flower that can be drawn on the canvas.

Inside the drawFlower() function, draw the attributes of a flower, including the petals and center of the flower. Remember to use the flower object properties for the x and y locations, size, and color. You can add the following code to the function body:

In the code above, createFlower() is used to create and return a random flower that is stored in flower1. The random flower (flower1) is then passed into drawFlower(), which accesses the flower object properties to draw a flower on the canvas. This process occurs each time the draw() function runs, so random flowers appear and disappear on the canvas.

In the code snippet above, we access the first element of the flowers array at index 0 using the index notation: flowers[0]. In the example above, this syntax is used to place text on the canvas with the names accessed from various elements in the flowers array.

We then assign that value to a new variable named rose. rose now holds the string "Rose", which is the first flower name in the flowers array. Values stored in other elements can be accessed in the same way.

Our second example uses a for loop to iterate through each element in the array and print the text on the canvas. Iteration is a process where a block of code is executed repeatedly for each element in an array.

In order to remove elements from an array, we use the function array.splice(). The function array.splice() modifies the flowers array with two parameters: one for the starting index and the other for how many elements to remove. flowers.splice(0,1) results in the removal of "Rose" from the array, leaving only "Daisy" and "Tulip".

The function header begins with the keyword function. The function's name, drawFlower, is followed by parentheses () and curly braces . The code between the curly braces is called the function's body. The function's body runs when the function is called like so:

Functions can accept inputs by adding parameters to their headers. Parameters are placeholders for values that will be provided when the function is called. For example, the drawFlower() function could include a parameter for the flower's size:

Functions can have multiple parameters separated by commas. Parameters can have any type. For example, the drawFlower() function could accept Number parameters for the flower's x- and y-coordinates along with its size:

How do we introduce data visualisation in an engaging and approachable way for communities of young women? What would it look like to learn code as a medium for art and creative storytelling? In this interview, Arran Ridley sat down with Joanne Amarisa, founder of the Data Garden Project, a growing resource and learning community for young people to share data-driven stories about their lives using creative coding.

Our six modules combine the basics of creative coding with the basic principles of data storytelling. By the end of the modules, each student creates a final data-driven art project made with p5.js, representing a story or theme of their choosing. At the end, it felt like a breakthrough. One of our team members, Kelly, created a flower grid visualising the songs she listened to during lockdown. I thought, Whoa. The Data Garden Project works!

In 2022, I began to record each module as bite-sized tutorials, which now exist on our YouTube channel. It helped us gather some more audience around our mission, which was to make creative coding and data visualisation accessible and enjoyable.

The second need was to demystify gender biases around STEM. We know statistically that women comprise only a little over 30% of the STEM workforce. Moreover, girls and young women are also outnumbered in STEM-related majors in school or college and are less likely to pursue them than their male peers. These gaps are further aggregated in communities where the infrastructure for technology is lacking.

Through the Data Garden, we wanted to explore coding as if it were a fun scrapbooking or art activity that you can do after school, engaging communities of women to give that sense of belonging, and to show that this is a space for them, too. We turn software into something crafts and knowledge-based, lowering the barrier while providing an avenue for connection and vulnerability through story-sharing, not just upskilling.

Yes! We host our community on Discord as a central hub. We host online workshops using Miro, the team does our brainstorming sessions here, or sometimes we like to open a one-hour Study Space on a weekend where we put on lo-fi music, chill, and just work on our own things in the company of others. Most of us are based in the Asia-Pacific, but as the Discord community grew, there was also a time when we opened multiple Study Spaces to accommodate those in Europe or the US.

We also publish much of our content (such as modules, project updates, or inspiration) on Instagram and YouTube. One of the things we did on YouTube earlier this year was host Sharing Sessions, where we sit down and do Q&As with data viz or creative coding practitioners in the field, who share about their work and career journeys.

I was also nervous at first about starting the initiative with no computer science credentials (unless we count self-taught through p5.js YouTube tutorials). However, it was a delight to learn that our offering of community, storytelling, and creativity is what draws people into the DGP. This shed a lot of pressure from having to be like a coding course or bootcamp, and gave us more confidence to play to our strengths.

The resource houses our six learning modules, combining written guides and our YouTube video tutorials. It includes a mix of coding challenges, storytelling or writing homeworks, simple data visualisation concepts and examples, and workshop or activity ideas for the classroom. For educators, we also include slides or materials for class settings, as well as tips on how to facilitate a workshop drawn from the Data Garden.

In our first Team Tutorial sessions, some of my favourite moments were when my peers would show me and the team the coding projects they made over the weekend, going into the process of how they made it and teaching the team how to create the same.

Want to get involved? We are currently seeking teachers or education partners who would like to collaborate with the Data Garden Project to pilot this resource inside their classroom or community, or adapt it to their existing lesson plan for the new school term. Reach out to us at datagard...@gmail.com to get in touch.

My project is about sakura. Each time the user run the code, flowers with different shades of pink and different sizes will appear at random locations. The flowers rotate as they move with random speeds, and they will bounce back if they arrive at the edge of the canvas. Meanwhile, the edge of each petal keeps changing.

Hello Everyone, I am Mel! I have very little experience with processing, but I have an art project that I've created. My goal is to have 4 shapes bouncing around the screen, and when you click one, a sound will play. So far, I have figured out how to create the shapes, make them move around. However, my first problem is that only the flower image I have stays mostly within the screen. All other shapes are far off and barely show up in one rotation. I understand that this is similar to "bouncing ball" exercises, yet I'm still lost on how to keep the four of my shapes with the boundary.

This below is what I have so far. Sorry that you wont be able to play the code, but hopefully I was detailed enough for you to get the picture.Thank you for reading this and any help is much appreciated!!!

Now, the problem here is that you manage all four images using a single set of coordinates. Doing it the way you are doing it, it will always give you this behavior. If you want to change it, then you will need to provide different coordinates to each object. Do you still want the objects to leave the screen or do you want to constrict them within the sketch area?

Thank you again for your help. I have been replicating your format for the classes with my own images, but I am not sure why they aren't working. The Errors listed will say "Return Type for method is Missing" or "NullPointer Exception"

Hello! I kept trying to edit what kfrager posted as an example, with replacements of the images I needed. I am thankful for the link to the lesson on classes. However, I do not know how to replace the rectangles with my images, now that the objects stay within the perimeter of the canvas.I see that adding :

3a8082e126