Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview - - PowerPoint PPT Presentation

▶
drawing on the web class 1 csci ua 380 introduction and
SMART_READER_LITE
LIVE PREVIEW

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview - - PowerPoint PPT Presentation

Feb 18, 2023 341 likes •669 views

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview Graphics on the Web Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview GIF: Graphics

slide-1
SLIDE 1

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

slide-2
SLIDE 2

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Graphics on the Web

slide-3
SLIDE 3

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Graphics on the Web Raster Graphics

GIF: Graphics Interchange Format JPEG: Joint Photographic Experts Group PNG: Portable Network Graphics WebP: A new, lossless and lossy image compression format for the Web

slide-4
SLIDE 4

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

SVG: Scalable Vector Graphics

Graphics on the Web

CSS (vector-like capability)

Vector Graphics

slide-5
SLIDE 5

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Graphics on the Web The Internet and the Web

The Internet and the Web are separate but related things. The Internet is a massive network of networks, a networking infrastructure that connects computers globally. The Web is a way of accessing information over the medium of the Internet, an information sharing model that is built on top of the Internet. The Web is just one of the ways that information can be disseminated over the Internet but it is the one we are focused on in this class.

slide-6
SLIDE 6

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

“The future is already here—it’s just

Graphics on the Web

not evenly distributed.”

State of Flux

—William Gibson

slide-7
SLIDE 7

Drawing on the Web CSCI-UA 380

Graphics on the Web State of Flux

Class 1 Introduction and Overview

The technologies discussed in this class are evolving. They are agreed upon standards but not evenly implemented. Modern browsers support almost everything we will do, but not everyone uses up-to-date, modern browsers (and that’s ok). Web graphics technologies are, as ever, in a state of flux.

slide-8
SLIDE 8

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Drawing on the Web

slide-9
SLIDE 9

Drawing on the Web CSCI-UA 380

Drawing on the Web Project-Orientation

Class 1 Introduction and Overview

We will explore the ways in which code can be applied to generate interactive, Web-based graphics. We will not be focusing on just one language or technique, but several. While we will spend the most time in JavaScript, this will be during the second half of the semester. You are encouraged to integrate multiple techniques in your work.

slide-10
SLIDE 10

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Review foundations

Drawing on the Web

Explore new modes of implementation

HTML and CSS

slide-11
SLIDE 11

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Drawing on the Web SVG

Scalable Vector Graphics Hand-coding Illustration software Creating an icon system Integration with CSS

slide-12
SLIDE 12

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Transitions

Drawing on the Web

Transforms

CSS Animation

Animation

slide-13
SLIDE 13




Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Drawing on the Web Version Control and Collaboration

GitHub Iterative approach to creative code Maintain snapshots of work Project collaboration

slide-14
SLIDE 14

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Review essentials

Drawing on the Web

Enhance interactivity

JavaScript

Animation techniques Objects, properties, and methods

slide-15
SLIDE 15

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Using JavaScript with HTML5

Drawing on the Web

The canvas element allows you to

HTML Canvas

draw raster graphics on the fly

slide-16
SLIDE 16

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Drawing in three dimensions on the

Drawing on the Web

Web

WebGL

Websites as places rather than pages We will use the JS library, three.js

slide-17
SLIDE 17

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Drawing on the Web Outline

HTML and CSS SVG CSS Animation Version Control and Collaboration JavaScript HTML Canvas WebGL

slide-18
SLIDE 18

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Drawing on the Web !=

This course is not:

  • A complete beginner-level class
  • An advanced programming class
  • A comprehensive introduction to

JavaScript

  • A game development class
  • Fixed/static
slide-19
SLIDE 19
  • n the Web

[ CD

i6.cims. nyu.edu/~jc3436/380/

~

Ill\ ~

rn

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

slide-20
SLIDE 20

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

“Net art, like Process Art, Performance

Net Art

art and Happenings, is less an object for contemplation than an event or action that takes place over time.” —Mark Tribe/Reena Jana

slide-21
SLIDE 21

N r Diagram

e s here

1110 II 10

  • 1

7

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview http://www.mtaa.net/mtaaRR/off-line_art/snad.html

slide-22
SLIDE 22

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Introductions

slide-23
SLIDE 23


 
 


Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Introductions Me

Joshua Clayton Clinical Assistant Professor jclayton@cs.nyu.edu Office hours

  • Tuesday, 12:30–1:30 p.m.
  • Thursday, 3:30–4:30 p.m.

Room 420, Warren Weaver Hall cs.nyu.edu/cs/faculty/clayton

slide-24
SLIDE 24

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Introductions You

slide-25
SLIDE 25

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Syllabus

slide-26
SLIDE 26

Drawing on the Web CSCI-UA 380

Syllabus Attendance

Class 1 Introduction and Overview

You are expected to come to all classes and arrive on time. Please let me know in advance if you will be out for any reason. Please let me know if you miss class due to illness. Computers are encouraged in class during project development sessions. If you ever feel overwhelmed or need extra help, I will be available to you.

slide-27
SLIDE 27

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Syllabus Texts

Using SVG with CSS3 and HTML5: Vector Graphics for Web Design Eloquent JavaScript: A Modern Introduction to Programming Mass Effect: Art and the Internet in the Twenty-First Century

slide-28
SLIDE 28

Drawing on the Web CSCI-UA 380

Syllabus Assignments

Class 1 Introduction and Overview

There will be seven assignments and

  • ne final project.

Details of each will be posted on the class website. All assignments are due before class, submitted via NYU Classes. Do your best to turn work in on time. 10% will be deducted for each class day after the deadline. No assignments will be accepted after three classes or after the final exam.

slide-29
SLIDE 29

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

Assignments: 40%

Syllabus

Midterm exam: 20%

Grading Rubric

Final project: 20% Final exam: 20%

slide-30
SLIDE 30

Drawing on the Web Class 1 CSCI-UA 380 Introduction and Overview

cs.nyu.edu/courses/spring19/CSCI-UA.0380-001