Drawing Pictures with Computer Coding
Technology can be integrated into a visual arts curriculum. Below are some examples of lessons, activities, and resources for teaching the visual arts through technology.
Computer Programing and Art: Students will follow a series of repetitive steps, then be asked to use these steps to create images.
Essential elements for successful online units are communication, quality resources, clear directions, easily navigable learning management system, and an instructor and peers who are able to give support and feedback.
In this learning module we will begin to do all of these things and more!
This module consists of the following:
In this learning module we will begin to do all of these things and more!
This module consists of the following:
- An introduction to the lesson
- Resources for the students
- More than one assignment
- Assessment details
- An Assignment Checklist
INTRODUCTION
Module 1: In this learning module you will find assignments, activities, links and resources to help us begin to learn how computer programing connects to visual and digital art.
Why is computer programing important? Just ask the President!
Module 1: In this learning module you will find assignments, activities, links and resources to help us begin to learn how computer programing connects to visual and digital art.
Why is computer programing important? Just ask the President!
RESOURCES
Coding harnesses visual thinking and creates opportunities for problem solving. Below are resources for exploration.
Watch this video as an introduction to understanding how coding can be simplified into real world steps by "programing" the steps of beading a real necklace. You do not have to make a necklace but I would like you to watch the video and see how it relates to coding.
Read this to answer What is coding?
Codecademy: Hour of Code, an iPhone app released this week by the founders of US education startup Codecademy, whose website teaches people to code in languages including JavaScript, HTML/CSS, Python and Ruby.
CodeAvengers! Click "I want to learn code" Then click "Learn how to program games and apps with JavaScript"
Click button "Start Learning Now!" To learn to code websites with html, css and JavaScript click "Start Leaning Now!"
This site has alternate examples of how students around the world are coding.
https://www.codeclub.org.uk/
Coding harnesses visual thinking and creates opportunities for problem solving. Below are resources for exploration.
Watch this video as an introduction to understanding how coding can be simplified into real world steps by "programing" the steps of beading a real necklace. You do not have to make a necklace but I would like you to watch the video and see how it relates to coding.
Read this to answer What is coding?
Codecademy: Hour of Code, an iPhone app released this week by the founders of US education startup Codecademy, whose website teaches people to code in languages including JavaScript, HTML/CSS, Python and Ruby.
CodeAvengers! Click "I want to learn code" Then click "Learn how to program games and apps with JavaScript"
Click button "Start Learning Now!" To learn to code websites with html, css and JavaScript click "Start Leaning Now!"
This site has alternate examples of how students around the world are coding.
https://www.codeclub.org.uk/
Watch the video below to learn about the Hour of Code Campaign, the inspiration for this unit on programing and visual art.
ASSIGNMENTS
CHALLENGE 1: Discovery Through the Stars
Use the online platform here to complete the following assignment.
Part 1. Delete the line that says noStroke(); and record what happens through a blog entry, discussion post, or a twitter post with #codingstars. Part 2. Change the color by using the scrubber or change the numbers to make the star a different color.
CHALLENGE 1: REFLECTION
Record what happened by snapping a screenshot and tweeting it to @roblesteach.
Use the online platform here to complete the following assignment.
Part 1. Delete the line that says noStroke(); and record what happens through a blog entry, discussion post, or a twitter post with #codingstars. Part 2. Change the color by using the scrubber or change the numbers to make the star a different color.
CHALLENGE 1: REFLECTION
Record what happened by snapping a screenshot and tweeting it to @roblesteach.
CHALLENGE 2: Architecture though Coding
Examine this house drawn with code in order to get familiar with how to use coding to draw a house.
1. Open up a new document
2. Draw a triangle triangle(x1, y1, x2, y2, x3, y3)
3. Draw a rectangle rect(x, y, w, h)
4. Try and position the shaped to create a house. Add even more details if you can.
5. Save the document by posting it to the site and tweeting the URL to @roblesteach.
CHALLENGE 2: REFLECTION
Choose a vocabulary term and explain in a tweet how it was used in the previous assignment.
Absraction—Removing details from a solution so that it can work for many problems
Function—A piece of code that can be called over and over
Function Call—The place in your program where you call a function you have defined
Function Definition—The place where you assign a series of actions to one easy-to-remember name
Program—Instructions that can be understood and followed by a machine
Variable—A placeholder for a value that can change Vocabulary from the lesson plan to accompany this project
Examine this house drawn with code in order to get familiar with how to use coding to draw a house.
1. Open up a new document
2. Draw a triangle triangle(x1, y1, x2, y2, x3, y3)
3. Draw a rectangle rect(x, y, w, h)
4. Try and position the shaped to create a house. Add even more details if you can.
5. Save the document by posting it to the site and tweeting the URL to @roblesteach.
CHALLENGE 2: REFLECTION
Choose a vocabulary term and explain in a tweet how it was used in the previous assignment.
Absraction—Removing details from a solution so that it can work for many problems
Function—A piece of code that can be called over and over
Function Call—The place in your program where you call a function you have defined
Function Definition—The place where you assign a series of actions to one easy-to-remember name
Program—Instructions that can be understood and followed by a machine
Variable—A placeholder for a value that can change Vocabulary from the lesson plan to accompany this project
CHALLENGE 3: New Bird, New Tricks
Use Christain's bird picture made with code to create your own spinoff by changing small amounts of code to alter the image. You can change it slightly or dramatically. Edit your spinoff here.
CHALLENGE 3: REFLECTION
Save it on the site and tweeting the URL to @roblesteach.
Use Christain's bird picture made with code to create your own spinoff by changing small amounts of code to alter the image. You can change it slightly or dramatically. Edit your spinoff here.
CHALLENGE 3: REFLECTION
Save it on the site and tweeting the URL to @roblesteach.
MODULE REFLECTION
Create a short reflection using a youtube video, voicethread, blog entry, discussion or twitter post to share three new things you learned, why it is important, or what other things you think you could do with computer programing and art.
Create a short reflection using a youtube video, voicethread, blog entry, discussion or twitter post to share three new things you learned, why it is important, or what other things you think you could do with computer programing and art.
ASSESSMENTS
ASSESSMENT DETAILS
Students will be expected to review the video introductions in order to get an idea about how coding works. Students will then complete three challenges in order to explore the posibilities of using computer programing language to make graphics. Students will demonstrate their learning through the creation of three different images and three different assessments of learning.
Students will be expected to review the video introductions in order to get an idea about how coding works. Students will then complete three challenges in order to explore the posibilities of using computer programing language to make graphics. Students will demonstrate their learning through the creation of three different images and three different assessments of learning.
computer_programing_and_art_checklist.docx |
computer_programing_and_art_rubric.docx |
WANT TO CODE IN A DIFFERENT WAY?
Play some coding games by going to learn.cod e.org/hoc/1
1. Watch Tanya's Angry Birds "Maze Intro" video
2. Make the angry birds get the pigs and make sure you click the "show code" in order to see each code.
Play some coding games by going to learn.cod e.org/hoc/1
1. Watch Tanya's Angry Birds "Maze Intro" video
2. Make the angry birds get the pigs and make sure you click the "show code" in order to see each code.