Eine Javascript-Bibliothek (wie), die die Verarbeitung im Web verwenden kann Ich bin der Retter von Menschen, die veröffentlichen wollen, was sie vorerst mit Processing gemacht haben, aber nicht können.
Schreiben Sie nun die Serverseite mit Flask of Python. Flask ist ein Mikroframework für das Web, das für Python bereitgestellt wird. Auf jeden Fall sind die Einführungskosten niedrig. Es ist wirklich einfacher einzuführen als dj 〇 ngo. Es ist wirklich einfach. (Obwohl das Material alt ist und es einige nervige Teile gibt)
Sofort von irgendwoher ~~ Ich habe es ~~ Ich werde es basierend auf dem Referenzcode machen. Es ist eine Einführung, damit ich keine schwierigen Dinge anfasse (weil ich selbst Anfänger bin).
Die Bewegung ist die gleiche wie im vorherigen Artikel.
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()
(Wenn Sie darüber nachdenken, müssen Sie bei dieser Implementierung kein Python verwenden ...)
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> <!--Bitte korrigieren Sie dies rechtzeitig. Ob Sie es ablegen oder im Netzwerk verwenden-->
<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);
}
Ich lösche den vorherigen Verarbeitungscode in Javascript. Diejenige, die eine globale Variable sein kann, ist "p_" Es hängt davon ab, wie Sie sich fühlen, aber wenn Sie mit Javascript und Verarbeitung vertraut sind, werden Sie sich damit wohl fühlen.
let canvas = createCanvas(windowWidth, windowHeight);
canvas.parent("p5Canvas");
Ich denke das ist der Schlüssel. Als ich in Processing.js war, war es meiner Meinung nach etwas schwieriger, den Bildschirm auszufüllen, aber p5.js ist flüssig. Sie können auch die ID der anzuzeigenden Zeichenfläche angeben. Wenn Canvas ohne dies vorhanden ist, wird es normalerweise damit verknüpft. Referenz-URL
Wenn jedoch die Bildschirmgröße geändert wird, ändert sich der Anzeigebereich nicht in der ursprünglichen Größe.
function windowResized(){
resizeCanvas(windowWidth, windowHeight);
}
Füge das hinzu. Referenz-URL
Sie können auch "mouseX", "elipse" und "colorMode" verwenden. Hört sich gut an.
** Personen aus anderen js-Bibliotheken sind möglicherweise nicht daran gewöhnt. Wenn Sie jedoch den Bildschirm (bacground) beim Zeichnen nicht initialisieren, bleibt die vorherige Zeichnung erhalten. ** ** **
Wenn Sie die Zeichnung initialisieren möchten, die Zeichnung jedoch hinter der Leinwand behalten möchten, können Sie einen Hintergrund erstellen. Bei Eingabe von 4 Variablen
background(r, g, b, α)
Daher sollten Sie in der Lage sein, den verbleibenden Zustand der vorherigen Zeichnung abhängig vom Wert von α zu ändern. (Ich habe den Code verloren, den ich versucht habe)
Vor p5.js gab es etwas namens Processing.js. In Processing.js können Sie den Verarbeitungscode unverändert verwenden.
Ich glaube nicht, dass irgendjemand es bekommen wird, aber ich werde es verlassen.
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()});
}
Der Maximierungsprozess wird in der letzten js-Datei ausgeführt.