Using sketch

knitr::opts_chunk$set(echo = TRUE)
knitr::knit_engines$set(sketch = sketch::eng_sketch)
library(tidyverse)
library(sketch)

#devtools::install_github("seankross/p5")
library(p5)

Introduction

Trying to replicate this: https://kcf-jackson.github.io/sketch-website/docs/

print("'sketch' has its own knitr engine from version 1.0.5!")

sketch::insert_sketch(
  file = "./Using_sketch/main.R", id = "sketch_1",
  width = 500, height = 400
)

sketch::insert_sketch(
  file = "./Using_sketch/dots.R", id = "sketch_2", deparsers = default_2_deparsers(),
    width = 800, height = 600
  )

sketch::insert_sketch(
  file = "./Using_sketch/animated_dots.R", id = "sketch_2", 
  deparsers = default_2_deparsers(),
    width =800, height = 600
  )

p5::p5() |>
  createCanvas(800, 600) |>
  background("#F4F8FC") |>
  fill("yellow") |>
  ellipse(~mouseX, ~mouseY, 30, 30)

stripes <- tibble(
  x = rep(0, 7),
  y = cumsum(c(0, rep(30, 6))),
  w = rep(300, 7),
  h = rep(15, 7)
)
stripes

ABCDEFGHIJ0123456789

x <dbl>	y <dbl>	w <dbl>	h <dbl>
0	0	300	15
0	30	300	15
0	60	300	15
0	90	300	15
0	120	300	15
0	150	300	15
0	180	300	15

7 rows

stripes %>%
  p5() %>%
  createCanvas(300, 200) %>%
  fill("#FF0000") %>%
  noStroke() %>%
  rect()

#! load_script(src = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js")
setup <- function() {
    createCanvas(400, 300)
}

draw <- function() {
    background(0, 0, 33)    # RGB colors

    for (i in 1:3) {
        dia <- sin(frameCount * 0.025) * 30 * i
        fill(255, 70 * i, 0)       # RGB colors
        circle(100 * i, 150, dia)   # (x, y, diameter)    
    }
}