Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 145 views

    Attributes 2d Primitives: A Cheat Sheet For Beginners!

    Uploaded by

    DanielFranco
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Attributes 2d Primitives: A Cheat Sheet For Beginners!

    Uploaded by

    DanielFranco
    145 views1 page
    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.

    Original Description:

    Atajos

    Original Title

    p5cheatsheet

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    145 views1 page

    Attributes 2d Primitives: A Cheat Sheet For Beginners!

    Uploaded by

    DanielFranco
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 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