Skip to content

Week 01: Intro

Jump to bottom
Bryan Ma edited this page Jan 29, 2019 · 38 revisions

Class Topics:

  • What's a terminal, what's an OS, what's a computer
  • Modern computers, GUIs, history
  • Why is using the terminal important for us
  • Local git review
  • Git on remotes (i.e. Github.com)

Class Syllabus

https://docs.google.com/document/d/1SFDGy0x-xjnjG8WofHOZ4HY1pVq0Go6n3Zxj3XxMPrs/edit?usp=sharing

Terminal, Git, Github

Using the terminal, git, and github.com effectively is a requirement to pass this course. If you are uncomfortable with it, ensure that you get comfortable with it THIS WEEK!

For terminal usage, make sure you know how to use cd pwd . .. ls less mkdir touch rm and rmdir.

For git, remember the holy trinity of add commit push. Don't forget -m "message" on your commits. If you do and find yourself in the strange land of Vim's terminal text editor, type :wq and press enter, then try again.

For next week, ensure you have created your Code 2 repo, with the following structure as discussed in class:

CODE2_yourgithubaccountname
  ├── Week_01
  ├── Week_02
  ├── Week_03
  |   ├── HW1
  |   └── HW2
  ├── Week_04
 etc.

DT Study

Info coming ASAP!

P5.js

If you were disappointed that this class will not be covering P5.js after all, I apologize! This was a relatively late decision that was made collectively by the Code instructors back in December which was well past registration for the spring semester.

However - I will accept P5.js work for every assignment in this class if you choose to submit it in P5.js instead of in Processing. In fact, due to the extra effort this requires, I will consider offering extra credit if you do so. We can't afford the time to teach it specifically, especially with all the web related considerations, but I very much encourage you to pursue it on your own if learning P5.js is a goal for you.

P5.js is an implementation of Processing in Javascript, which means that sketches can be run in the browser. Because it's an implementation of the Processing API, much of the basics are the same or very similar. I suggest NOT using the web editor that P5.js offers on their website and instead learning to use a conventional text editor (see below) and simple server like python -m SimpleHTTPServer.

Reading

For next week, read chapters 1-3 of CODE by Charles Petzold, found in the Reading folder in the Files page on the class Canvas.

For the class discussion, find the discussion board labeled CODE Ch 1-3 in the Discussion section on canvas. For this and every other reading, post a short response to the reading.

Code

Post three sketches that answer the below prompts to your Week 1 folder in your Code 2 repo, then post the link to the Week 1 folder in the canvas assignment submission field. These are a similar difficulty as the Code 1 final questions, so if you can't successfully reproduce the behavior, submit whatever you were able to do. Remember that each sketch needs its own folder in the repo.

Sketch 0

Set up an interface as shown below that displays a string of text from a string array when each button is clicked on.

Here's some pseudocode for how you might accomplish this:

  1. Set up an array of strings that will correspond to your buttons
  2. Use the text() function to draw the string corresponding with some index of the above array
  3. Store circle positions in another array (hint - vectors) and loop through the array to draw them
  4. Calculate the distance between the mouse and your circles by looping through the circle position array
  5. Use a conditional to check if the mouse is within the circle, then change the value that determines which text string will be drawn from the array

Sketch 1

Set up a 2 dimensional array of rectangles. Change the color of individual squares from white to a random color based on the mouse position when pressed. Hint: you'll need a boolean array.

Sketch 2

Use trig functions (e.g. sin()) to oscillate an ellipse horizontally, then change the oscillation to vertically if the ellipse is clicked on.

Clone this wiki locally