W23_L01_Recap

pdf

School

University of Waterloo *

*We aren’t endorsed by this school

Course

105

Subject

Computer Science

Date

Feb 20, 2024

Type

pdf

Pages

Uploaded by BaronExplorationParrot41

CS106 W2023 – Lab 01 Open Processing | Page 1 of 7 CS106 W2023 - Lab 01 This lab is starts with an introduction to the Open Processing editor. This introduction is needed for CS106 students who took CS105 in a semester before F21. This Open Processing introduction is done specifically in Q2, Q3, and Q4. Before you begin the lab, you may want to go through the pdf and accompanying video lectures that cover the Open Processing editor and recap contents from CS105 (Week 1 material on LAERN). This is especially highly recommended for students who took CS105 before F21 - you will need to go through these before doing the lab question Q2, Q3, and Q4 below. These files are on LEARN and are named: - “01 Open Processing and Recap.pdf” - “Week 1 Open Processing and Recap Slides 1-8 (9.17.mp4” - “Week 1 Open Processing and Recap Slides 9-48 (6.40).mp4” Q5 and Q6 below are questions related to animations and playing video using JavaScript p5. This was covered at the end of CS105 F21 but many students may not have seen most of these lecture pdf files and lecture videos as most of the content was not on any labs or assignments or tests. 1) In CS106 this semester we are using an editor called “Open Processing”. It is a web-based editor for JavaScript P5. For those who took CS105 in F21, this editor is the same one you used in CS105. For those of you who took CS105 before F21, this editor will be new to you. As a CS106 student, you are covered by the University of Waterloo’s Open Processing license. You need to sign up to get your student account for CS106, which is called an Open Processing “Plus+” membership. To sign up for CS106 you need to go to the following url: https://openprocessing.org/join/D2C1A7 Once you follow the link above, you will be asked to create an account if you don't have an account yet. 2) After signing up, create a sketch. The sketch that Open Processing creates by default is as follows:

CS106 W2023 – Lab 01 Open Processing | Page 2 of 7 Run it. When you run the default program, the canvas should look something like the following. When you edit it, it should look something like the following: Save this sketch as L01_Q2. Do not modify the code, except add two comment lines at the beginning (i.e. use //) with your name and student ID number. 3) Create another new sketch. Save this sketch as L01_Q3. Delete the default code and replace it by typing the following code into the Open Processing editor, and run it. You should see a red ball animating across the screen. When the mouse is pressed, the ball function setup() { createCanvas(windowWidth, windowHeight); background(100); } function draw() { ellipse(mouseX, mouseY, 20, 20); }

CS106 W2023 – Lab 01 Open Processing | Page 3 of 7 starts again from the left-hand side of the canvas. Do not modify the code, except add a comment line at the beginning (i.e. use //) with your name and student ID number. It prints out the value of “ballX” in the console at the bottom of the screen. You can use this console and your browser’s debugger to help debug your code. To use your browser’s debugger, use the keyboard shortcut Ctrl Shift J (on Windows) or Ctrl Option J (on Mac). Alternatively, you can use the Chrome menu in the browser window, select the option "More Tools," and then select "Developer Tools." When you run the above program, you should see something like the following. If you open your browser’s debugger it will look something like the following: let ballX = 0; let s = 20; function setup() { createCanvas(200, 100); } function draw() { background(220); fill(255, 0, 0); ellipse(ballX, height / 2, s, s); ballX = ballX + 1.0; print(ballX); } function mousePressed() { ballX = 0; }

Your preview ends here

Eager to read complete document? Join bartleby learn and gain access to the full version

Access to all documents
Unlimited textbook solutions
24/7 expert homework help

CS106 W2023 – Lab 01 Open Processing | Page 4 of 7 4) Load the following sketch: https://openprocessing.org/sketch/1789081 Run it. Do not modify the code, except add a comment line at the beginning (i.e. use //) with your name and student ID number. Fork it. To fork it you select “Save as Fork”. “Save as Fork” will appear after you have made modifications to the file. Save as L01_Q4.

CS106 W2023 – Lab 01 Open Processing | Page 5 of 7 5) Go through the lectures for “11 Images”. These are from CS105 and are copied to Week 01 of CS106 as we are discussing/recapping these in CS06 in Week 01. In this question we are using the “Flashlight” sketch in the “11 Images” pdf. In order to understand “Flashlight”, you will need to go through the “11 Images” slides from CS105. “Flashlight” is on slide 46. The sketch is at: https://openprocessing.org/sketch/1789088 A short video is here: https://vault.cs.uwaterloo.ca/s/tBaAt9Xyxg5C9NE You are going to make only one change to this sketch. Then save as Lab01_Q5. You are to put a white line from the top left to the bottom right. You must modify the pixel array using statements smiliar to lines 43-46 in the sketch. These lines are: pixels[i] = r; pixels[i + 1] = g; pixels[i + 2] = b; pixels[i + 3] = a; To do this question, every time x and y are equal, you’ll set the colour to white. Your result will look as follows:

CS106 W2023 – Lab 01 Open Processing | Page 6 of 7 6) Go through the lectures for “13 Sound and Video”. These are from CS105 and are copied to Week 01 of CS106 as we are discussing/recapping these in CS06 in Week 01. In this question we are using the “Colour Tracker” sketch in the “13 Sound and Video” pdf. In order to understand “Colour Tracker”, you will need to go through the “Sound and Video” slides from CS105. Colour Tracker is on slide 23. The sketch is at: https://openprocessing.org/sketch/1789096 A video is at: https://vault.cs.uwaterloo.ca/s/Ff9SBrez47Dy5ji Load the sketch. “Save as F ork” will appear after you have made modifications to the sketch. Fork the sketch and save as “L01_Q6. a) Select a target color such as blue or green or red or whatever colour seems to work well at allowing you to control the ellipse. b) Change the canvas size to 640 wide (twice its width). c) Play the video in the left-hand side of the canvas (see the video). d) An ellipse is already drawn at the target (see the code for the “target”). Add code to also draw an ellipse in the similar position but in the right-hand side of the screen (see the video). e) This part more work than the previous steps. Add a rectangle on the righthand side. Then do a hit test to determine if the ellipse hits the rectangle. If so, move the rectangle to a random location, and continue. Submitting An example of how to do submit a Lab is shown in the following video: https://vault.cs.uwaterloo.ca/s/MgPD3pBEMjmHQYz Use the template file in Word “CS106 Lab Template” in LEARN to create your Lab 01 submission. Please ensure that your URLs are hot links. The TAs need to be able to click on each link in your pdf and go directly to your sketch. Ensure that each URL you submit has its settings so that the access is as follows:

Your preview ends here

Eager to read complete document? Join bartleby learn and gain access to the full version

Access to all documents
Unlimited textbook solutions
24/7 expert homework help

CS106 W2023 – Lab 01 Open Processing | Page 7 of 7 Submit that pdf file to the Lab 01 dropbox on LEARN. It is your responsibility to submit to the correct dropbox with the correct files before the deadline. Otherwise you may receive a mark of 0.

Related Documents

Quiz 1.docx

Quiz 4.docx

CS 5330 hw2.pdf

HW3 CS 5330.001 F23.pdf

INT 220 Module 3 Discussion Post.docx

INT 220 Module 1 Discussion Post.docx

INT 220 Module 8 Discussion Post.docx

CIS443 Week 4 Assignment_Craig_Wayman.docx

CIS443_Week_6_Assignment_Craig_Wayman.docx

CIS348 Week 8 Assignment.docx

SCS 100 Module One Activity Template copy.docx

HW4 solutions.pdf

Recommended textbooks for you

COMPREHENSIVE MICROSOFT OFFICE 365 EXCE

Computer Science

ISBN:9780357392676

Author:FREUND, Steven

Publisher:CENGAGE L

Np Ms Office 365/Excel 2016 I Ntermed

Computer Science

ISBN:9781337508841

Author:Carey

Publisher:Cengage

New Perspectives on HTML5, CSS3, and JavaScript

Computer Science

ISBN:9781305503922

Author:Patrick M. Carey

Publisher:Cengage Learning

Programming with Microsoft Visual Basic 2017

Computer Science

ISBN:9781337102124

Author:Diane Zak

Publisher:Cengage Learning

CMPTR

Computer Science

ISBN:9781337681872

Author:PINARD

Publisher:Cengage

Oracle 12c: SQL

Computer Science

ISBN:9781305251038

Author:Joan Casteel

Publisher:Cengage Learning

SEE MORE TEXTBOOKS

Recommended textbooks for you

COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:9780357392676
Author:FREUND, Steven
Publisher:CENGAGE L
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:9781337508841
Author:Carey
Publisher:Cengage
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning
Programming with Microsoft Visual Basic 2017
Computer Science
ISBN:9781337102124
Author:Diane Zak
Publisher:Cengage Learning
CMPTR
Computer Science
ISBN:9781337681872
Author:PINARD
Publisher:Cengage
Oracle 12c: SQL
Computer Science
ISBN:9781305251038
Author:Joan Casteel
Publisher:Cengage Learning