p5.jsの会員登録方法と画像表示

p5.js

今回はp5.jsの会員登録方法を教えます。
会員登録をするとコードをWeb上で保存できて、別のパソコンで作業することができます。(ログインする必要がありますが)
あとついでに画像を表示させる方法も教えます。

会員登録方法

最初に赤い四角の所をクリックしましょう。
Sign uptってかいてあるはずです。

すると次の画面になるはずです。

googleアカウントでログインしてもいいですが、別のパソコンだと1から情報を入れなきゃいけないし、その情報がパソコンに記録されて個人情報流出につながることを留意してください。
情報を入れて「Sign Up」を押すとその時点で登録完了です。

画像の表示の仕方

まず赤い四角の所をクリックしましょう。

そこから現れる項目で「ファイルアップデート」を選ぶと好きな画像ファイルをアップロードできます。

そして以下の様にsketch.jsにコードを入力しましょう。

let playful; //画像の変数playfulを定義

function preload(){
  playful = loadImage('playful.png');//画像を読み込む ここで画像ファイルの名前を書きます
  
}

function setup() {
  createCanvas(400, 400);
  background(220);
  image(playful,0,0);//画像を表示
}

function draw() {
  if(mouseIsPressed){
    image(playful,mouseX,mouseY);//画像を表示
  }
}

これでアップロードした画像が画面に表示されるはずです。
それではまた次回。

コメント


タイトルとURLをコピーしました