Bulb Archived: Disney ATLAS 2015-2018: Kostecki (Year 3, 2017-2018)

School Name: Walt Disney Magnet School

Teacher Name: Alicia Kostecki

Section I: Arts Integration – Documentation. 

This unit is a computer science unit that incorporates the arts.  In the unit students are introduced to text-based programming for the first time, using P5.js, which according to the p5js.org website is “a JavaScript library that starts with the original goal of Processing, to make coding accessible to artists, designers, educators, and beginners.”  I introduce the idea as a coding and drawing playground, and as computational art.  In the first couple class sessions, students simply explore and get used to the basic structure of a “sketch” and then in the next few classes students learn to use variables, which allows them to create animations and interactive sketches where movement and color become dynamic.  

Text-based coding can be intimidating to students.  Using P5.js helps demystify it because every line of code has a visual impact.  The immediate visual feedback helps beginners understand what each line of code, or each function and parameter does.  I start the unit by having students “be the computer,” as I give them directions on what to draw on a 20×20 grid.  Using simple coordinate points, and simple shapes, they are able to “read the code” that I give them (my directions become closer and closer to p5.js syntax as I progress through the directions).  They are then able to transfer this understanding to their first P5.js sketch!  During this first day, students are then challenged to figure out how to change the basic sketch – how to change the shape that is drawn, how to change its size, how to change its color, how to add more shapes!  It becomes an exploratory and also competitive process to discover how to manipulate the code to get different outcomes.  Students also quickly learn to use the built-in Reference section to learn about new functions.

A student adaptation of the built-in sketch where a circle follows the mouse.  She looked online to find out how to have the colors change randomly, and also changed the size of the circle.  Below is the code.
Neenah’s code.

During the second session, students are introduced to more functions through a participatory discussion and demonstration.  Students are shown how to draw lines, triangles, quadrilaterals, as well as how to change the fill and stroke colors, and the stroke weight.  This also brings us to using rgb codes to choose colors, and students are shown a couple different websites to find the codes.  And thirdly students are shown how to use the built in variables of MouseX and MouseY to make the colors change as the user moves the mouse around, and how to use mathematical operators with the variables (for example, MouseX/4) so that their colors change more gradually (since rgb codes max out at 255).  Students are then given an open-ended assignment to experiment with multiple functions to create a sketch using shapes and colors.

This students experimented with creating a triangle where one vertex follows the mouse and the other two are fixed. Code shown below
Izabella’s code

During the third class session (or fourth, as the 2nd lesson spills into the 3rd class period), students are challenged to create variables and then use them to make their sketches more dynamic in interaction, or to use variables to make the sketch automatically animate.  Using the same type of interactive discussion/questioning, students are shown how to create variables and use them as described.

Code above is for the project seen below.

During the forth session, students were introduced to conditionals, where what is drawn depends on the computer’s evaluation of an “IF” statement.  

Code above is for the image below

Section I: Arts Integration – Inquiry 

3. What is your Inquiry Question for your ATLAS curriculum unit? What big ideas does this inquiry question address, and why do you think the question successfully addresses these? 

There is not one Inquiry Question for this unit, but there are several “big ideas” questions that are addressed.

Question 1  – In a world of constant change, what skills should I learn?   During this unit, and during the year as a whole, we discuss why computer science is an important subject to teach in school?  How is it useful in their lives? Even if they are not going to “grow up to be computer scientists” how can knowing more about it improve their lives?  With technology begin so ubiquitous in students’ lives, getting them to understand that constant change will continue to be fueled by technology is relatively easy; getting students to see themselves as using technology to be agents of change is more complex.  

Question 2 – How does math apply to digital art?  In the process of creating their projects essential math concepts are reviewed, such as simple equations and using variables.   On one class, as I introduced the use of variables to track the mouse’s position on the screen, a student literally shouted:  “Oh, so math is actually useful in real life!?”  In this case, computer science allows students to see a practical use for some of the math they have learned.


The code above is for the project displayed below

Question 3 – How do computers identify color (and why)? What meanings do colors have?   Students are introduced to pixels, binary, and rgb color through a video produced by Code.org:  https://www.youtube.com/watch?v=15aqFQQVBWU  .  This video gives them a background understanding of how graphics are composed of pixels, and how the 3 numbers in an rgb code actually describe something in binary.  In reality though, to use rgb color students simply use the rgb color picker either directly through a Google search, or from https://www.w3schools.com/colors/colors_picker.asp.

Question 4 – How can technology be used to express or just tinker with creative ideas?  Students create things with computers all the time, from simple photographs, photographs with various filters (think Instagram and Snapchat), to drawings done in apps on their phones.  But coding for creativity is a new concept to most of them.  Their other experiences with coding (at least at school) are usually puzzle based assignments, or maybe creating an animation or video game with block-based coding.  Giving students the opportunity to be introduced to text-based coding in a creative, visual arts unit helped students be less intimidated by the coding, because it allows them to create coding projects where they can’t really do anything “wrong.”    

4. How did student research help them to engage more deeply with the unit inquiry question? Explain how your students conducted research for their ATLAS project, and how that research opened up avenues for further inquiry. 

The only research that took place as part of this unit was when students would search the internet or the software’s reference section to try to figure out how to do something they wanted to do, for example how to pick a random color, or how .  I also encouraged them to us the reference section when they had forgotten something, such as the syntax or parameters for drawing a triangle.  In encouraging this I hope to empower students to self-direct their further learning.  

5. Describe how the unit inquiry opens up avenues for interdisciplinary connections between the arts and academic content. How did arts processes and/or research practices facilitate students’ understanding of the academic topics addressed in the inquiry question? 

This didn’t really happen deliberately as part of this unit.  Going forward, I think it would be beneficial to connect with students’ math teachers to find explicit connections between the math curriculum and this unit.

6. How did the curriculum evolve based on the unit inquiry process? 

It did not change this unit, however looking forward to next year some of the questions student had (such as how to choose a color randomly, or how to choose a PASTEL color randomly, or SHADE of a color randomly) may end up being something I directly teach .  In other words, student questions and curiosities this year (as well as their struggles) will be used to help evolve the curriculum for next year.

Section I: Arts Integration – Create Works 

7. How did students self-direct while creating their artistic work during the ATLAS project? Please provide any examples for the ways in which students made their own aesthetic choices and direction for creating their artwork. Examples might include but are not limited to: how did students make choices about the use of materials, how did they decide what they wanted to communicate, how did they make decisions about how to present work? 

The projects students created in this unit were experimental and exploratory in nature.  While they were learning concrete computer science concepts and skills, what they created was left mostly to them.  This was feasible in a classroom because they have limited skills in the programming language, so their creativity was limited by these skills.  I would compare it to giving students the assignment to draw anything they want, but then only giving them 1 box of crayons, 1 piece of paper, and telling them they can only draw basic shapes.  Within these limits, creativity is still possible, and in fact with limits sometimes creativity is even more important!

8. Please explain what opportunities the students had to reflect on their experiences and react to the work of their peers. 

Students in my class are always helping each other; the general rule is “ask 3 then me.”  With only 1 of me and 32-36 of them, students need to help each other.  In this process, students give informal feedback to and get inspiration from each other on a continual basis.  In this unit, at the end of each class session I would ask students to volunteer to show something they discovered or figured out, which they were proud to do.

9. How did the students’ artifacts from various stages of the ATLAS Unit impact your teaching practice? Please provide artifacts that exemplify your points. What did you learn about your teaching practice from looking at these artifacts? 

I don’t think this really happened this year, it being my first year in the ATLAS program.  

10. Describe how the students’ work was shared in the school or publicly. Why was this an important part of this unit? 

The work was shared in the ATLAS exhibition.  I don’t think it was particularly important to this unit, although it was fun to have an audience.   I do wish I had more opportunity to display work in my school, but there are obstacles to displaying work that only exists electronically.  

Section I: Arts Integration – Collaboration 

11. How did students collaborate at different stages of the project? Examples might include but are not limited to: did the students research together, did they create together, did they critique together, did they present together? 

Students worked in partners for many of the assignments.  As stated above, students in my class are always helping each other; the general rule is “ask 3 then me.”  In this process, students give informal feedback to and get inspiration from each other on a continual basis. In this unit, at the end of each class session I would ask students to volunteer to show something they discovered or figured out, which they were proud to present to their peers.

12. In what ways did you collaborate with the students for this unit. How did the students impact the way in which the curriculum was implemented? For example, how did students help you plan, develop, and/or implement the curriculum? 

Students did not help plan or develop the curriculum, but as noted above when students discovered new ways of using the code or changing the code they were able to share it with the class, so this impacted what students learned.

13. How did you collaborate with other teachers in your school to plan and/or implement the unit? 

I did not collaborate with other teachers in this unit.

Section II: Technology Integration 

14. What was your process for selecting this form of digital media technology? Why did you think this form of digital media technology would be ideal for student learning? 

Two of my fundamental goals are to introduce computer science and computational thinking, and to get students interested in computer science.  I chose this particular kind of coding because when it is introduced as a creative, experimental process it becomes less intimidating than when it is introduced as “hard core” computer programming.  

15. How did students use digital media technology to direct their own learning? Provide artifacts to show evidence of how students used the technology to direct their own learning. Examples might include but are not limited to: making choices about technologies to use, using technology to facilitate experimentation, using technology as a research tool, to express themselves artistically, and/or to make meaning of their experiences. 

Students were encouraged to try to figure out how to change the code to make it do what they wanted, or to experiment by changing the code and figuring out what impact the change had.  In this way the assignments in this unit were in a sense self-directed.  Showing students how to use the reference section of the software to look up how to do things, and encouraging them to do this, also helped them self-direct their learning.  

16. How did you use technology to enhance the learning environment for both you as a teacher and for the students? 

Almost everything in my classroom is already done electronically, which enhances the learning environment by making it more efficient.  

17. In what ways do your chosen technology resources align with your goals and outcomes for student learning? Looking back at the unit, how did the technology meet, not meet or exceed your expectations for facilitating student outcomes. 

Technology is obviously integral to this unit, it being a computer science unit.  As stated above, the particular choice of OpenProcessing.org, and the p5.js language in general, helps minimize the intimidation factor as students are introduced to text-based coding.  The immediate visual feedback for every change in the code is what makes this language so great for beginners.  Introducing it in this way exceed my expectations at making it a fun, non-intimidating intro to coding.

18. How did the use of technology contribute to students’ application of higher order thinking skills? Examples of student higher order thinking skills include metacognition, self-reflection, analysis, and application of knowledge or skills. 

I don’t think I really have enough information to answer this question fully.  I think that encouraging students to use the reference section of the software, or Google, to find answers to their questions helps with critical thinking and application of knowledge , as well as metacognition.

19. How did the use of technology drive student creative artistic expression? Please provide student artifacts that exemplify how technology supported their artistic expression. 

The last project I did asked students to code a personal flag.   I believe the limitations they had in coding them (i.e. they could really only use simple geometric shapes) helped drive their creativity.  Here are some examples:

Code for this project is below
Code for this project is below
Code for this project is below

20. How did the integration of digital media technology impact your teaching practice?

Since I teach technology this is hard to answer, but one thing I will note is that this year it was easier and more efficient teaching p5.js through the website OpenProcessing.org.  Because the code is created and displayed on the web, there are no lost files, no confusion with multiple files and folders, and projects are easy to submit to me.  This technology really helped teach coding to 7th and 8th graders who otherwise might not only be intimidated by the code but also confused by keeping track of many files.