Skip to content

Commit

Permalink
format and fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@KoCSience
KoCSience committed Feb 17, 2024
1 parent 7d0c090 commit 3d46371
Show file tree
Hide file tree
Showing 2 changed files with 314 additions and 11 deletions.
89 changes: 80 additions & 9 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,69 @@
<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>ゼロから学べるProcessing入門サイト : P5 Code School</title><meta name="description" content="ゼロから学べるProcessing入門サイト"><link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,700" rel="stylesheet"><link href="/assets/css/style.css" rel="stylesheet"></head><body><div class="page-container"><header class="header"><div class="inner"><h1 class="site-title"><a class="no-transition" href="/">p5 code school</a></h1><nav><ul class="site-navigation"><li><a class="no-transition" href="/tutorial/">Tutorials</a></li></ul></nav></div></header><main class="main-contents" id="contentsWrapper"><div class="article-container" data-prev="-1" data-next="-1"><h1>P5 Code Schoolについて</h1><p>P5 Code Schoolはプログラミング未経験者がゼロからProcessingを学ぶことができるWebサイトです。</p>
<h2>Processingとは？</h2><p>ProcessingはJavaというプログラミング言語のグラフィックス処理機能を扱いやすくした、コンピュータアートのためのプログラミング言語です。操作が容易な専用の開発環境でプログラムが書けて、アイデアがすぐに視覚的なフィードバックとして得られるためプログラミング入門者にも適ています。</p>
<p>余談ですが、ProcessingはよくP5という略称で呼ばれます。Processingという単語は色んな分野で使われているので、プログラミング言語としてのProcessingをProce55ingと書くことにしよう、という流れがありました。「Processing」で検索してもプログラミング言語としてのProcessing以外の情報が多数ヒットしてしまうので、これを防ぐ目的もあります。今はあまりProce55ingという表記は見かけませんが、その略称であるP5は今も使われています。</p>
<h2>Processingの記述例</h2><p>&quot;マウスの位置に色と大きさがランダムな円を描く&quot;というプログラムを書いてみましょう。記述は以下の9行で済みます。</p>
<p><img src="/images/AboutP5/aboutp5.jpg" alt=""></p>
<p><a href='https://github.com/p5aholic/p5codeschool-samples/tree/master/AboutP5/AboutP5.pde' target='_blank'>AboutP5.pde</a></p>
<pre><code class="language-processing"><span class="hljs-comment">// プログラム開始時に一度だけ実行される処理</span>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>ゼロから学べるProcessing入門サイト : P5 Code School</title>
<meta name="description" content="ゼロから学べるProcessing入門サイト" />
<link
href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:400"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Source+Code+Pro"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,700"
rel="stylesheet"
/>
<link href="assets/css/style.css" rel="stylesheet" />
</head>
<body>
<div class="page-container">
<header class="header">
<div class="inner">
<h1 class="site-title">
<a class="no-transition" href="/">p5 code school</a>
</h1>
<nav>
<ul class="site-navigation">
<li><a class="no-transition" href="/tutorial/">Tutorials</a></li>
</ul>
</nav>
</div>
</header>
<main class="main-contents" id="contentsWrapper">
<div class="article-container" data-prev="-1" data-next="-1">
<h1>P5 Code Schoolについて</h1>
<p>
P5 Code
Schoolはプログラミング未経験者がゼロからProcessingを学ぶことができるWebサイトです。
</p>
<h2>Processingとは？</h2>
<p>
ProcessingはJavaというプログラミング言語のグラフィックス処理機能を扱いやすくした、コンピュータアートのためのプログラミング言語です。操作が容易な専用の開発環境でプログラムが書けて、アイデアがすぐに視覚的なフィードバックとして得られるためプログラミング入門者にも適ています。
</p>
<p>
余談ですが、ProcessingはよくP5という略称で呼ばれます。Processingという単語は色んな分野で使われているので、プログラミング言語としてのProcessingをProce55ingと書くことにしよう、という流れがありました。「Processing」で検索してもプログラミング言語としてのProcessing以外の情報が多数ヒットしてしまうので、これを防ぐ目的もあります。今はあまりProce55ingという表記は見かけませんが、その略称であるP5は今も使われています。
</p>
<h2>Processingの記述例</h2>
<p>
&quot;マウスの位置に色と大きさがランダムな円を描く&quot;というプログラムを書いてみましょう。記述は以下の9行で済みます。
</p>
<p><img src="images/AboutP5/aboutp5.jpg" alt="" /></p>
<p>
<a
href="https://github.com/p5aholic/p5codeschool-samples/tree/master/AboutP5/AboutP5.pde"
target="_blank"
>AboutP5.pde</a
>
</p>
<pre><code class="language-processing"><span class="hljs-comment">// プログラム開始時に一度だけ実行される処理</span>
<span class="hljs-keyword">void</span> <span class="hljs-title">setup</span>() {
<span class="hljs-built_in">size</span>(<span class="hljs-number">960</span>, <span class="hljs-number">540</span>); <span class="hljs-comment">// 画面サイズを設定</span>
<span class="hljs-built_in">background</span>(<span class="hljs-number">255</span>); <span class="hljs-comment">// 背景色を設定</span>
Expand All @@ -19,5 +78,17 @@ <h2>Processingの記述例</h2><p>&quot;マウスの位置に色と大きさが
<span class="hljs-comment">// マウスの位置にランダムな大きさの楕円を描く</span>
<span class="hljs-built_in">ellipse</span>(<span class="hljs-built_in">mouseX</span>, <span class="hljs-built_in">mouseY</span>, <span class="hljs-built_in">random</span>(<span class="hljs-number">50</span>), <span class="hljs-built_in">random</span>(<span class="hljs-number">50</span>));
}</code></pre>
<p>このように、Processingで書かれたプログラムはアイデアとは関係のない記述を限界まで省くことができます。</p>
</div></main><footer class="footer"><div class="inner"><p class="copyright">&copy; P5 Code School 2017</p></div></footer></div><script src="/assets/js/bundle.js"></script></body></html>
<p>
このように、Processingで書かれたプログラムはアイデアとは関係のない記述を限界まで省くことができます。
</p>
</div>
</main>
<footer class="footer">
<div class="inner">
<p class="copyright">&copy; P5 Code School 2017</p>
</div>
</footer>
</div>
<script src="assets/js/bundle.js"></script>
</body>
</html>
Loading

0 comments on commit 3d46371

Please sign in to comment.