[1.0 JS] Introduction to Computational Media
  • Introduction to Computational Media
  • How to Use this Curriculum
  • Submit Feedback
  • Curriculum Extras
    • ๐Ÿ”ฎCurriculum Extras Overview
    • Imposter Syndrome (pt. 1)
      • Imposter Syndrome (pt 2)
    • Timers in p5.js
    • Time Functions: Crazy Clock Mini Project
    • Using Sliders
    • Getting Sound from Mic
    • Sound Recognition with ml5
  • Unit 1: Drawing, Variables, and Random
    • ๐Ÿ”ฎUnit 1 Overview
    • U1LA1.1 p5.js Introduction & Deconstruction
    • U1LA1.2 Line Functions and Parameters
    • U1LA1.3: Rectangles, Ellipses, and Layering
    • U1LA1.4 Various Shapes, Stroke, Weight, Fill
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU1LA1 Mini Project: Taijitu Symbol
    • U1LA2.1 Intro to Variables - System Variables
    • U1LA2.2 Custom Variables in p5.js
    • U1LA2.3 Random Function & Variables
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU1LA2 Mini Project: Custom Emoji pt. 1
    • U1LA.3.1 Intro to Color
    • U1LA3.2: RGB vs HSB Color Modes
    • U1LA3.3 Color Palettes & Design
    • ๐ŸŽจ๐ŸŽจ Unit 1 Final Project: Abstract Album Art
  • Unit 2: Respond & Draw on Canvas
    • ๐Ÿ”ฎUnit 2 Overview
    • U2LA1.1 - Conditionals and if statements
    • U2LA1.2 - Conditionals and if, else if, else statements
    • U2LA1.3 - Logical Operators And/Or
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU2LA1 Mini Project: Make a Traffic Light ๐Ÿšฆ
    • U2LA1.4: Draw with Mouse
    • U2LA1.5: The Map Function
    • U2LA2.1 - Collision with Collide2D
    • U2LA2.2: Mouse Clicks && Shapes As Buttons
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU2LA2 Mini Project: Light Switch Game
    • U2LA3.1: Key Presses && Nested Conditionals
    • ๐ŸŽจ๐ŸŽจ Unit 2 Final Project: Interactive Drawing App
  • Unit 3: Arrays, Loops, Media
    • ๐Ÿ”ฎ๐Ÿ”ฎ Unit 3 Overview
    • U3LA1.1: While Loops
    • U3LA1.2: For Loops Pt 1
    • U3LA1.3: Nested For Loops (For Loops pt 2)
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA1 Mini Project: Wallpaper Design
    • U3LA2.1: Introduction to Arrays
    • U3LA.2.2: Arrays with floor() and random()
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA2 Mini Project 1: Fortune Teller
    • U3LA2.3: Loops and Arrays
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA2 Mini Project 2: Random Starfield
    • U3LA3.1: Preload && Images
    • U3LA3.2: Tint && Image Manipulation
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA2 Mini Project 3: Vision Board
    • U3LA3.3: Images and Arrays with ml5
    • U3LA4.1 Fonts && Text Styling
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA4 Mini Project 4: Typography
    • U3LA5.1: Loading & Playing Sound Files
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA5 Mini Project: Keyboard/Patatap
  • ๐ŸŽจ๐ŸŽจUnit 3 Final Project: Random Meme Generator
  • Unit 4: Motion, Animation, Transformation
    • ๐Ÿ”ฎ๐Ÿ”ฎ Unit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move In All Directions & Make it Bounce
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒ U4LA.1: Make a Floating DVD Logo
    • U4LA2.1: Translation Battleship
    • U4LA2.2: Rotations
    • U4LA3.1: Sine & Oscillating Motion
    • U4LA3.2: Cosine & Circular Motion
    • ๐ŸŽจ๐ŸŽจ Unit 4 Final Project: Animated Greeting Card/PSA
  • Unit 5: Functions & Abstraction
    • ๐Ÿ”ฎ๐Ÿ”ฎ Unit 5 Overview
    • U5LA1.1: What is Abstraction?
    • U5LA1.2: Intro to Functions & Function Calls
    • U5LA1.3: Draw with Functions
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒ U5LA1 Mini Project: Custom Function Library
    • U5LA2.1: Data Type Scavenger Hunt
    • U5LA2.2: Functions that Return Values
    • U5LA2.3: Functions with Purpose
    • U5LA2.4: Functions with Boolean Returns
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒ U5LA2 Mini Project: Build Your Own Challenge
    • ๐Ÿ”ฎ๐Ÿ”ฎ Unit 5 Final Project: Menu of Options
Powered by GitBook
On this page
  • Prompt
  • Output
  • Exemplars
  • Culturally Responsive Best Practice
  • Extensions

Was this helpful?

  1. Unit 1: Drawing, Variables, and Random

๐Ÿ—ƒU1LA1 Mini Project: Taijitu Symbol

How can code be used as a creative and expressive medium?

PreviousU1LA1.4 Various Shapes, Stroke, Weight, FillNextU1LA2.1 Intro to Variables - System Variables

Last updated 2 years ago

Was this helpful?

Prompt

Taijitu is a symbol representing the religious and philosophical tradition of Taoism (also called Daoism). The term means a โ€˜diagram of the supreme ultimate,โ€™ and it refers to the famous Chinese concept of yin and yang, of opposites existing in complete harmony.

The Taijitu symbol consists of two (one black and one white) swirling โ€˜teardropโ€™ shapes that fit within each other to form a perfect circle. Each figure contains a part of the other so that there is a black dot in the white half of the circle and a white dot in the black portion. These seemingly opposing, but complementary halves make a whole and thus, are incomplete without each other.

The dark or shady side represents Yin, and the white or sunny side represents Yang. Yin is associated with femininity, earth, water, moon and nighttime and is considered passive, cold, soft, yielding and wet. Meanwhile, Yang is associated with masculinity, sin, fire, sky, and daytime and is considered aggressive, hot, hard and dry. The white symbolizes delusion and black represents enlightenment.

Ted Ed video on Yin Yang

Project adapted from: Susan Evanโ€™s 1-day p5.js workshop

Directions: Your task is to recreate the Taijitu symbol using code in p5.

Requirements:

  1. Use shapes that we covered in this unit

  2. Add comments to the different shapes

  3. Use fill and stroke the change the colors of the shape

  4. Center it in the middle of the canvas.

Writing Prompt:

  • Look around the room you are in and see how many yin/yang relationships you can see. List them.

  • Research and find out what are some pros and cons to coding.

Output

Exemplars

  • MILD: p5 editor | repl

  • MEDIUM: p5 editor | repl

  • SPICY: p5 editor | repl

Culturally Responsive Best Practice

This project not only assesses students' ability to understand how to sequence functions in a program to get interesting results on screen, but it does so through a symbol that has a rich meaning and background. This can be a great moment for students to learn about other cultures, but there are also ways to make it more relevant to your student population and even tie it into other courses! Most sophomores in my class are quick to connect this to what they have learned about Daoism in their World History 1 course freshman year - consider looping your social studies teachers in on this project to help support learning.

Additionally, this is a project that could be completed in small groups/whole class to make room for exploration that is more culturally driven. After the challenge and practice of recreating a Taijitu symbol, you could ask students to think of any important symbols to them or in their culture and then recreate those in code. (They could also be asked to imagine/brainstorm things that are important to them/their culture and create a symbolic representation that involves overlapping shapes!) This is also a great extension activity for students who move quickly through the course.

Extensions

Directions: Create your own meaningful symbol, like the Taijitu it should have meaning and represent something.

Writing Prompt:

  • Explain the meaning to your symbol.

  • Why did you choose to create this symbol?

  • If you can add colors how would it play a role in your symbol?

๐Ÿ—ƒ๏ธ
Taijitu Or Yin-Yang Symbol
p5.js Generated Taijitu Symbol on grey background