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