Creative Computing

Index of /

Week 5

vibes

This Week

Using Logic

if
else if
else

In plain english, we often say things like this:

if this thing happens, do something. Otherwise if this other thing happens, do something else. If all else fails, go to the backup plan.

Using JavaScript syntax, that same statement might look like this:

if ( this == true ) { 
    do something 
} 

else if ( this other thing == true ) { 
    do something 
} 

else { 
    backup plan! 
}

Finding Patterns

The next set of assignments will be based around a single unit repeated to create a 4×4 grid of squares. There are several ways to create a grid. We can create a grid by stacking units one by one, left to right, until that grid is full.

Or we can create a grid by composing 4 rows of 4 columns each.

When we build our grids using rows and columns, we create a set of axes we can reference to define more specific coordinates. We use such coordinate systems when we play Chess or Battle Ship.

half

In addition to specifying the axis (i.e., row or column), we can use math and look for patterns to target groups of coordinates. For example: if row is equal to column.

if ( row == column ) { 
    // do something
}

Or maybe we'd like to look for squares evenly divisible by 2 when we add row + column.

if ( (row + column) % 2 == 0 ) { 
    // do something
}

Using subtraction, we could target squares less than -1 or greater than 1:

if ( (row - column) > 1 || (row - column) < -1 ) { 
    // do something
}

What else?

Assignment

DUE WEEK 6

  1. Read & Review. Read the content above about logic & patterns.
  1. Repeatable unit: Design a program that creates a pattern you find interesting and beautiful. Use this template to get started. We will approach this project in steps, the first of which is to get your CSS and pattern states established:

    Requirements

    Your unit should exist in 3 forms:

    • A default state (.square + your initials i.e., .th if your name is Tiff Hockin) that is unique to your pattern.
    • At least two additional visual states, created using conditional statements and CSS classes.

    Considerations

    • Does your pattern have a theme?
    • What is the system behind your pattern? Is your logic clear to the uninitiated?
    • Is it exciting?

Resources

General
stackoverflow.com
You can find the answer to almost any question here!

JavaScript
www.w3schools.com/js/js_comparisons.asp ⟵ Comparison & Logical Operators
jsforcats.com ⟵ So easy, your cat can do it!

CSS
CSS Shapes
CSS Layout Basics ⟵ An interactive guide to some basic CSS principles
learnlayout.com/toc.html
www.w3schools.com/css/
How to make a triangle with CSS

CSS Properties to Experiment With

background-image
background-size
border-color
border-style
border-radius
box-shadow (and box-shadow generator!)

If you’re feeling ambitious …

Pseudo classes
:nth-child
:hover
cursor

Animate, Transition & Transform
CSS Animations
CSS Transform
CSS Transitions