Scribd
Upload
174 views1 page

Attributes 2d Primitives: A Cheat Sheet For Beginners!

This document provides a 3-sentence summary of the key elements in the p5.js cheat sheet for beginners: The cheat sheet outlines the basic program structure in p5.js including the setup and draw functions, lists common 2D primitives like line, ellipse, rect, and text, and covers attributes for styling like fill, stroke, and color. It also reviews core concepts like the grid system, mouse and keyboard input, conditional logic, math functions, and color values that can be used in a p5.js sketch. The cheat sheet acts as a quick reference guide for new p5.js programmers to learn basic syntax and capabilities.

Uploaded by

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

Attributes 2d Primitives: A Cheat Sheet For Beginners!

This document provides a 3-sentence summary of the key elements in the p5.js cheat sheet for beginners: The cheat sheet outlines the basic program structure in p5.js including the setup and draw functions, lists common 2D primitives like line, ellipse, rect, and text, and covers attributes for styling like fill, stroke, and color. It also reviews core concepts like the grid system, mouse and keyboard input, conditional logic, math functions, and color values that can be used in a p5.js sketch. The cheat sheet acts as a quick reference guide for new p5.js programmers to learn basic syntax and capabilities.

Uploaded by

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

p5.

js a cheat sheet
for beginners!
2d primitives
line(x1, y1, x2, y2)
attributes
background(color)
set the background color
program structure ellipse(x1, y1, width, height)
fill(color)
//runs once when program starts rect(x1, y1, width, height) set the fill color
function setup(){
createCanvas(800,600); arc(x1, y1, width, height, start, stop) noFill()
} disables fill
beginShape();
//run continuously after setup vertex(x1, y1); stroke(color)
function draw(){ vertex(x2, y2); set the stroke color
//rendering loop vertex(x3, y3);
} strokeWeight(weight)
//add more vertex
set the stroke’s width
endShape(CLOSE);
system variables noStroke()
text(“string”, x, y, boxwidth, boxheight) disables stroke
windowWidth / windowHeight
width / height of window grid system line() ellipse() ellipseMode(MODE)
(0,0) rectMode(MODE)
width / height (x1,y1) CENTER,CORNER
width / height of canvas

height
(x1,y1)
textSize(pixels)
mouseX / mouseY
current horizontal / vertical (x2,y2)
width
mouse position if/then logic
rect() arc() vertex()
non-visual feedback (x1,y1) (x1,y1)
if(test){ test
false
height

statements
height

(x1,y1)
print()
report data to the output console
stop } true
start

(x2,y2)
width (x3,y3)

color width
statements

fill(120) gray: 0-255


math
fill(100,125,255) r, g, b: 0-255 + - / *
fill(255, 0, 0, 50) r, g, b, alpha == equal to continue
program
fill(‘red’) color string != not equal
random(low,high)
fill(‘#ccc’) 3-digit hex > greater than
< less than
fill(‘#222222’) 6-digit hex fill map(value, in1, in2, out1, out2) >= greater than or equal
color(0, 0, 255) p5.Color object map a value from input to output range <= less than or equal
Compiled by Ben Moren http://benmoren.com CC BY SA NC 4.0

You might also like