Scribd
Upload
7 views22 pages

ITP1 Workshop1

The document outlines the guidelines for a programming workshop, emphasizing class etiquette and the importance of maintaining silence. It covers topics related to Coursera content, the 2D coordinate system, and basic programming concepts in JavaScript using p5.js, including color representation and drawing functions. Additionally, it provides instructions for testing code and encourages students to complete a worksheet during the session.

Uploaded by

Alisha Febrizkya Malika
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views22 pages

ITP1 Workshop1

The document outlines the guidelines for a programming workshop, emphasizing class etiquette and the importance of maintaining silence. It covers topics related to Coursera content, the 2D coordinate system, and basic programming concepts in JavaScript using p5.js, including color representation and drawing functions. Additionally, it provides instructions for testing code and encourages students to complete a worksheet during the session.

Uploaded by

Alisha Febrizkya Malika
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

Workshop 1

z
CM1005
Introduction to
Programming I
Class etiquette

 Students are expected to maintain silence during this period so


as not to disturb the class and other students who are listening.

 If you feel a strong urge to talk, you and your friends may
proceed out of the lecture hall for further discussion.
Coursera

 This workshop covers Coursera Week 1 and 3.


 Coursera Week 2 covers the Sleuth Assessment.
 Please go through Coursera Week 2 yourself.
2D coordinate system

 How the computer screen is


organized.
 Computer
screen made up of
lots of tiny little points
of light.
 Each one of these
points is called a
pixel.
 Arranged on the
computer screen in a
grid.
Test Run
 Download the ITP1 Wksp1 Resources zip file and unzip
 Starts Brackets
 Drag and drop the whole p5_sketch folder in Brackets
 Test run the Sketch
 Go to https://p5js.org/reference/
 Use the reference and figure out what does the parameters in each of the command
means:
 createCanvas(500,500);
 background(0,0,0);
 fill(255,0,0);
 stroke(0,255,0);
 rect(125,125,250,250);
Program flow

 setup()
 Called once when the program starts

 draw()
 Call repeatedly once every frame.

 Open project Program_Flow


 Explore the colour of each rectangle.
 Observe the output at Console for the value of frameCount
 See next slide on how to open the Console.

 Add in a noLoop() and observe.


 Go to p5.js reference and read up on noLoop()
JavaScript Console

 Chrome
 View->Developer->JavaScript Console

 Safari
 Safari –> Preferences->Advanced->tick Show Developer menu in menu bar

 Develop->Show JavaScript Console

 Firefox
 Tools->Web Developer->Web Console
Red, Green, Blue
(RGB) Colours
 In computer, colours are
represented in RGB.
 Each component represent the
amount of “R, G or B” it has in
that colour
 For example, a pure red will have
 Red 100%
 Green 0%
 Blue 0%
Red, Green, Blue
(RGB) Colours
 Each component is 8 bits
 0 to 255
 For example, a pure red will have
 Red 255
 Green 0
 Blue 0
 So each RGB pixel requires
3x8=24bits
 So in total, a computer can have 224
=16777216 colours
Red, Green, Blue
(RGB) Colours
 Online colour picker
 https://www.rapidtables.com/
web/color/RGB_Color.html
Black, White, Grey
Colours
 For pure white, all RGB values
are 255.
 For pure black, all RGB values
are 0.
 If value of RGB are the same,
then it is a greyscale colour.
 So in total, a computer can have
28 =256 grey colours
Transparency

 Alpha channel
 8 bits (0 to 255)
 0 – total transparent
 Cannot be seen at all
 255 - opaque
noFill()

 Disables filling geometry


 https://p5js.org/reference/#/p5/noFill
strokeWeight()

 Sets the width of the stroke used for lines,


points, and the border around shapes. All
widths are set in units of pixels.
 https://p5js.org/reference/#/p5/strokeWeight
stroke()

 Sets the colour used to draw lines and borders around shapes.
https://p5js.org/reference/#/p5/stroke
noStroke()

 Disables drawing the stroke (outline)


https://p5js.org/reference/#/p5/noStroke
ellipse()

 Draws an ellipse (oval) to the screen.


https://p5js.org/reference/#/p5/ellipse
line()

 Draws a line (a direct path between two points) to the screen.


 https://p5js.org/reference/#/p5/line
triangle()

 A triangle is a plane created by connecting three points


 https://p5js.org/reference/#/p5/triangle
point()

 Draws a point, a coordinate in space at the dimension of one


pixel.
 https://p5js.org/reference/#/p5/point
beginshape(), vertex(), endshape()

 Using the beginShape() and endShape() functions allow


creating more complex forms.
https://p5js.org/reference/#/p5/beginShape
Worksheet time

 Attempt Worksheet 1 now

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy