Une bibliothèque javascript (comme) qui peut utiliser le traitement sur le Web Je suis le sauveur des gens qui veulent publier ce qu'ils ont fait avec Processing pour le moment, mais qui ne le peuvent pas.
Maintenant, écrivez le côté serveur avec Flask of python. Flask est un microframework pour le web fourni pour python. Quoi qu'il en soit, le coût d'introduction est faible. C'est vraiment plus facile à introduire que dj 〇 ngo. C'est vraiment simple. (Bien que le matériau soit vieux et qu'il y ait des pièces ennuyeuses)
Immédiatement de quelque part ~~ je l'ai eu ~~ je le ferai basé sur le code de référence. C'est une introduction donc je ne toucherai pas aux choses difficiles (car je suis moi-même un débutant)
Le mouvement est le même que celui de l'article précédent.
app.py
from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()
(Si vous y réfléchissez, vous n'avez pas besoin d'utiliser python avec cette implémentation ...)
layout.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>p5.js</title>
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script> <!--Veuillez corriger cela en temps opportun. Que vous le déposiez ou que vous l'utilisiez sur le réseau-->
<script src="/static/js/kurukuru.js"></script>
<style type="text/css">
* {margin: 0;}
* {padding: 0;}
</style>
</head>
<body>
{% block content %}{% endblock %}
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>
index.html
{% extends "layout.html" %}
{% block content %}
<!-- Form
================================================== -->
<div class="form">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<p>
<div id="p5Canvas">
<p></p>
</div>
</p>
</div>
</div>
</div>
</div>
{% endblock %}
kurukuru.js
const N = 20;
let p_x = [];
let p_y = [];
let p_pX = [];
let p_pY = [];
let p_distances = [];
let p_gap_theata = [];
let p_colors = [];
let p_frameCount;
function setup(){
let canvas = createCanvas(windowWidth, windowHeight);
canvas.parent("p5Canvas");
background(255);
colorMode(HSB, 255, 100, 100);
p_frameCount = 0;
noStroke();
for(var i = 0; i < N; i++){
p_x.push(30);
p_pX.push(30);
p_y.push(30);
p_pY.push(30);
p_distances.push(random(15, 150));
p_gap_theata.push(random(-PI, PI));
p_colors.push(color(random(255), 100, 100));
}
}
function draw(){
colorMode(RGB, 255);
background(255);
colorMode(HSB, 255, 100, 100);
for(var i = 0; i < N; i++){
fill(p_colors[i]);
let theata = radians(p_frameCount*5.0) + p_gap_theata[i];
let dist =p_distances[i] + 90.0*noise(theata/1.0, p_frameCount/100.0)
p_x[i] = (mouseX + dist*cos(theata) + p_pX[i])/2.0;
p_y[i] = (mouseY + dist*sin(theata) + p_pY[i])/2.0;
ellipse(p_x[i], p_y[i], 20, 20);
p_pX[i] = p_x[i];
p_pY[i] = p_y[i];
}
p_frameCount++;
}
function windowResized(){
resizeCanvas(windowWidth, windowHeight);
}
Je laisse tomber le code de traitement précédent en javascript. Celui qui peut être une variable globale est p_
Cela dépend de ce que vous ressentez, mais si vous êtes familier avec javascript et le traitement, vous vous sentirez à l'aise avec.
let canvas = createCanvas(windowWidth, windowHeight);
canvas.parent("p5Canvas");
Je pense que c'est la clé. Quand j'étais dans Processing.js, je pense que c'était un peu plus difficile de remplir l'écran, mais p5.js est fluide. Vous pouvez également spécifier l'ID du canevas à afficher. Si le canevas existe sans cela, il lui sera associé normalement. URL de référence
Cependant, lorsque la taille de l'écran est modifiée, la zone d'affichage ne change pas à la taille d'origine.
function windowResized(){
resizeCanvas(windowWidth, windowHeight);
}
Ajoute ça. URL de référence
Vous pouvez également utiliser mouseX, ʻelipse et colorMode`.
Ça m'a l'air bien.
** Les personnes d'autres bibliothèques js ne peuvent pas y être habituées, mais si vous n'initialisez pas l'écran (bacground) dans draw, le dessin précédent restera. ** **
Si vous voulez initialiser le dessin, mais que vous voulez garder le dessin derrière le canevas, vous pouvez concevoir background.
Lors de la saisie de 4 variables
background(r, g, b, α)
Par conséquent, vous devriez pouvoir modifier la condition restante du dessin précédent en fonction de la valeur de α. (J'ai perdu le code que j'ai essayé)
Avant p5.js, il y avait quelque chose qui s'appelait Processing.js. Dans Processing.js, vous pouvez utiliser le code de traitement tel quel.
Je pense que personne ne l'obtiendra, mais je vais le laisser.
index.html
<!DOCTYPE html>
<head>
<script src="processing.js"></script>
<script>
window.onload = function(){
var canvas = document.getElementsByTagName('canvas')[0];
var codeElm = document.getElementById('processing-code');
var code = codeElm.textContent || codeElm.innerText;
new Processing(canvas, code);
};
</script>
<script id="processing-code" type="application/processing">
void setup() {
size(innerWidth, innerHeight);
frameRate(20);
}
void draw() {
size(innerWidth, innerHeight);
background(0, 0);
ellipse(width/2, height/2, mouseX, mouseY);
}
</script>
</head>
<body bgcolor="ffccff">
<div id="wrapper">
<canvas id = "main"></canvas>
</div>
</body>
</html>
main.css
body{
margin: 0px;
padding: 0px;
position: relative;
}
body #wrapper{
width: 100%;
height: 100%;
position: fixed;
}
resize.js
$(function(){
sizing();
$(window).resize(function(){
sizing();
});
});
function sizing(){
$("#main").attr({height:$("wrapper").height()});
$("#main").attr({height:$("wrapper").width()});
}
Le processus de maximisation est effectué dans le dernier fichier js.
Recommended Posts