メニュー

70

for 3 classes

GET rect(): p5.js を使用したインタラクティブグラフィックス

9 人が学習を完了しました

年齢 10 歳-15 歳

ライブグループクラス

p5.js Web エディターを使用してインタラクティブなグラフィックを構築します。 https://get-rect-creations.tumblr.com/

Evan Rushton

平均評価:

5.0

レビュー数:

(2 レビュー)

オンラインライブ授業

週に1回、 3 週間

3 人-10 人 1クラスあたりの学習者

60 分

About 学習の概要講師レビュー

含まれるもの

3 ライブミーティング

3 授業時間

この文章は自動翻訳されています

このクラスで学べること

Students will be able to draw and color shapes on a canvas using a javascript library called p5.js. Additionally, participants will learn how to make their graphics interactive! They will learn through activities where they get to use their own creativity to design digital sketches. 

In the first activity, learners will choose a famous work of art or their own inspirational image, and create a digital sketch of it with p5. 

In the second activity, learners will an create animated gif of their sketch and upload it to the class Tumblr page: https://get-rect-creations.tumblr.com/.

In the third activity, learners will use a tensorflow library called poseNet, to create Instagram-like filters on their own webcam video. This activity is not supported on Internet Explorer or Microsoft Edge browsers.

As long as learners are able to type in a web browser and see images on the screen, they will be successful with this course. Progress is evaluated by the learners sharing their sketches via hyperlink. The instructor will ask students to share their screen in order to help them debug their code.

Students are expected to create a login for the p5.js web editor before the first session. If they are unable to complete an activity during class time, they are expected to complete it for homework. Please install Chrome or Firefox if you usually use Internet Explorer or Edge as your browser.

学習到達目標

Students will learn the foundations of drawing with picture elements (pixels) on a 2D canvas. These include but are not limited to: RGB values, x-y coordinates, points, lines, rectangles, ovals, stroke, fill, interaction and animation.

Students will learn some of the fundamentals of the javascript coding language including variables, functions, scope, loops, data structures, conditional statements and control logic.

その他の情報

受講に必要なもの

Course materials are free and will be shared via google docs and hyperlinks. Please create a login for the p5.js web editor before the first session.

外部リソース

このクラスでは、Outschool内のクラスルームに加えて、以下を使用します。

先生について

Evan Rushton

参加しました December, 2018

5.0

2レビュー

プロフィール

教師の専門知識と資格

I coach math teachers and support them to bring technology tools into their classrooms. I am inspired by the prospect of opening learners' eyes to the possibilities of online learning environments. My goal is to introduce learners to affinity groups where they can continue to pursue their interests freely online. This course in particular is an introduction to Dan Shiffman and his youtube channel, "The Coding Train". 

 I studied CS at Stanford: https://evanrushton.wixsite.com/learndesigntech/technology

I am an active Data Scientist: https://www.evanrushton.com/

レビュー

その他の人気クラス

70

GET rect(): p5.js を使用したインタラクティブ グラフィックス

年齢 10 歳-15 歳

ライブグループクラス

Evan Rushton

含まれるもの

3 ライブミーティング

このクラスで学べること

学習到達目標

その他の情報

受講に必要なもの

外部リソース

先生について

Evan Rushton

教師の専門知識と資格

レビュー

その他の人気クラス

Javascript / P5.Js コンピュータサイエンスコーディングクラブ：ゲーム、アニメーションなど

Javascript/P5.Js クリエイティブ コーディング: ゲーム、アニメーションなどを作成しましょう!

JavaScript 1

初心者のためのグラフィックデザイン

セメスターコーディングキャンプ: 子供向けの Javascript アドベンチャー!

グラフィックデザインとCanvaの基本

Canvaでグラフィックデザインを探索

Javascriptアバタービルダー：デジタルキャラクターをデザイン＆コーディング

プロジェクトベースの JavaScript コーディング (レベル 1)

サマーキャンプ: 子供向けプロジェクトベースの Javascript (レベル 2)

サマーキャンプ: 子供向け Javascript コーディング (入門)

Javascript の学期: 基礎から大きなアイデアまで!

プロジェクトベースの JavaScript コーディング (レベル 2)

初心者向けグラフィックデザイン：1対1

グラフィックデザイン101 - キャンプ

初心者のためのグラフィックデザイン - ブートキャンプ 1

もっと探索する

About

Outschoolで学ぶ

教える

サポート

金融支援

Outschool International

個別指導とレッスン

さらに探索する

年齢別クラス

学年別クラス

アプリを入手

GET rect(): p5.js を使用したインタラクティブグラフィックス

Javascript/P5.Js クリエイティブコーディング: ゲーム、アニメーションなどを作成しましょう!