Zenek Chapman

Computer science 30

November 18th 2024

​

​

Create some code to demonstrate the use of the palette library in p5.js

**************************************************/

var palette; // create palette variables

var palette2;

​

function setup() {

    createCanvas(500, 500);

    palette = createPalette() //create a palette

      palette //add an multiple colours to the palette

        .add(color("#c0392b"))

        .add(color(255, 204, 0))

        .add(color("magenta"))

        .add(color("#0f0"))

        .add(color("rgb(0,0,255)")) //used these colours from the library example

      palette.log() // display palette in console

  //can also use pre-made palettes by copying hexcode Ex: (colour palette of kirby)

    palette2 = createPalette('d74894-df6da9-e791bf-efb6d4-f7daea')

    palette2.log() // display palette2 in console

}

​

​

function draw() {

    palette.draw() // draw out palette on canvas

    fill(palette.get(0)) //  fill with the first colour in the palette 

    rect(width*0.022,height*0.124 , height*0.04, width*0.04)

    fill(palette.get(4)) 

    circle(width*0.448, height*0.144, width*0.06)

    fill(palette2.next()) //picks the next colour in the palette, can also use previous to go in other direction

    frameRate(10) // just making it so the cycle is visible (couldn't figure out how to use millis())

    ellipse(250, 250, 50, 60)

}

​