Scribd
Upload
96 views

Learning P5.js

The document provides instructions for using p5.js to create drawings on a canvas, including how to set the canvas size, add background color, draw shapes using functions like rect(), ellipse(), and line(), and manipulate properties like fill color, stroke weight, and position using variables and parameters. It also demonstrates how to use variables to control the movement and animation of shapes over time by incrementing counters and changing their values based on thresholds.

Uploaded by

olive
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
96 views

Learning P5.js

The document provides instructions for using p5.js to create drawings on a canvas, including how to set the canvas size, add background color, draw shapes using functions like rect(), ellipse(), and line(), and manipulate properties like fill color, stroke weight, and position using variables and parameters. It also demonstrates how to use variables to control the movement and animation of shapes over time by incrementing counters and changing their values based on thresholds.

Uploaded by

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

Lines are for comments underneath

Commands with parenthesis


Save as fork (creates copy of existing program)

createCanvas(400,400) (SIZE OF PAGE?CANVAS)

15, 20 is width and height of circle (change the size of the ellipse)

Order matters (its behind) layering depends on when stuff is entered


Fill = colors that go to 255

2 to the power of 8 numbers equal colors apparently bruh)

(USE RGB SLIDER ON PAGE)

Fill goes before ellipse

Top is the first layer, last is the top layer

Draw:

Set up
3 parameters for background is used as rgb

rectMODE(CENTER) x and y refer to center of rectangle, without they refer to


the top corners

That makes zero sense


FIRST

Change width and height (creates canvas ex: 400, 400)

Background is like fill function (creates color of background)

- One value is is greyscale


- Three values equals color
This is for canvas

Now go into function draw

Rect (four coordinates)

Third is width, fourth is height,

x,y,width, height

X = over
Y = up

Coordinate plane (origin point is top left)

FILL before the rectangle

fill(‘green’)
noStroke()
Or stroke (‘orange’)

Manipulate width of outline by strokeWeight(25)

Layer ellipses for cloud


rectMode(CENTER)
^^^^^T0 get in center

FOR CURVES
Line !!!

stroke(100,255,50)
line(75,300,75,350)

- Can not fill a line \


September 8, 2022

Variables to control the position

RectMode to go to center of the screen


ColorMode(HSB,360)
Change the second one (saturation)

letcX = (for x)
letcY

To move on screen
Variable for size of the shape

Let Sz = 100

.5 *Sz to get smaller

Variable to control the hue


- let SqHue =
-
-
-
- New function

Return Y

Let Counter = 0 ; (global variable)

frameRate(3) (i have zero idea what any of this means)

Ways of manipulating counter


Many counters ????

Counter1 = (Counter1 +1)%4 what is the mod (remainder)

What the fuck

7%4
(how many times 4 goes into 7 (1 time) and has a remainder 3 so it is 3)

Counter3 = Counter3 +step;

Counter = Counter +1;


Counter1 = (Counter1 +1)%4;
Counter2 = Counter2 +5;
Counter3 = Counter3 +step;

if (Counter3 > 200){


step = -5;
}
if (Counter3 < -0){
step = 5;
}

Goes up to 200 and then goes down to 0

If you want it to go up and down, use counter as y value

let Counter = 100;


let Step = 6; (velocity(
let g = 0.3; (acceleration)

You might also like