INTERNET ART: networks, performative programming, and web as context EXAMPLE CODE

PROCESSING DAY 6 NOTES

WITH A FOR LOOP – draw multiples of the same thing – here’s 2 simple shapes:

void draw(){

background(0);

float x = 200;

float y = 200;

int wR =20;

int wE = 30;

ellipse(x,y,wE,wE);

rect(x+10, y, wR, wR);

}

TO draw multiple – the X variable must become initiated in the for loop that is going to loop it to be different :

void draw(){

background(0);

//float x = 200;

float y = 200;

int wR =20;

int wE = 30;

for (int x = 0; x<width; x+=50){

ellipse(x,y,wE,wE);

rect(x+10, y, wR, wR);

}   }

And you you can and should make your own function like this!!!

void DrawEllipseRect () {

ellipse(200,200,30,30);

rect(210, 200, 20, 20);

}

then call it in draw like this in the draw function :

void draw(){

DrawEllipseRect();

}

and it can also look like this:

void DrawEllipseRect (float x, float y, int wE, int wR){

ellipse(x,y,wE, wE);

rect(x+10, y, wR, wR);

}

But then in draw you have to call it by plugging in values or using variables that have values:

void draw(){

DrawEllipseRect(200,200,20,30);

}

You can also plug your function into your for loop, or create another function that runs this for loop!

inside of draw:

for(int i = 0; i<width; i+=50){

DrawEllipseRect(i,200,30,20);

} }

OR – outside of draw, this function:

void RepeatShape(){

for(int i = 0; i<width; i+=50){

DrawEllipseRect(i,200,30,20);

}  }

then call the RepeatShape(); function in draw

RepeatShape();

If you declare global variables, you can also make a function to move the shape and to bounce the shape:

//global variables

float x = 0;

float y = 200;

float speed =1;

float xDirection = 1;

Then, outside of draw:

//a function to move the shape

void moveShape (){

x=x+ (speed * xDirection);

}

//a function to bounce the shape

void bounceShape(){

if (x > width || x < 0){

speed = speed * -1;

}

then inside of draw:

void draw(){

background(0);

DrawMyShape(x,y+100,30,20);

RepeatShape();

moveShape();

bounceShape();

}

If you want the repeated shapes to move:

y = y + speed;

But you’ll also have to make a bounce function, and if you don’t want your other shape to move, you’ll have to make two different y variables

KNOWING WHERE TO PUT YOUR VARIABLES BECOMES VERY IMPORTANT!

Here’s the whole program: COLLISION CALCULATION

So – lets use what we know to start with 2 independently bouncing shapes :

float x1 = 0; // Thingy 1 location

float y1 =200;

float x2 = 200; // Thingy 2 location

float y2 =0;

float xspeed1 =2;

float yspeed1 = 2;

float xspeed2 =0.5;

float yspeed2 = 0.5;

int xdirection =1;

int ydirection =1;

void setup(){

size(500,500);

smooth();

}

void draw(){

background(0,0,255);

DrawThingy(x1,y1,40,30);

DrawThingy(x2,y2,50,50);

moveShapes();

bounceShapes();

}

void DrawThingy(float x, float y, int w, int h){

fill(random(255),random(255), random(255));

ellipse(x,y,w,w);

rect(x+10, y, h, h);

}

void moveShapes(){

x1 = x1 + (xspeed1 * xdirection);

y1 = y1 + (yspeed1 * ydirection);

x2 = x2 + (xspeed2 * xdirection);

y2 = y2 + (yspeed2 * ydirection);

}

void bounceShapes(){

if (x1 > width || x1 < 0){

xspeed1 = xspeed1 * -1;

}

if (y1 > height || y1 <0){

yspeed1 = yspeed1 * -1;

}

if (x2 > width || x2 < 0){

xspeed2 = xspeed2 * -1;

}

if (y2 > height || y2 <0){

yspeed2 = yspeed2 * -1;

}

}

Here’s an image of the same code that’s above: What if we want to know when these hit each other ? Could they bounce off each other?

We need an algorithm that says:

if the distance between (x1, y1) and (x2,y2) is less than the sum of their radiuses, they intersect

new global variables:

boolean collision = false;

int diam1 = 30;

int diam2 = 50; new function:

void CollisionDetection(){

float distance = dist(x1,y1, x2,y2); // calculates distance

if (distance < diam1 + diam2){

collision = true;

println(“crash”);

background(0);

}

else{

collision = false;

} } And remember to call the new function in the draw cycle!! KEY INPUT – what if you want arrows to control a third shape?

Use the keyPressed() function we already know plus a variable processing already knows – keyCode

void keyPressed(){

if (key == CODED){

if (keyCode == DOWN){

y1 = y1 + 10;

}

else if (keyCode == UP) {

y1 = y1 -10;

}

else if (keyCode == RIGHT){

x1 = x1 + 10;

}

else if (keyCode == LEFT){

x1 = x1 -10;

} } }

If you already have any movement in your code for x1 and y1, take it out!

//x1 = x1 + (xspeed1 * xdirection);

//y1 = y1 + (yspeed1 * ydirection);

//if (x1 > width || x1 < 0){

// xspeed1 = xspeed1 * -1;

// }

// if (y1 > height || y1 <0){

// yspeed1 = yspeed1 * -1;

// }

If you want to use other keys besides arrow – look up the processing reference for plain old “key” under keyboard….

https://processing.org/reference/key.html

You can write something like:

if (keyPressed) {

if (key == ‘b’ || key == ‘B’) {

x1 = x1 +10;

}

void loopPlayer(){

if (x1 > width){

x1 = 0;

}

else if (x1 <0){

x1 = width;

}

if (y1 > height){

y1 =0;

}

else if (y1 < 0){

y1 =height;

} }

CALCULATING HITS

Make a new global variable called hits

int hits = 0;

increase it or decrease every time your collision calculation occurs

inside void CollisionDetection() add the line:

hits = hits -1;

Make a new function WriteScoreAndTime() and call it in draw –

void WriteScoreAndTime(){

fill(255);

textSize(32);

text(hits, width/6, height/6);

}

Add other stuff to this function you might want at the top of the screen:

textSize(18);

text(“Avoid getting hit!”, width/6, height/10);

Time lapsed – millis() returns the number of milliseconds since a sketch started

1000 millis = 1 second

So for a timer in minutes and seconds –

text((millis()/1000), width/6, height/4);

Maybe your screen top could look like this:

void WriteScoreAndTime(){

fill(255);

textSize(18);

text(“Avoid getting hit!”, width/6, height/10);

textSize(32);

text(hits, width/6, height/6);

textSize(20);

text((millis()/1000), width/6, height/4);

}

Here’s the program for the game! continued below continued below PROCESSING DAY 5 NOTES

Physics – Bouncing Ball (& Gravity is also there – commented out on lines 11, 27, 28) For movement we say:

location = location + speed;

for gravity, we can also add the concept of acceleration, which is a change of the rate of speed, so:

speed = speed + acceleration;

float ellipseX = 250;

float ellipseY = 0;

float ellipseW = 50;

float speedE = 1;

float gravity = 0.1;

void setup(){

size (500,500);

noStroke();

}

void draw(){

background(15);

fill(233, 255, 113);

ellipse(ellipseX, ellipseY, ellipseW, ellipseW);

ellipseY = ellipseY + speedE;

//gravity

speedE = speedE + gravity;

if((ellipseY+(1/2 * ellipseW) > 500) || ellipseY < 0){

speedE = speedE * -1;

}

}

Bouncing ball – we can also declare this in such a way that not only will the shape reverse its direction, but the direction of the X / Y can change to look more physically “natural”

// width of ellipse

float ellipseW = 50;

// x speed of ellipse

float xspeedE = 3;

// y speed of ellipse

float yspeedE = 3;

//”gravity” or acceleration

float gravity = 0.1;

// directions

int xdirection = 1;

int ydirection = 1;

float ellipseX, ellipseY;

void setup(){

size (500,500);

smooth();

noStroke();

//set the starting position of the shape in setup

float ellipseX = width/2;

float ellipseY = 0;

}

void draw(){

background(15);

fill(233, 255, 113);

ellipseX = ellipseX + (xspeedE * xdirection);

ellipseY = ellipseY + (yspeedE * ydirection);

//gravity

//yspeedE = yspeedE + gravity;

if(ellipseY> height || ellipseY < 0){

yspeedE = yspeedE * -1;

}

if (ellipseX > width || ellipseX <0){

xspeedE = xspeedE* -1;

}

ellipse(ellipseX, ellipseY, ellipseW, ellipseW);

}

WHILE LOOPS

What if you wanted to draw 20 circles but you didn’t want to write them all out? This is a huge hassle:

void draw(){

ellipse(30,height/2,10,10);

ellipse(60,height/2,10,10);

ellipse(90, height/2,10,10);

ellipse(120, height/2,10,10);

ellipse(150, height/2, 10,10);

ellipse(180, height/2, 10,10);

ellipse(210, height/2, 10, 10);

ellipse(240, height/2, 10,10);

}

You could make variable for Y location and initial X location and spacing, etc, but you’ll end up writing twice as much code

int Espacing = 30;

int Ediameter=10;

int eYposition=height/2;

float eXposition=0;

then end up adding spacing each time by increasing it (as you would speed):

eXposition = eXposition + Espacing;

but you’d have to do this every line you are drawing an ellipse!

Another way you could do this is the while loop – there are 3 types:

while

do-while – very rare

for – very similar to while, simply convenient alternative / shorthand

structure:

WHILE (Boolean test){

if true:

1. DO THIS
2. THEN DO THIS

then repeat while loop

if its false, leave the loop}

So for our ellipse, use the variables:

int Espacing = 30;

int Ediameter=10;

int eYposition=250;

float eXposition=0; // initial position

int endEllipse = 400; // where the ellipses will end

// while loop!!! to call in draw:

while (eXposition <= endEllipse){

ellipse(eXposition, eYposition, Ediameter, Ediameter);

eXposition = eXposition + Espacing;

} If you do not make an exit condition for your while loop, your program will crash or not run properly

You must make sure there is an end condition for your loop that will eventually make it false

Example: – if your spacing is 0, it will never increase, or if you used your Y position and it never changed

Another example of a while loop: Say I want to draw a bunch of lines

void draw(){

background(255);

int x = 0;

while (x < width){

stroke(0);

line(x,0,x,height);

//below is the same as writing x = x +5;

x += 5;

}}

SCOPE

This type loop often makes use of a local variable –

a local variable declared within a block of code is only available for use inside that specific block of code where it was declared.

If you try to access a local variable outside of where it was declared , you will get an error

It is best practice and more efficient to declare variables only within the SCOPE of where they are necessary. Many variables need to be global, but if they don’t, you don’t have to declare them before setup.

But still avoid using multiple variables with the same name!

ANOTHER WAY TO DRAW THE LINES:

FOR LOOP

Common when you want to write a while loop where one value is incremented repeatedly

usual most useful structure:

For(variable initialization, while Boolean condition with variable is true, do this to the variable){ draw / d0 something until exit}

or INTITALIZATION, BOOLEAN TEST, ITERATION EXPRESSION

SOME VERY COMMON  / USEFUL LOOPS – VERY IMPORTANT:

//Start at 0 and count to 9

for (int i = 0; i< 10; i = i+1);

//Start at 0 and count up to 100 by 10

for (int i= 0; i < 101, i = i+10);

//Start at 200 and count down to 0 by 2

for (int i=200; i > = 0; i = i-2;);

When would you use a for loop like this? Try rewriting the repeating lines as a for loop – it does exactly the same thing!

void draw(){

background(255);

for (int x = 0; x< width; x+=5){

stroke (0);

line(x,0,x, height); }

}

What if we want those lines to animate more slowly – so we see each one drawn?

Try making the placement of the line a global variable

and slow down the frame rate

and use an if statement or no statement – will be evaluated every draw cycle

int x = 0;

void setup(){

size(400,400);

frameRate(5);

background(255);

}

void draw(){

//background(255);

//if (x< width){

stroke (0);

line(x,0,x, height);

x += 5;

//}

}

DO THE SAME THING WITH A FOR LOOP:

int endX;

void setup(){

size(400,400);

frameRate(5);

endX = 0;

background(255);

}

void draw(){

for (int x=0; x<endX; x += 5){

stroke(0);

line(x,0,x, height);

}

endX +=5;

}

PROCESSING DAY 4 NOTES

You will find more detailed notes, definitions, and snippets of code in blue beneath the following screenshots of examples from class

Simple boolean expressions – changing the background of the sketch based on whether the mouse is on the left hand side or the right hand side – example from class A more complicated version – the Quadrant test – making the background change color depending on what quadrant of the sketch the mouse is in : Animating objects to stay in your sketch – this contains both the “looping around” look (commented out on lines 30 -32), and also the “bouncing” method (lines 39-41). If you borrow these, make sure you understand how the variables work! “BUTTON” – BOOLEAN VARIABLE sketch from class: BOOLEANS & CONDITIONALS

What if you don’t want your moving cube to leave your processing sketch?

Boolean expression – an expression that evaluates to either true or false

15 is great than 20: false

My name is Isla : true

In processing, we can express Boolean statements with certain operators , allowing our sketch to take different paths depending on the current value stored in the variable

x > 20

x < 20

y == 5

y <= 5

y >=5

z == 10

z ! = 10

All of these statements depend on the current value of the variable

IF, ELSE, AND ELSE IF

If you are hungry, then find food. Otherwise, if I am thirsty, drink water. Otherwise, sleep.

If the mouse is on the left side of the screen, make the background red.

If (Boolean expression){code to execute if it is true}

else { code to execute if it is false}

TRY THIS WHOLE PROGRAM:

void setup(){

size(400,400);

background(0);

}

void draw(){

if (mouseX < width/2){

background(255,0,0);

}

else

{background(0,0,0);

}

line(width/2, 0, width/2, height);

}

Above: It matters what order you draw things in –  if you draw the line first, then go through the if statement that draws the background, you wont see the line!

Most of the time, you need the else statement

If you want to include multiple options, such as in the eating, drinking, sleeping example, you can use else if construction

if (mouseX < width/3){

background(255,0,0);

}

else if (mouseX < (2*width/3)){

background(0,255,0);

}

else{ background(0,0,255); }

CALL THIS IN DRAW TO DIVIDE SKETCH INTO THIRDS & HAVE THE BACKGROUND CHANGE COLOR BASED ON WHAT 3RD THE MOUSE IS IN:

if (mouseX < width/3){

background(255,0,0);

}

else if (mouseX > width/3 && mouseX < 2*(width/3)){

background(0,255,0);

}

else {

background(0,0,255);

}

line(width/3,0, width/3,height);

line(2*(width/3),0, 2*(width/3), height);

FINALLY

How to keep your block on the page?

To LOOP IT AROUND:

if (rectY > height){

rectY = 0;

}

LOGICAL OPERATORS

OR – ||

AND – &&

NOT – !

DIVIDING SKETCH UP INTO QUADRANTS – WHEN MOUSE IS IN EACH QUADRANT, COLOR THE BACKGROUND A DIFFERENT COLOR

if (mouseX < width/2 && mouseY < height/2){

r = 255;

g = 0;

b = 0;

}

else if (mouseX > width/2 && mouseY < height/2){

g = 255;

r = 0;

b =0;

}

else if (mouseX < width/2 && mouseY > height/2){

b = 255;

r = 0;

g = 0;

}

else {

r = 0;

g = 0;

b = 0;

}

You can also use boolean expressions and logical operators in conjunction with mousePressed & keyPressed – try these different examples and add ELSE statements!:

if (keyPressed) {

ellipse(width/2,height/2, circleDi, circleDi);

}

____________

if(keyPressed && mousePressed) {

rect(width/2,height/2, circleDi, circleDi);

}

___________

if (!mousePressed){

rect(width/5, height/5, circleDi, circleDi);

}

_______________

if (mousePressed || keyPressed){

ellipse(width, height, circleDi, circleDi);

}

building a button – Boolean variables can be declared as true or false

float rectW = 200;

float rectH = 100;

float rectX = 200;

float rectY = 200;

color white = color (255);

color gray = color (200);

color black = color(0);

boolean button =false;

void setup(){

size(500,500);

}

void draw(){

background(black);

if (mouseX > rectX && mouseX < (rectX+rectW) && mouseY > rectY && mouseY < (rectY+rectH) && mousePressed){

button = true;}

else{  button = false; }

if (button) {  background (255,0,0); }

else { background(black); }

stroke(white);

fill(gray);

rect(rectX, rectY, rectW, rectH);

fill(white);

text(t, rectX+50,rectY+50);

}

The drawing elements you want to always remain there need to come AFTER you’re drawing in any background

How to keep your block on the page?

Instead of looping it – can you try bouncing it?

If we go back to our “WORD” that is now scrolling / looping, how could we bounce it?

The most important thing is that we have made this move by increasing it by a value that is a variable – SPEED

if (textX > width) {

speed = speed * -1;

}

// But now the word slides off the other side of the screen

// so you need to add a second conditional

if (textX > width || textX < 0) {

speed = speed * -1;

}

PROCESSING DAY 3

Use variables for everything!

NOTES FOR CLASS 3 ARE BELOW, anything in BLUE is code — keep in mind it is code taken out of context and may have variables that need to be defined above setup

Opacity – 4th argument in fill

//red with full opacity

fill(255,0,0,255);

//red with 50% opacity

fill(255,0,0,127);

MouseX, MouseY

//background in the draw

background(0);

ellipse(mouseX, mouseY, 50,50);

//How we might make a “drawing application” :

line(mouseX, mouseY, pmouseX, pmouseY);

//pmouse means PREVIOUS, where the mouse was last draw cycle

Mouse Clicks and Key presses as functions

//mouse presses and key presses are considered events in Processing

// to make an event, we have to make our own function – like setup() is a function, //this will occur once and only once, unless we put it into the cycling draw function

// mousePressed() is for mouse clicks

//keyPressed() is for key presses

void mousePressed(){

background(200);

}

//this means, whenever the mouse is pressed, the background will turn gray

// OR try making a stamp tool instead mousePressed

void mousePressed(){

ellipse(mouseX,mouseY,20,20);

}

//or do things with keyPressed() – this refers to ANY key being pressed

void keyPressed(){

void keyPressed(){

// rect(mouseX,mouseY,10,10);

background(a);

}

Frame Rate

Showing you this now because its only relevant once we start moving around

default is 60

try it in setup:

frameRate(30);

VERSUS

frameRate(10);

VARIABLES – Why to use Variables – HOW TO MAKE THINGS MOVE

Using numbers is called hard coding

What if I want to change the size of my screen?

When you define a variable it is called an assignment operation, whereas most other things we do are functions…

And you can re-assign new values to variables

//declare a variable for a location value of an object

int rectX = 0;

//in draw, draw something using that variable

// then write an assignment operation that increments the value of that variable

rect(rectX, height/2,30,30);

rectX = rectX + 1;

// go into setup and change the frameRate to see how speed is effected

frameRate(60);

//versus

frameRate(5);

//OR, if you want to have multiple moving objects at different speeds, use the way

// you assign a new value to your variable – if you add larger jumps, this appears

// as though it has effected speed

rectX = rectX +10;

// or testing assigning a new value to variables in the draw when the variables

// aren’t just affecting location

int ellipseSize= 0;

ellipse(width/3, height/3, ellipseSize,ellipseSize);

ellipseSize= ellipseSize +1;

Use a variable for every number!

Wanting to change things – size, location, is why you should start using variables for everything

System Variables – variables already defined by processing

width

height

frameCount – number of frames processed

frameRate

screen.width – width in pixels of entire screen

screen.height

key – most recent key pressed on keyboard

keyCode – numeric code for key pressed

keyPressed – true or false? is a key pressed?

mousePressed – True or false? is the mouse pressed?

mouseButton – which button is pressed? Left, right, or center?

Try changing color using Framecount:

// because the number increases with every frame, the color will change

fill(frameCount/2);

// to see that processing can know which key you pressed, try using the console

// println function

voidkeyPressed(){

println(key);

}

CODE FROM CLASS:   HERE IS THE CODE WE WENT OVER FOR USING THE random() function to generate a random number

In class, we used it to generate changing colors — in the image below, my ellipse was constantly changing rgb values: Here’s the code:

REMEMBER, if you want RANDOM() to change every time you call the draw loop, random needs to be called in the draw loop! PROCESSING DAY 2

Try this stuff out!  Please try to get used to using variables for values when possible.

Line 31 in the code below, which uses the mouseX and mouseY values is your golden ticket to user interaction! Try using these values in other weird places too! Could you use them for… location, sizes, even some mathematical component of a color?

More reference is here:

https://processing.org/reference/mouseX.html

https://processing.org/reference/mouseY.html This is the boring program this makes – BUT if you try it, you will see what happens when you move the mouse! PROCESSING DAY 1  DAY 2

Part 1 – review elements learned last class, as well as discuss linking to fragments elsewhere on the page. Here, those elements that be linked to in my <nav> section by defining the href attribute as “#id”   You can make the “id” anything you want when you build the section you want to link to. So if I want to go to a paragraph way at the bottom of the page, I could build it with the id attribute like this: <p id=”bottom”> text </p>

In my <nav> section i would link to it by having a link like this: PART 2

Bold and italics (lines 14-17), natural breaking space (lines 19-21), the alt attribute (lines 23 – 27), and in-line styles (lines 36-40, read info 30-36) Part 3 – TWO DIFFERENT WAYS TO DO STYLE:

Here is in-line method (first image) translated to the css method as you can see in the <style> element which goes in the head  of the document (second image)

These pages when opened look exactly the same!

IN LINE VERSION: Same properties and values in the style element in the head: Both pages look like this: DAY 1 html  – how we begin our html document

elements: title, head, body, headings (<h1> through <h6>), paragraph (<p>), the link (<a>), the image (<img>), un-ordered lists (<ul>), ordered lists (<ol>), and description or definition lists (<dl>), all with list items (<li>)

attributes: href attribute (means hypertext reference, you use it to direct your link (<a>) to where you want to go), src attribute (for images), charset (defined in meta), lang (defined for us as “en” – english), 