Day 3 - cheatSheet 小技巧与本机环境设定

CheatSheet 小技巧

因为大家其实不太会被指令 所以在网路上有一个小小的P5 cheatsheet 小教学如果有需要可以随时回来这边去看自己有需要的东西

Dy9-5PWUcAEvI3s.jpeg

本地安装

如果您有本地端的设定可以参考 因为教学都是用在网路编辑器，但我们其实还是需要在本机端才是最主要的需求

https://p5js.org/get-started/

他会直接提供主要大家可以直接在本机端如何直接设定的做法
建议也可以安装 VSCODE 跟 liveserve 去把P5.js直接执行出来

也可以直接去下载他的CDN在html里面放入P5.js

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>p5.js example</title>
    <style>
      body {
        padding: 0;
        margin: 0;
      }
    </style>
    <script src="p5.js"></script>
    <!-- <script src="../addons/p5.sound.js"></script> -->
    <script src="sketch.js"></script>
  </head>

  <body>
    <main></main>
  </body>
</html>

sketch.js里面只要放入 p5 的设定就可以跑执行看看了

function setup() {
  //slow down the frameRate to make it more visible
  createCanvas(1000, 1000);
  background(0, 0, 0);
}

function draw() {
  background(100, 10);
  fill(mouseX, mouseY, frameCount);
  if (mouseIsPressed) {
    fill(0);
    rect(mouseX, mouseY, 100, 100);
  } else {
    ellipse(mouseX, mouseY, 100, 100);
  }
}
// print(pmouseX +

写CODE操作技巧

这边主要给已经会写code的朋友利用https://openprocessing.org/ 你可以在里面操作的技巧 你就可以节省很多不必要的滑鼠删除增加指令

速键（使用 Mac 的同学只要将 ctrl 代换成 ⌘ 即可）

  • Ctrl + F：关键字搜寻
  • Ctrl + D：多重选取关键字
  • Alt + 左右：往左 or 右移动一个单字
  • Alt + Delete / Backspace：往左 or 右删除一个单字
  • Ctrl + 左右：移动到句首 or 句尾
  • Ctrl + Delete / Backspace：往左 or 右删除一整行
  • Tab / Shift + Tab：增加 / 减少缩排
  • Ctrl + enter：执行 Code

<<:  Day4 Javascript介绍

>>:  从零开始学游戏设计：建立分数条 Part2.图片与文字

DAY25 搞样式--用CSS Gird来搞个万年历吧（下）

前言 从DAY24篇开始，已经开始尝试在实作的部分，也不知道来不来的及30天做完，没预料到的变数太多...

Day34. 范例：歌曲排行（迭代器模式）

本文同步更新於blog 需求一：KTV系统要按照新增到系统的时间，由旧到新，实作歌曲排行 定义系统...

D13 第七周 (回忆篇)

这礼拜进度缓慢了下来，还在跟第六周的切版作业奋斗。到这边才慢慢找到自己切版比较顺的流程 RWD 一开...

[Day 03] 环境建置(二) - gulp、compiling SASS

今天要来安装这次会用到的所有工具套件，并能顺利将SASS编译成CSS~ VS Code 套件 我们这...

【9】各种优化器(Optimizer) 大车拼实验

Colab连结 今天的主题是要探讨优化器（Optimizer）对模型学习的影响，有关优化器该用哪个好...