On your personal computer, go to https://processing.org/download/ and get latest stable verion
At UNCA, do this from command line:
ls ~/.bash_profile
cp /home/brock/.bash_profile ~
cat ~/.bash_profile
and log in and out.
Type processing from command line (we will go for push button in a while)
Maybe ...
File >> Preferences
and Change editor font size
Let’s try an example
File >> Examples ... Color >> Hue
Take a look
variables ... barWidth and lastBar (save it...)
void setup() ... always the start
“The guru is the person who read the manual”
Bill_Atkinson
MacPaint
The search
https://processing.org
https://processing.org/reference/
Look for setup, size, ...
https://processing.org/reference/setup_.html
https://processing.org/reference/size_.html
or select size in Processing and ctrl+shift+F
Press the green button to run....
move your mouse onto the canvas
we'll get back to that
Move the mouse, but then ignore it
Comment out the draw with /* ... */
Open a window for the Processing reference
Help >> Reference
https://processing.org/reference
Keep it open!
Change the "arguments" to size
https://processing.org/reference/size_.html
Make it big or small — try 600
change background to grey
Use the search field in the upper-right
Let’s play with color modes
Color modes can be hard to understand
Unless you are an ART or NM major
It's RGB or HSB
https://processing.org/reference/colorMode_.html
https://codepen.io/HunorMarton/details/eWvewo
http://www.poeticmind.co.uk/research/hue-saturation-brightness-hsb/
You can also also use HTML hex colors
https://www.processing.org/reference/color_datatype.html
Asheville blue is 0x003DA5
Now let's get back to the draw()
setup() is called once
draw() is called whenever the screen is refreshed
frameRate() changes the refresh rate, default is 60 times per second
You think it’s continuous, but the computer can be fast
Run it...
Move the mouse left-to-left, up-and-down, catty-corner
Move it across very quickly.... notice the skipped recolors
Set the frameRate to 5 or 2...
call frameRate()
frameRate() sets the target frame rate
the variable frameRate is our target
Hide the top half of the window and move across the hidden part
This is not seen by Processing
Notice the red stripe at the beginning ... I think this is not a feature
Let's examine the code
How to associate mouse with right bar, think about it...
int whichBar = mouseX / barWidth;
In Processing (Java, ....) every variable has a type
whichBar cannot hold a float (ugh name) or real (ughher)
Division of ints rounds towards 0
See if we have moved to another bar... Moving vertically doesn’t count
if (whichBar != lastBar) {
Figure out the barNumber
int barX = whichBar * barWidth;
Note that lastBar is initially -1... that's the reason for the red bar
Also, note that saturation and brightness is always set to height
You could just use 1...
colorMode(HSB, height, 1, 1) ;
fill(mouseY, 1, 1) ;
It matters — easier to understand and a little faster
Fixing about the initial red bar?
Read about mouseX
mouseX is 0 until mouse moves in front of window
whan mouse leaves window, mouseX retains it's value
Add in initial list of declarations
int lastMouseX = 0 ;
In draw(), do this in place of present if
if (mouseX != lastMouseX && whichBar != lastBar) {
lastMouseX = mouseX ;
Think about the draw... What does each line of code do
Good references
https://natureofcode.com/
The Nature of Code
https://natureofcode.com/book/
for the physicists (and others who like physics)
https://www.instructables.com/id/Basic-of-Processing/
Basics of Processing (instructables circuits)
https://processing.org/reference/
Reference
https://processing.org/examples/
Many examples... most run in your browser
Download
https://processing.org/download/
v 3.5.3
https://processing.org/tutorials/
Video tutorials
Text tutorials -- many topics
Beginner
* Getting Started
Processing Overview
* Coordinate Systems and Shapes (start?)
* Color
Objects
Interactivity
Typography
Intermediate
Strings and Drawing Text
Arrays
Images and Pixels
Curves
2D Transformations
PShape
Data
Trigonometry Primer
Render Techniques
Two-dimensional arrays
Sound
Electronics
Network
Print
Advanced
Shaders
PVector
P3D
Video
Anatomy of a Program
https://happycoding.io/tutorials/processing/
Easy way to run simple programm
https://howtomechatronics.com/arduino-projects/
Processing and web pages
Processing in JavaScript
https://p5js.org/
https://p5js.org/reference/
https://editor.p5js.org/
http://processingjs.org/
http://processingjs.org/learning/
Android
https://learn.sparkfun.com/tutorials/connecting-arduino-to-processing/all
https://android.processing.org/
https://www.openprocessing.org/
coding in the browser
https://www.openprocessing.org/sketch/create
Artsy tutorial
https://pages.uoregon.edu/park/Processing/process1.html