CompSci//Media Arts - Animate our House

CompSci//Media Arts

Adding Animation
to Our House

Today's Goal

We'll use the concepts we previously covered to add
animation to the house we created a couple classes ago.

Completed

Basics of HTML & CSS
Block-based Programming
Code Comments
Basics of Animation

Today

More P5.js
Adding Animation to our House

Upcoming

More P5.js
More JavaScript

Typing Practice

No typing practice today.

Course Option Questions

A couple of y'all have been asking me about some of your course options for next year... I made a short video to go over a few things we've talked about.

pre-reqs-for-cte-pathways.mp4

If you want to see some student work from previous years in Computer Science & Principles of Arts, A/V, & Comm:
https://sites.google.com/springbranchisd.com/compsciwais/home

Keep in mind, your counselors are here to help you too.
You can ask them questions about some of these topics and pathways too.

Main Task:
Animating our House

First...
I'm going to walk your through animating some of the parts of my house.

animate-the-house.mp4

Second...
what else can you animate in your illustration?

What else might you animate?
As the sky gets darker, the clouds start to seem really bright, you might adjust their color as the sky gets darker too. You could actually adjust the color of everything if you wanted...

You could also add a moon and stars at night...

Really want a challenge? What about rain?

More animation = better grade.

submit?

On your slide for today, add a video showing your animated house using variables in p5.js.

In case you forgot how to add video to your slides:

Take a video of this, add the video to your slide for today. You can start screen record by pressing Command + Shift + 5 .

To add video to your slide, you'll need to first upload it Google Drive, then you can use the Insert drop down menu to add it to your slide. Make sure the sharing settings on your video are set to public.

Page updated

Report abuse