University of Cincinnati. P5.JS: Getting Started. p5.js
|
|
- Steven Austin
- 6 years ago
- Views:
Transcription
1 p5.js P5.JS: Getting Started Matthew Wizinsky University of Cincinnati School of Design HTML + CSS + P5.js File Handling & Management Environment Canvas Coordinates Syntax Drawing Variables Mouse Position Programming Modes Conditionals Loops Color Color Modes Language Reference Examples based on processing.org and Casey Reas, Ben Fry: Processing: A Programming Handbook for Visual Designers And Artists (MIT Press) and p5js.org examples by Daniel Schiffman.
2 What is P5.js? P5.JS: Getting Started pg. 1 p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today s web. Using the original metaphor of a software sketchbook, p5.js has a full set of drawing functionality. However, you re not limited to your drawing canvas, you can think of your whole browser page as your sketch! For this, p5.js offers add-on libraries that make it easy to interact with other HTML5 objects, including text, input, video, webcam, and sound.» Free to download, open source, communitiy-based development» Interactive web applications and prototypes» Libraries extend core capabilities: sound, text, webcam, &c.» In active development, new things on the way» Well documented with many tutorials Open source refers to a computer program in which the source code is available to the general public for use and/or modification from its original design. Open source code is typically a collaborative effort where programmers improve upon the source code and share the changes within the community so that other members can help improve it further.
3 HTML + CSS + JavaScript P5.JS: Getting Started pg. 2 CSS / presentation What does it look like? Javascript / behavior What does it do? HTML / strucutre What does it mean?
4 HTML + CSS + P5.js P5.JS: Getting Started pg. 3 CSS and Javascript files (including your sketch and the p5 libraries) are separate files, linked to the HTML page.
5 File Handling & Management P5.JS: Getting Started pg. 4 Remember: Each sketch has its own directory/folder where the main sketch file is located (sketch.js) as well as the HTML file that contains it (index.html). Example: For a project named demo_01 the directory folder will be called demo_01 while the sketch itself will (by default) be called sketch.js From p5, you can reveal the content and location of your sketch folder by choosing View/Show sketch folder in the menu bar or by pressing command+k.
6 Environment P5.JS: Getting Started pg. 5 You can use the code editor of your choice or the beta version of the official p5 editor. Run: Compiles the code, opens a display window, and runs the program inside (you can also open file directly in a browswer). Stop: Terminates program. Tabs: Open file in the same project (i.e., html, css). Sidebar: Shortcuts to files in same project (i.e., html, css). New File: Creates new file in same project (i.e., js, html, css). New Project: New project with a new folder. Preferences: Editor preferences.
7 Canvas P5.JS: Getting Started pg. 6 The size of the display canvas is controlled with the createcanvas() function. This function has two parameters: the width first and the height second: createcanvas(100, 100); To create a canvas as large as the browser window: createcanvas(windowwidth, windowheight); To control the canvas position, you first create a canvas variable, then set its position. var cnv = createcanvas(100, 100); cnv.position(50, 100);
8 Coordinates P5.JS: Getting Started pg. 7 A position on the screen is comprised of an x-coordinate and a y-coordinate. The x-coordinate is the horizontal distance from the origin and the y-coordinate is the vertical distance. The origin is the upper left corner of the window or canvas. In a 400 pixel wide by 400 high window, [0, 0] is the upper vleft pixel, and the last visible pixel in the lower-right corner of the screen is at [399, 399]
9 Syntax P5.JS: Getting Started pg. 8 Elements of the language and how they are used: Comment Statement Statement Terminator Function Parameter //example statements line(10, 80, 30, 40); i = i + 1; var txt = Daniel ; print(txt);
10 Drawing P5.JS: Getting Started pg. 9 Defining the canvas size: createcanvas(300, 300); Setting the background color: background(0); //black background(255); //white background(255, 0, 0); //red in rgb syntax
11 Drawing Graphic Primitives P5.JS: Getting Started pg. 10 createcanvas(200, 200); //draws a point at x=10 and y=20 point(10, 20); // draws a line from x1, y1 to x2, y2 line(10, 10, 100, 100); // draws a rectangle over x1, y1, width, height rect(10, 10, 180, 140); // draws an ellipse x, y, width, height ellipse(120, 50, 40, 40); // draws a triangle x1, y1, x2, y2, x3, y3 triangle(120, 120, 80, 160, 160, 180); // draws a four sided polygon x1, y1, x2, y2, x3, y3, x4, y4 quad(38, 31, 86, 20, 69, 63, 30, 76);
12 Defining Stroke and Fill Color P5.JS: Getting Started pg. 11 stroke(120); // gray stroke stroke(0, 0, 255); // blue stroke stroke(200, 80); // gray fill, transparent nostroke(); // no Stroke fill(100); // gray fill fill(255, 0, 0); // red fill fill(0, 255, 0, 127); // green fill semi transparent nofill(); // no Fill
13 Variables P5.JS: Getting Started pg. 12 _Used to store values _Have a name and a value (can be anything but descriptive names are helpful!) _Case-sensitive _Name must not begin with special characters _There are different variable types, but they are all declared with var var name; // Declare a variable, type is unknown name = "Daniel"; // Assign a string variable var number = 32; // Declare and assign an integer variable var counter = 12.2; // Declare and assign a float variable print(number); print(name); print(counter);
14 Mouse Position P5.JS: Getting Started pg. 13 mousex: x-position of the mouse within the canvas mousey: y-position of the mouse within the canvas line(mousex, 20, mousex, 80); The boolean mouseispressed returns true while mouse is pressed, false if not. function draw() { if (mouseispressed) { fill(0); else { fill(255); rect(25, 25, 50, 50);
15 Programming Modes P5.JS: Getting Started pg. 14 The setup() function establishes initial settings for the program, which run only once! The draw() function makes it possible for a program to run continuously. This is required to create animation and interactive programs. Everything in draw() runs every single frame! function setup() { createcanvas(windowwidth, windowheight); background(255); //background draws only once if in setup nostroke(); fill(255, 204, 0); function draw(){ background(255); //background draws every frame if in draw ellipse(mousex, mousey, 50, 50);
16 Conditionals P5.JS: Getting Started pg. 15 Statements within the if section are only executed in case the condition (i < 35) is true; statements within the else section are executed only in case the condition is false. function setup() { createcanvas(300, 300); function draw(){ if (mousex < 150) { line( 0, mousey, 150, mousey ); else { line( 150, mousey, 300, mousey );
17 Loops P5.JS: Getting Started pg. 16 The for() loop uses defined conditions for (var i=0; i<10; i++) { line(0, i*5, 100, i*5); for (init; test; update) { do something;
18 Color P5.JS: Getting Started pg. 17 The default color mode for p5.js is RGB. var c1 = color(102, 102, 0); fill(c1); nostroke(); rect(30, 20, 55, 55); Syntax: color(gray) color(gray, alpha) color(value1, value2, value3) color(value1, value2, value3, alpha) color(hex) color(hex, alpha)
19 Color Mode P5.JS: Getting Started pg. 18 The default color mode for p5.js is RGB. You can use either RGB or HSB, corresponding to Red/Green/Blue and Hue/Saturation/Brightness. function setup() { createcanvas(255, 255); colormode(hsb, 255); function draw() { for (var i = 0; i < 255; i++) { for (var j = 0; j < 255; j++) { stroke(i, j, 255); point(i, j); By default, colors are defined by values between 0 and 255 using the RGB color model. The colormode() function is used to change the numerical range used for specifying colors and to switch color systems. colormode(mode); colormode(mode, range);
20 Language Reference P5.JS: Getting Started pg There are many examples in the tutorials section of the p5.js website: Take a look at the libraries section and see how the functionality of p5.js can be expanded for specific interests and subjects.
Design Programming DECO2011
Design Programming DECO2011 Rob Saunders web: http://www.arch.usyd.edu.au/~rob e-mail: rob@arch.usyd.edu.au office: Room 274, Wilkinson Building Data, Variables and Flow Control What is a Variable? Computers
More informationCISC 1600 Lecture 3.1 Introduction to Processing
CISC 1600 Lecture 3.1 Introduction to Processing Topics: Example sketches Drawing functions in Processing Colors in Processing General Processing syntax Processing is for sketching Designed to allow artists
More informationmith College Computer Science CSC103 How Computers Work Week 6 Fall 2017 Dominique Thiébaut
mith College Computer Science CSC103 How Computers Work Week 6 Fall 2017 Dominique Thiébaut dthiebaut@smith.edu Ben Fry on Processing... http://www.youtube.com/watch?&v=z-g-cwdnudu An Example Mouse 2D
More informationCISC 1600, Lab 2.1: Processing
CISC 1600, Lab 2.1: Processing Prof Michael Mandel 1 Getting set up For this lab, we will be using Sketchpad, a site for building processing sketches online using processing.js. 1.1. Go to http://cisc1600.sketchpad.cc
More information+ Inheritance. Sometimes we need to create new more specialized types that are similar to types we have already created.
+ Inheritance + Inheritance Classes that we design in Java can be used to model some concept in our program. For example: Pokemon a = new Pokemon(); Pokemon b = new Pokemon() Sometimes we need to create
More informationConditional Events. Mouse events and Operators. Dr. Siobhán Drohan Mairead Meagher. Produced by:
Conditional Events Mouse events and Operators Produced by: Dr. Siobhán Drohan Mairead Meagher Department of Computing and Mathematics http://www.wit.ie/ Topics list Mouse Events Recap: Arithmetic Operators
More informationClass #1. introduction, functions, variables, conditionals
Class #1 introduction, functions, variables, conditionals what is processing hello world tour of the grounds functions,expressions, statements console/debugging drawing data types and variables decisions
More informationmith College Computer Science CSC103 How Computers Work Week 7 Fall 2017 Dominique Thiébaut
mith College Computer Science CSC103 How Computers Work Week 7 Fall 2017 Dominique Thiébaut dthiebaut@smith.edu Important Review Does the animation leave a trace? Are the moving objects move without a
More informationA B C D CS105 03a Interaction
Interaction Function Definition Events Built-in Variables CS105 03a Interaction 1 Which image is drawn by this code? strokeweight(10); stroke(0, 255, 0); // green line(99, 0, 0, 99); stroke(200, 0, 200);
More informationThe Processing language. Arduino and Processing.
IAT267 Introduc/on to Technological Systems Lecture 8 The Processing language. Arduino and Processing. 1 Course Project All teams submibed very interes/ng proposals One requirement for the project is to
More informationKhan Academy JavaScript Study Guide
Khan Academy JavaScript Study Guide Contents 1. Canvas graphics commands with processing.js 2. Coloring 3. Variables data types, assignments, increments 4. Animation with draw loop 5. Math expressions
More informationCISC 1600, Lab 3.1: Processing
CISC 1600, Lab 3.1: Processing Prof Michael Mandel 1 Getting set up For this lab, we will be using OpenProcessing, a site for building processing sketches online using processing.js. 1.1. Go to https://www.openprocessing.org/class/57767/
More informationUsing Methods. Methods that handle events. Mairead Meagher Dr. Siobhán Drohan. Produced by: Department of Computing and Mathematics
Using Methods Methods that handle events Produced by: Mairead Meagher Dr. Siobhán Drohan Department of Computing and Mathematics http://www.wit.ie/ Caveat The term function is used in Processing e.g. line(),
More informationIntroduction to Processing. Sally Kong
Introduction to Processing Sally Kong - Open Source Platform - Geared toward creating visual, interactive media - Created by Ben Fry and Casey Reas Basic Setup void setup() { size(800, 600); background(255);
More informationInteraction Design A.A. 2017/2018
Corso di Laurea Magistrale in Design, Comunicazione Visiva e Multimediale - Sapienza Università di Roma Interaction Design A.A. 2017/2018 5 Basics of Processing Francesco Leotta, Andrea Marrella Last update
More information1 Getting started with Processing
cisc3665, fall 2011, lab I.1 / prof sklar. 1 Getting started with Processing Processing is a sketch programming tool designed for use by non-technical people (e.g., artists, designers, musicians). For
More information1 Getting started with Processing
cis3.5, spring 2009, lab II.1 / prof sklar. 1 Getting started with Processing Processing is a sketch programming tool designed for use by non-technical people (e.g., artists, designers, musicians). For
More informationThe Processing language
The Processing language Developed by Ben Fry and Casey Reas at MIT in 2001 Related to the languages Logo and Java Free, open-source software processing.org contains many programming resources www.openprocessing.org
More informationPick a number. Conditionals. Boolean Logic Relational Expressions Logical Operators Numerical Representation Binary. CS Conditionals 1
Conditionals Boolean Logic Relational Expressions Logical Operators Numerical Representation Binary CS105 04 Conditionals 1 Pick a number CS105 04 Conditionals 2 Boolean Expressions An expression that
More informationGetting Started with Processing by Casey Reas and Ben Fry
Free Sampler Getting Started with Processing by Casey Reas and Ben Fry Copyright 2010 Casey Reas and Ben Fry. All rights reserved. Printed in the United States of America. Published by O Reilly Media,
More informationKimberly Nguyen Professor Oliehoek Introduction to Programming 8 September 2013
1. A first program // Create 200x200 canvas // Print favorite quote size(200, 200); println("it is what it is"); // Draw rectangle and a line rect(100,100,50,50); line(0,0,50,50); // Save as.pde. Can be
More informationCS110 Introduction to Computing Fall 2016 Practice Exam 1 -- Solutions
CS110 Introduction to Computing Fall 2016 Practice Exam 1 -- Solutions The exam will be closed-note and closed-book; please consider this fact before using your notes on this practice version. Please see
More informationInteraction Design A.A. 2017/2018
Corso di Laurea Magistrale in Design, Comunicazione Visiva e Multimediale - Sapienza Università di Roma Interaction Design A.A. 2017/2018 7 Conditionals in Processing Francesco Leotta, Andrea Marrella
More information2D Shapes. Creative Coding & Generative Art in Processing 2 Ira Greenberg, Dianna Xu, Deepak Kumar
2D Shapes Creative Coding & Generative Art in Processing 2 Ira Greenberg, Dianna Xu, Deepak Kumar Did you do this? Read Chapter 2 (pages 33-50) Read and do the Coordinate Systems & Shapes and Color tutorials
More informationTHE JAVASCRIPT ARTIST 15/10/2016
THE JAVASCRIPT ARTIST 15/10/2016 Objectives Learn how to program with JavaScript in a fun way! Understand the basic blocks of what makes a program. Make you confident to explore more complex features of
More informationExploring Processing
Exploring Processing What is Processing? Easy-to-use programming environment Let s you edit, run, save, share all in one application Designed to support interactive, visual applications Something we ve
More informationBasic Computer Programming (Processing)
Contents 1. Basic Concepts (Page 2) 2. Processing (Page 2) 3. Statements and Comments (Page 6) 4. Variables (Page 7) 5. Setup and Draw (Page 8) 6. Data Types (Page 9) 7. Mouse Function (Page 10) 8. Keyboard
More information1. Complete these exercises to practice creating user functions in small sketches.
Lab 6 Due: Fri, Nov 4, 9 AM Consult the Standard Lab Instructions on LEARN for explanations of Lab Days ( D1, D2, D3 ), the Processing Language and IDE, and Saving and Submitting. Rules: Do not use the
More informationWhat is a variable? A named locajon in the computer s memory. A variable stores values
Chapter 4 Summary/review coordinate system basic drawing commands and their parameters (rect, line, ellipse,background, stroke, fill) color model - RGB + alpha Processing IDE - entering/saving/running
More informationSolution Notes. COMP 151: Terms Test
Family Name:.............................. Other Names:............................. ID Number:............................... Signature.................................. Solution Notes COMP 151: Terms
More informationAn Introduction to Processing
An Introduction to Processing Creating static drawings Produced by: Mairead Meagher Dr. Siobhán Drohan Department of Computing and Mathematics http://www.wit.ie/ Topics list Coordinate System in Computing.
More informationCMPT-166: Sample Midterm
CMPT 166, Fall 2016, Surrey Sample Midterm 1 Page 1 of 11 CMPT-166: Sample Midterm Last name exactly as it appears on your student card First name exactly as it appears on your student card Student Number
More informationVisual Programming with Processing.js
Visual Programming with Processing.js About This Reference This write-up was written to help explain what the code does not. While it includes all the code and resource links, a document is not a good
More informationProcessing & Arduino in Tandem. Creating Your Own Digital Art Tools
Processing & Arduino in Tandem Creating Your Own Digital Art Tools Week 2 - Making your own drawing tool Using Processing to build a basic application Segment 1 - A Basic Drawing Program Change window
More informationLecture 7. Processing Development Environment (or PDE)
Lecture 7 Processing Development Environment (or PDE) Processing Class Overview What is Processing? Installation and Intro. Serial Comm. from Arduino to Processing Drawing a dot & controlling position
More informationProcessing. Data Visualization Programming Language. By Rutvi Joshi. Processing Visualization Language- By Rutvi Joshi
Processing Data Visualization Programming Language What is Processing? A Graphical Sketch Book and Environment, to graphically teach the fundamentals of computer science But it has evolved into a tool
More informationFireworks 3 Animation and Rollovers
Fireworks 3 Animation and Rollovers What is Fireworks Fireworks is Web graphics program designed by Macromedia. It enables users to create any sort of graphics as well as to import GIF, JPEG, PNG photos
More informationIntroduction to Processing
Processing Introduction to Processing Processing is a programming environment that makes writing programs easier. It contains libraries and functions that make interacting with the program simple. The
More informationRecall that creating or declaring a variable can be done as follows:
Lesson 2: & Conditionals Recall that creating or declaring a variable can be done as follows:! float radius = 20;! int counter = 5;! string name = Mr. Nickel ;! boolean ispressed = true;! char grade =
More informationWe will start our journey into Processing with creating static images using commands available in Processing:
Processing Notes Chapter 1: Starting Out We will start our journey into Processing with creating static images using commands available in Processing: rect( ) line ( ) ellipse() triangle() NOTE: to find
More informationWhat can we do with Processing? Let s check. Natural Language and Dialogue Systems Lab Guest Image. Remember how colors work.
MIDTERM REVIEW: THURSDAY I KNOW WHAT I WANT TO REVIEW. BUT ALSO I WOULD LIKE YOU TO TELL ME WHAT YOU MOST NEED TO GO OVER FOR MIDTERM. BY EMAIL AFTER TODAY S CLASS. What can we do with Processing? Let
More informationHO-1: INTRODUCTION TO FIREWORKS
HO-1: INTRODUCTION TO FIREWORKS The Fireworks Work Environment Adobe Fireworks CS4 is a hybrid vector and bitmap tool that provides an efficient design environment for rapidly prototyping websites and
More information[ the academy_of_code] Senior Beginners
[ the academy_of_code] Senior Beginners 1 Drawing Circles First step open Processing Open Processing by clicking on the Processing icon (that s the white P on the blue background your teacher will tell
More informationProcessing Assignment Write- Ups
Processing Assignment Write- Ups Exercise 1-1 Processing is not an elaborate series of points like connect the dots or is it? Can t be cause I got it all wrong when I mapped out each and every point that
More informationFunctions. Functions. nofill(); point(20, 30); float angle = map(i, 0, 10, -2, 2); parameters return values
Functions parameters return values 06 Functions 1 Functions Code that is packaged so it can be run by name Often has parameters to change how the function works (but not always) Often performs some computation
More informationCS110 Introduction to Computing Fall 2016 Practice Exam 1
CS110 Introduction to Computing Fall 2016 Practice Exam 1 The exam will be closed-note and closed-book; please consider this fact before using your notes on this practice version. Please see the abbreviated
More informationEXAMINATIONS 2016 TRIMESTER 2
EXAMINATIONS 2016 TRIMESTER 2 CGRA 151 INTRODUCTION TO COMPUTER GRAPHICS Time Allowed: TWO HOURS CLOSED BOOK Permitted materials: Silent non-programmable calculators or silent programmable calculators
More informationIteration in Programming
Iteration in Programming for loops Produced by: Mairead Meagher Dr. Siobhán Drohan Department of Computing and Mathematics http://www.wit.ie/ Topics list There are three types of loop in programming: While
More informationCOMP Summer 2015 (A01) Jim (James) Young jimyoung.ca
COMP 1010- Summer 2015 (A01) Jim (James) Young young@cs.umanitoba.ca jimyoung.ca Don t use == for floats!! Floating point numbers are approximations. How they are stored inside the computer means that
More informationCISC 1600, Lab 2.2: Interactivity in Processing
CISC 1600, Lab 2.2: Interactivity in Processing Prof Michael Mandel 1 Getting set up For this lab, we will again be using Sketchpad, a site for building processing sketches online using processing.js.
More informationDrawing a Circle. 78 Chapter 5. geometry.pyde. def setup(): size(600,600) def draw(): ellipse(200,100,20,20) Listing 5-1: Drawing a circle
5 Transforming Shapes with Geometry In the teahouse one day Nasrudin announced he was selling his house. When the other patrons asked him to describe it, he brought out a brick. It s just a collection
More informationWatch the following for more announcements
Review "plain text file" loadstrings() split() splittokens() selectinput() println(), float(), int(), can take an array argument, will return an array easy way to convert an array of Strings to an array
More informationComputer Graphics. Interaction
Computer Graphics Interaction Jordi Linares i Pellicer Escola Politècnica Superior d Alcoi Dep. de Sistemes Informàtics i Computació jlinares@dsic.upv.es http://www.dsic.upv.es/~jlinares processing allows
More informationHO-FL1: INTRODUCTION TO FLASH
HO-FL1: INTRODUCTION TO FLASH Introduction Flash is software authoring package for creating scalable, interactive animations (or movies) for inclusion in web pages. It can be used to create animated graphics,
More informationIMAGE PROCESSING OVERVIEW
IMAGE PROCESSING OVERVIEW During this section of the workshop, participants will have an opportunity to learn the fundamentals of image processing. The concepts explored in this section have familiar applications
More informationProcessing Presentation by Ben Leduc-Mills
Processing http://processing.org Presentation by Ben Leduc-Mills Processing: History Processing is a free, open-source Java-based framework as well as an Integrated Development Environment (IDE). It was
More informationThe Processing Programming Environment. By: Richard Baldwin
The Processing Programming Environment By: Richard Baldwin The Processing Programming Environment By: Richard Baldwin Online: < http://cnx.org/content/col11492/1.5/ > C O N N E X I O N S Rice University,
More informationThis is the vector graphics "drawing" technology with its technical and creative beauty. SVG Inkscape vectors
1 SVG This is the vector graphics "drawing" technology with its technical and creative beauty SVG Inkscape vectors SVG 2 SVG = Scalable Vector Graphics is an integrated standard for drawing Along with
More informationPractice Written Examination, Fall 2016 Roger B. Dannenberg, instructor
15-104 Practice Written Examination, Fall 2016 Roger B. Dannenberg, instructor Possibly useful function signatures (italics mean an expression goes here ): createcanvas(w, h); width height key background(r,
More informationFinal Exam Winter 2013
Final Exam Winter 2013 1. Which modification to the following program makes it so that the display shows just a single circle at the location of the mouse. The circle should move to follow the mouse but
More informationCSE120 Wi18 Final Review
CSE120 Wi18 Final Review Practice Question Solutions 1. True or false? Looping is necessary for complex programs. Briefly explain. False. Many loops can be explicitly written out as individual statements
More informationOld 257 Exam #2s for Practice
Old Exam #2s 257/757 Exploring Programming with Graphics Page 1 Old 257 Exam #2s for Practice Exams will be taken on Thursday March 27 in the cluster. You will have the entire class time to do the exam.
More informationINTRODUCTION TO PROCESSING. Alark Joshi, Amit Jain, Jyh-haw Yeh and Tim Andersen
INTRODUCTION TO PROCESSING Alark Joshi, Amit Jain, Jyh-haw Yeh and Tim Andersen What is Processing? Processing is a programming language designed to make programming easier Developers were frustrated with
More informationc.def (pronounced SEE-def) Language Reference Manual
c.def (pronounced SEE-def) Macromedia Flash TM animation language Language Reference Manual Dennis Rakhamimov (dr524@columbia.edu), Group Leader Eric Poirier (edp29@columbia.edu) Charles Catanach (cnc26@columbia.edu)
More informationCISC 1600 Lecture 2.2 Interactivity&animation in Processing
CISC 1600 Lecture 2.2 Interactivity&animation in Processing Topics: Interactivity: keyboard and mouse variables Interactivity: keyboard and mouse listeners Animation: vector graphics Animation: bitmap
More informationCSS worksheet. JMC 105 Drake University
CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html
More informationWhat is a variable? a named location in the computer s memory. mousex mousey. width height. fontcolor. username
What is a variable? a named location in the computer s memory mousex mousey width height fontcolor username Variables store/remember values can be changed must be declared to store a particular kind of
More informationUnit 21 - Creating a Navigation Bar in Macromedia Fireworks
Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Items needed to complete the Navigation Bar: Unit 21 - House Style Unit 21 - Graphics Sketch Diagrams Document ------------------------------------------------------------------------------------------------
More informationAll program statements you write should be syntactically correct. Partial credit is not guaranteed with incorrect use of syntax.
With Solutions in Red CS110 Introduction to Computing Fall 2012 Section 2 Exam 1 This is an open notes exam. Computers are not permitted. Your work on this exam must be your own. Answer all questions in
More informationLoops. Variable Scope Remapping Nested Loops. Donald Judd. CS Loops 1. CS Loops 2
Loops Variable Scope Remapping Nested Loops CS105 05 Loops 1 Donald Judd CS105 05 Loops 2 judd while (expression) { statements CS105 05 Loops 3 Four Loop Questions 1. What do I want to repeat? - a rect
More informationAbout Freeway. Freeway s Tools and Palettes
About Freeway The most important thing to appreciate before you start a site in Freeway is how the process works, especially if you have tried other Web publishing software before. Freeway is not an HTML
More informationInteraction Design A.A. 2017/2018
Corso di Laurea Magistrale in Design, Comunicazione Visiva e Multimediale - Sapienza Università di Roma Interaction Design A.A. 2017/2018 8 Loops and Arrays in Processing Francesco Leotta, Andrea Marrella
More informationRepetition is the reality and the seriousness of life. Soren Kierkegaard
6 Loops Loops 81 Repetition is the reality and the seriousness of life. Soren Kierkegaard What s the key to comedy? Repetition. What s the key to comedy? Repetition. Anonymous In this chapter: The concept
More informationGIMP WEB 2.0 ICONS. GIMP is all about IT (Images and Text) OPEN GIMP
GIMP WEB 2.0 ICONS Web 2.0 Banners: Download E-Book WEB 2.0 ICONS: DOWNLOAD E-BOOK OPEN GIMP GIMP is all about IT (Images and Text) Step 1: To begin a new GIMP project, from the Menu Bar, select File New.
More informationCISC 1600, Lab 2.3: Processing animation, objects, and arrays
CISC 1600, Lab 2.3: Processing animation, objects, and arrays Prof Michael Mandel 1 Getting set up For this lab, we will again be using Sketchpad. sketchpad.cc in your browser and log in. Go to http://cisc1600.
More informationThe way I feel about music is that there is no right and wrong. Only true and false. Fiona Apple. true false false
5 Conditionals Conditionals 59 That language is an instrument of human reason, and not merely a medium for the expression of thought, is a truth generally admitted. George Boole The way I feel about music
More informationGetting Started in Java CIS 110
Getting Started in Java CIS 110 2 Your First Program Program name 3 Your First Program The 4 li es aside fro the System.out li e are o sidered the Scaffolding of the program. Section 1.1 4 Your First Program
More informationCISC 1600 Lecture 2.2 Interactivity&animation in Processing
CISC 1600 Lecture 2.2 Interactivity&animation in Processing Topics: Interactivity: keyboard and mouse variables Interactivity: keyboard and mouse listeners Animation: vector graphics Animation: bitmap
More informationQuestion 1 (10 points) Write the correct answer in each of the following: a) Write a Processing command to create a canvas of 400x300 pixels:
Question 1 (10 points) Write the correct answer in each of the following: a) Write a Processing command to create a canvas of 400x300 pixels: size(400, 300); b) After the above command is carried out,
More informationCISC 1600, Lab 3.2: Interactivity in Processing
CISC 1600, Lab 3.2: Interactivity in Processing Prof Michael Mandel 1 Getting set up For this lab, we will be using OpenProcessing, a site for building processing sketches online using processing.js. 1.1.
More informationLayout with Layers and CSS
Layout with Layers and CSS Today we're going to make a Web site layout. Preparatory Step 1. Inside your folder create a new folder and name it layout. 2. Inside the layout folder create a new folder and
More informationSten-SLATE ESP. Graphical Interface
Sten-SLATE ESP Graphical Interface Stensat Group LLC, Copyright 2016 1 References www.arduino.cc http://esp8266.github.io/arduino/versions/2.1.0/doc/reference.html 2 Graphical Interface In this section,
More informationAdobe Dreamweaver CC 17 Tutorial
Adobe Dreamweaver CC 17 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site
More informationGIMP WEB 2.0 BUTTONS
GIMP WEB 2.0 BUTTONS Web 2.0 Navigation: Bar with Icons WEB 2.0 NAVIGATION: NAVIGATION BAR WITH ICONS This navigation bar will be designed with four clickable text links and icon links. In the Menus section,
More informationTransform 1: Translate, Matrices
Transform 1: Translate, Matrices This unit introduces coordinate system transformations and explains how to control their scope. Syntax introduced: translate(), pushmatrix(), popmatrix() The coordinate
More informationGraphics. HCID 520 User Interface Software & Technology
Graphics HCID 520 User Interface Software & Technology PIXELS! 2D Graphics 2D Graphics in HTML 5 Raster Graphics: canvas element Low-level; modify a 2D grid of pixels.
More informationGIMP WEB 2.0 ICONS. GIMP is all about IT (Images and Text) OPEN GIMP
GIMP WEB 2.0 ICONS or WEB 2.0 ICONS: MEMO Web 2.0 Icons: Memo GIMP is all about IT (Images and Text) OPEN GIMP Step 1: To begin a new GIMP project, from the Menu Bar, select File New. At the Create a New
More informationAdobe Dreamweaver CS5 Tutorial
Adobe Dreamweaver CS5 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
More informationEXAMINATIONS 2017 TRIMESTER 2
EXAMINATIONS 2017 TRIMESTER 2 CGRA 151 INTRODUCTION TO COMPUTER GRAPHICS Time Allowed: TWO HOURS CLOSED BOOK Permitted materials: Silent non-programmable calculators or silent programmable calculators
More informationCOMP Summer 2015 (A01) Jim (James) Young jimyoung.ca
COMP 1010- Summer 2015 (A01) Jim (James) Young young@cs.umanitoba.ca jimyoung.ca final float MAX_SPEED = 10; final float BALL_SIZE = 5; void setup() { size(500, 500); void draw() { stroke(255); fill(255);
More informationMacromedia - Fireworks TechNotes: How to create transparent Pop-up Menus
Page 1 of 6 Home > Products > Fireworks > Support > TechNote Index How to create transparent Pop-up Menus Pop-up Menus can be structured to have transparent or translucent backgrounds. Modifying the Pop-up
More informationADOBE DREAMWEAVER CS4 BASICS
ADOBE DREAMWEAVER CS4 BASICS Dreamweaver CS4 2 This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
More informationif / if else statements
if / if else statements December 1 2 3 4 5 Go over if notes and samples 8 9 10 11 12 Conditionals Quiz Conditionals TEST 15 16 17 18 19 1 7:30 8:21 2 8:27 9:18 3 9:24 10:14 1 CLASS 7:30 8:18 1 FINAL 8:24
More informationScalable Vector Graphics (SVG) vector image World Wide Web Consortium (W3C) defined with XML searched indexed scripted compressed Mozilla Firefox
SVG SVG Scalable Vector Graphics (SVG) is an XML-based vector image format for twodimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed
More informationWork with Shapes. Concepts CHAPTER. Concepts, page 3-1 Procedures, page 3-5
3 CHAPTER Revised: November 15, 2011 Concepts, page 3-1, page 3-5 Concepts The Shapes Tool is Versatile, page 3-2 Guidelines for Shapes, page 3-2 Visual Density Transparent, Translucent, or Opaque?, page
More informationThe Junior Woodchuck Manuel of Processing Programming for Android Devices
Page1of15 TheJuniorWoodchuck Manuel of ProcessingProgramming for AndroidDevices TheImage JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA
More informationAdobe Illustrator. Always NAME your project file. It should be specific to you and the project you are working on.
Adobe Illustrator This packet will serve as a basic introduction to Adobe Illustrator and some of the tools it has to offer. It is recommended that anyone looking to become more familiar with the program
More informationGRAPHICS & INTERACTIVE PROGRAMMING. Lecture 1 Introduction to Processing
BRIDGES TO COMPUTING General Information: This document was created for use in the "Bridges to Computing" project of Brooklyn College. This work is licensed under the Creative Commons Attribution-ShareAlike
More informationBits and Bytes. How do computers compute?
Bits and Bytes How do computers compute? Representing Data All data can be represented with: 1s and 0s on/of true/false Numbers? Five volunteers... Binary Numbers Positional Notation Binary numbers use
More informationvoid mouseclicked() { // Called when the mouse is pressed and released // at the same mouse position }
Review Commenting your code Random numbers and printing messages mousex, mousey void setup() & void draw() framerate(), loop(), noloop() Arcs, curves, bézier curves, beginshape/endshape Example Sketches
More information