Enrol to start learning
Reading is open to everyone. Enrolling is free, and it is what unlocks the audio lessons, practice tests and progress tracking.
4.8.3.1.3.1. (Basic Coding Introduction - if resources and capacity permit)
Interactive Audio Lesson
Unlock the classroom podcast
The transcript is above and free to read. A free account plays the conversation back.
Create a free account
Today, we’re going to jump into the world of visual coding! How many of you have heard the term 'coding' before?
Yes, I think it’s about programming computers, right?
Exactly! Coding allows us to give instructions to a computer. Today, we’ll see how it can help us create art. Does anyone know what generative art is?
Is it art that is made with algorithms or math?
"Correct! Generative art is created with the help of code. We’ll use visual programming tools like Processing or p5.js. Remember:
Unlock the classroom podcast
The transcript is above and free to read. A free account plays the conversation back.
Create a free account
Now let's write our first code! To create a circle in Processing or p5.js, we use the 'ellipse()' function. Can anyone guess how we define where the circle will be?
Do we use x and y coordinates?
Exactly! The 'ellipse()' function takes coordinates and dimensions. For instance, 'ellipse(x, y, width, height)'. Remember this sequence: Coordinates come first! Now, let’s try drawing a circle in our coding environment.
Can we change the size of the circle too?
"Yes! The third and fourth parameters control the width and height. You can experiment with these values.
Unlock the classroom podcast
The transcript is above and free to read. A free account plays the conversation back.
Create a free accountToday we’ll explore the idea of randomness in our code! Adding randomness can lead to unexpected and beautiful patterns. Who can tell me how we might do this?
Maybe using random numbers for position or size?
Great idea! In Processing or p5.js, we can use the 'random()' function to generate unexpected values. Remember the mantra: Randomness creates uniqueness!
Can we apply randomness to colors as well?
Absolutely! By using random colors, we can make vibrant visuals. Writing something like 'fill(random(255), random(255), random(255))' will give random colors to shapes! Let's create a colorful pattern.
Unlock the classroom podcast
The transcript is above and free to read. A free account plays the conversation back.
Create a free accountNow it’s time to get creative! Using everything we’ve learned, I want you all to create a piece of generative art. You can combine shapes and randomness. Remember: Experiment, test, and iterate.
What should we focus on in our projects?
Focus on creating layers of shapes with varying sizes and colors! Use your imagination! After you’re done, we’ll share and critique our works.
Overview
Short Summary
This section introduces students to basic coding concepts through interactive visual programming, specifically targeting the creation of simple geometric shapes and patterns using coding.
Medium Summary
The focus of this section is to familiarize students with a visual coding environment, where they can create basic generative art through simple instructions. This experience aims to enhance their understanding of algorithms and how code can lead to creative outputs in abstract art.
Detailed Summary
Detailed Overview
This section aims to introduce students to the fundamentals of coding within a visual programming environment such as Processing or p5.js. Students will learn to create basic geometric shapes and tessellations through simple code snippets. The learning objective is to emphasize how algorithmic thinking can be applied to art-making, highlighting the role of parameters and instructions when generating visual outputs. The concepts of randomness and iteration are integral to this process, allowing students to explore these notions creatively. By the end of this module, students should be able to write simple code to manipulate shapes, contributing to their greater understanding of both art and technology. This understanding reinforces the relationship between coding and abstract art generation.
Audio Book
Unlock the audio lesson
The script is above and free to read. A free account plays it back, in the voice you pick.
Create a free accountIntroduce a visual coding environment like Processing or p5.js. Guide students through creating a foundational sketch that draws random geometric shapes, creates a simple tessellation, or generates a patterned background based on a few lines of code. The focus is on understanding how to translate simple instructions into complex visual output.
Detailed Explanation
In this section, students are introduced to visual coding using tools like Processing or p5.js. These platforms allow users, especially those new to coding, to create visual art through simple programming. By learning how to write basic code, students can control how shapes, colors, and patterns appear on the screen. The goal is to help them see that coding can be an artistic tool much like a paintbrush or a sculpting tool.
Examples & Analogies
Think of coding as giving instructions to a robot artist. Just like you might tell a painter to use blue to create the sky in a landscape, you're telling the robot what shapes to make, what colors to use, and how to arrange them. When the robot follows your instructions (code), it creates beautiful patterns or shapes on its own.
Unlock the audio lesson
The script is above and free to read. A free account plays it back, in the voice you pick.
Create a free accountThe focus is on understanding how to translate simple instructions into complex visual output.
Detailed Explanation
The core idea behind this part of the coding lesson is to help students grasp the concept of translating simple, straightforward commands into complex images and designs. Students will learn that by changing a few parameters in their code—like the size of shapes, the number of shapes, or their colors—they can create completely different visual outcomes. This teaches them the power and flexibility of coding as an artistic medium.
Examples & Analogies
Imagine baking a cake. If you follow a basic recipe for cake batter, you might end up with a simple vanilla cake. However, if you tweak the recipe by adding chocolate, nuts, or by layering the cakes differently, you create an entirely new dessert. In coding, adjusting the 'ingredients' (lines of code) leads to a variety of visual 'desserts' on the screen.
--
Key Concepts
Core takeaways and short definitions to help you quickly recall the key ideas from this section.
Generative Art: Art made with algorithms and code.
Visual Coding: A programming approach that uses a graphical interface to create visuals.
Ellipse Function: A method used in coding to create circular shapes.
Randomness in Coding: The use of unpredictable values to produce unique art.
Examples
Memory Aids
Interactive tools to help you remember key concepts
Stories
Memory Tools
Flash Cards
Glossary
Generative Art
Art created through an autonomous system, often involving algorithms or coding.
Visual Coding
A programming approach that allows users to create graphical outputs using a visual interface.
Ellipse
A shape that represents a circle or oval drawn in the coding environment using a specific function.
Randomness
The state of being unpredictable, which can be utilized in coding to create unique outcomes.